Angular 2 on Rails

Now that Angular 2.0 is out and stable, the time is ripe for experimentation. If you’re familiar with Ruby on Rails, you’re probably intimate with the Asset Pipeline, and if you have an AngularJS (1.x) driven application you might be using it within the constraints of the Rails Asset Pipeline. However, many things have evolved from the first Angular release and now is the time to put away this tool of the past. (At least, partially.)

Seriously? You don’t want me to follow convention here?

Seriously -- well, sorta. Angular 2.0 comes with its own set of conventions and tooling, and most of that ecosystem is built around TypeScript, TypeScript Compiler and the packages needed to facilitate them. It’s up to you whether you want to go full monty, but in this tutorial we will still be using the Rails Asset Pipeline to manage our CSS stylesheets.

Let’s get down to brass tax, shall we? Before we get started, you’ll need to make sure the dependencies below are all installed on your system:

  • rbenv

  • Ruby 2.3.0

  • Rails 5.0

  • NVM

  • Node.js 6.6.0

Now, we can get to the tempeh and potatoes. If you just want to see this in its completed form, check out the rails-angular2-boilerplate repository on GitHub.

  1. Generate a new Ruby on Rails application:

    rails new boilerplate -T

  2. Create the file package.json in your Rails root directory with the contents:

  3. Create the file tsconfig.json in your Rails root directory with the contents:

  4. Create the file package.json in your Rails root directory with the contents:

  5. Create the file public/system.config.js with the contents:

    • system.config.js

    • system.config.js is your SystemJS configuration file, it tells your browser how to setup and bootstrap the environment your Angular 2 application requires.

  6. Add the following line into the main portion of config/application.rb

    config.assets.paths << Rails.root.join('node_modules')

  7. Run the command npm install from the root directory of your application. This will tell Node Package Manager to install all of the packages for Angular 2 and its dependencies. These will be placed into the directory node_modules, but we have configured Ruby on Rails to serve this directory’s contents under the /assets path. Now, we’re ready to start coding our first Angular 2 in Rails.

  8. We have one more bit of setup to do. Insert the following code into the file app/views/layouts/application.html.erb before the closing </head> tag.

    • <script src="/assets/core-js/client/shim.min.js"></script>

      <script src="/assets/zone.js/dist/zone.js"></script>

      <script src="/assets/reflect-metadata/Reflect.js"></script>

      <script src="/assets/systemjs/dist/system.src.js"></script>

      <script src="system.config.js"></script>

      <script>

      System.import('app').catch(function(err){ console.error(err); });

      </script>

  9. Create the file public/app/app.main.ts with the contents:

    • import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

      import { AppModule } from './app.module';

      const platform = platformBrowserDynamic();

      platform.bootstrapModule(AppModule);

    • app.main.ts is what bootstraps your Angular 2 application, and if you divide your application into multiple top-level modules, that will get reflected here.

  10. Create the file public/app/app.module.ts with the contents:

    • import { NgModule } from '@angular/core';

      import { BrowserModule } from '@angular/platform-browser';

      import { AppComponent } from './app.component';

      @NgModule({

      imports: [ BrowserModule ],

      declarations: [ AppComponent ],

      bootstrap: [ AppComponent ]

      })

      export class AppModule { }

  11. Create the file public/app/app.component.ts with the contents:

    • import { Component } from '@angular/core';

      @Component({

      selector: 'my-app',

      template: '<h1>Angular 2 on Rails!</h1>'

      })

      export class AppComponent { }

  12. Run npm start to compile your TypeScript files. This will also run the TypeScript Compiler in “watch" mode, which will wait for changes to your TypeScript files and re-compile them on the fly, so you can keep this running while you’re developing.

  13. Now that you’ve created your first basic Angular 2 module and component, we can insert the directive for AppComponent somewhere within our Ruby on Rails views. To test, you can place it in app/views/layout/application.html.erb for now.

    • <my-app>
  14. Congratulations! You now have Angular 2, riding on Rails! You should see something like the below screenshot when you run your Rails application.



Feel free to star/clone/fork the repository for this boilerplate: nhodges/rails-angular2-boilerplate