Angular CLI on Rails

Last time, we went over how to get Angular 2 to ride on Rails. Now that our front end and back end applications live in the same repository, let’s talk about taking Angular to the next level. In this post, we’ll be going over how to use Angular CLI in the context of our Ruby on Rails application. If you haven’t done anything beyond the last exercise, then you aren’t taking advantage of one of the tools that is highly suggested for use along Angular, and that tool is a bundler. Angular CLI ships with Webpack, a very popular bundling tool.

What is a bundler? I don’t want to get too far into the weeds, so I’ll present you with this line from Webpack, a popular JavaScript bundling tool and the one used by Angular CLI. A bundler is a tool that takes modules with dependencies and generates static assets representing those modules. If you want to learn more about this subject, I recommend diving into the “Getting Started" area of the Webpack documentation.

Without further adieu, let’s get our application set up to use Angular CLI. Note: This tutorial is going to walk through a totally clean setup. We are not picking up where we left off in the old tutorial.

  1. Create a new Ruby on Rails application:

    rails new boilerplate -T && cd boilerplate

  2. First off, you’ll need to install the NPM package. Installing Angular CLI will install the CLI tool, as well as Angular 2 and all of its dependencies.

    npm install -g angular-cli

  3. Now that Angular CLI is installed, we can generate a new Angular 2 application.

    ng new boilerplate

  4. Let’s change name of the directory containing the newly created app, for cleanliness:

    mv boilerplate ng

  5. Great! At this point you have a bare bones setup as is described in the Angular CLI README. However, running ng build will result in your bundled application being output to the ng/dist directory, which we don’t want. Time to move stuff around!

    mv ng/angular-cli.json .

    mv ng/package.json .

    mv ng/karma.conf.js .

    mv ng/protractor.conf.js .

  6. We’ll have to modify those files to make sure they are reading source files from the correct places and also that any generated files are going to the right places as well.

    • Modify angular-cli.json and change:

      • apps[0].root should be 'ng/src'

      • apps[0].outDir should be 'public/app'

    • Modify karma.conf.js and change:

      • files[0].pattern should be './ng/src/test.ts'

      • preprocessors key should be './ng/src/test.ts'

  7. Next, the bundled scripts must be generated. Angular CLI will take care of this for you when you run the build command.

    ng build

  8. Now, we just need to make sure our application layout is including the appropriate JavaScript files, and that our generated Angular 2 component has something to hook into! Modify app/views/layouts/application.html.erb and add the following right before the closing </body> tag.

    <app-root>Loading…</app-root>

    <script type="text/javascript" src="/app/inline.js"></script>

    <script type="text/javascript" src="/app/styles.bundle.js"></script>

    <script type="text/javascript" src="/app/main.bundle.js"></script>

  9. Done! Now when you launch your Rails server and navigate to it in a browser, you should be greeted by the text generated from your Angular 2 app and component.