Sails Js integration with Angular 2

Question

I am trying to integrate Angular 2 into a Sails Js application. I am new to both. I read this official textbook here. It works great offline with a static http server, but when I try to integrate into the sail application, I have the following problems:

1 - How to access angular2 js in the local node_modules folder. Every time I do this, the sails interpret it as a route and give me 404 for my scripts. For instance:

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

I managed to overcome the problem above using cdnjs links, but I would like to know the best / correct solution.

2 - I added the tsc and tsc -w scripts to my package.json package, but even with sails lift --verbose I don't get any output or error. This is how I added the script file in json:

 "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. It worked, but again it is expected that it will work with scripts. It would be great to know what I am missing.

3 - After jumping through hoops to get rid of the above errors, when I raise the server again, it gives me more than 404 errors, which seem to come from system.src.js and that I cannot understand. Please view screengrab console below.

I think I could be wrong setting Angular application directories in sails. To make sure that we all cover, here is the directory structure that I use. The sail app has nothing yet. This is why the paths below are for Angular related artifacts and assets only.

In the resource folder:

application

│ ├── app.component.ts

│ └── main.ts

Of course .ts files are .ts in js.

In the sails view folder I have layout.ejs which has the 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 the above files, I also added tsconfig to the sails root folder.

I followed the code structure and directory recommendations from the official quick start guide.

Answer 1

So, for everyone who is interested, I solved the following problems:

1 - to provide static access to node_modules I created express middleware (maybe they also use policies for this?):

(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 so well that there

3 - For rxjs related errors, I did some research and found out that rxjs is no longer associated with angular 2 . So I had to slightly modify the systemjs configuration to add a mapping for rxjs, for example:

(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 configure access to your static files. You can check how, right here. http://sailsjs.org/documentation/concepts/assets

Put these node modules in the resource folder for which you can get static access.

However, are you sure you want to do this with Sails? As far as I know, Sails is a full-blown MVC infrastructure that you won't need if you want to use it only as a backend for Angular. I would recommend using something like Express instead.

Answer 3

You can use JavaScript files that are located in the node_modules/angular2/bundles folder:

 <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script> <script src="node_modules/angular2/bundles/http.dev.js"></script> 

This should answer your first question.

Regarding the second question, the elements you put in the scripts block of your package.json file are aliases for commands. tsc -w waits for updates in TypeScript files and automatically compiles them. This command should be run in the background ... For example: npm run tsc:w .

Hope this helps you, Thierry

Answer 4

(1) On the first issue:

The problem with 404 angular files was not found, so that when Sails raises Grunt, deletes all the files in .tmp, then restores the project from scratch, so it happens that the Sails server starts before the build is completed, and that’s not why you get 404 If you wait a little while your page should load without any errors.

If you wait too long, use these scripts from the CDN:

  <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.1/router.dev.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.1/http.dev.js"></script> 

(2) Second question: Run tsc in a separate console window as follows:

 npm run tsc:w 

(3) The third problem, adding the following to the components where necessary:

 import 'rxjs/add/operator/map';