Integrating Sails Js with Angular 2

Question

I'm trying to integrate Angular 2 in a Sails Js application. I'm new to both. I have been following this official tutorial here. It works fine in standalone mode with a static http server but when i try to integrate into sails app i get following problems:

1 - How do i refer to angular2 js inside the local node_modules folder. Everytime i do, sails interprets it as a route and gives me a 404 for my scripts. For instance:

<script src="node_modules/angular2/dist/angular2.min.js"></script>

I was able to overcome above issue using cdnjs links for now but i would like to know a better/proper solution.

2 - I added the tsc and tsc -w scripts to my package.json, but even with sails lift --verbose i do not get any output or error. Here is how I added the script to json file:

"scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "debug": "node debug app.js",
    "start": "node app.js"
}

In the end i had to install typescript with -g and compile manually. That worked, but again, it's expected to work with the scripts. It would be great to know what I'm missing.

3 - After jumping through hoops to get rid of the above errors, when i lift the server again, it gives me more 404 error which seem to be coming from system.src.js and that I am unable to figure out. Please see the console screengrab below.

I think I might be making a mistake setting up the angular application directories within sails. Just to make sure we cover everything, here is the directory structure I'm using. The sails app does not have anything in it yet. Which is why the below paths are just for angular related artifacts and assets.

Within the assets folder:

app

│   ├── app.component.ts

│   └── main.ts

Of course the .ts files get compiled to js.

In the sails views folder I have layout.ejs which has following contents:

  .
  .
  .

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.17/system-polyfills.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.1/angular2-polyfills.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.17/system.src.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.1/angular2.dev.js"></script>

  <script>

      System.config({
          packages: {
              app: {
                  format: 'register',
                  defaultExtension: 'js'
              }
          }
      });
      System.import('/app/main')
              .then(null, console.error.bind(console));
  </script>


  .
  .
  .

  <my-app>Loading...</my-app>

In addition to above files, I have also added the tsconfig in the sails root folder.

I have followed the code and directory structure guidelines from the official quickstart tutorial.

Answer 1

So, for anyone interested, i have resolved the issues like so:

1 - For providing static access to node_modules i created an express middleware (probably use policies for this as well?):

(config/express.js)

var express = require('express');
module.exports.http = {
customMiddleware: function (app) {
    app.use('/node_modules', express.static(process.cwd() + '/node_modules'));
   }
};

2 - I was able to compile already so all good there

3 - For the rxjs related errors, i did some research and found out that rxjs is no longer bundled with angular 2. Therefor, i had to modify the systemjs config a bit to add mapping for rxjs, like so:

(views/layout.ejs)

System.config({
          map: {
              rxjs: 'node_modules/rxjs' // added this map section
          },
          packages: {
              app: {
                  format: 'register',
                  defaultExtension: 'js'
              },
              'rxjs': {defaultExtension: 'js'} // and added this to packages
          }
      });
System.import('/app/main')
              .then(null, console.error.bind(console));

Answer 2

You need to setup access to your static files. You can check out how, right here. http://sailsjs.org/documentation/concepts/assets

So put those node modules into an asset folder, for which you can then have static access.

However, are you sure you want to do this with Sails? As far as I know Sails is a fullblown MVC framework, which you won't really need if you only want to use it as a backend for Angular. I'd recommend using something like Express instead.