Angular 2和Sails.js

Question

We are using Sails.js for our app's backend, with Angular 2 on the front end. Before the Angular 2 rc1 release, everything worked perfectly. I started upgrading, and have hit a few snags.

First off, we can't access anything in the node_modules folder from the front end. So to get by that, we have a gulp task that is taking the node_modules we need, such as the @angular/ folder, rxjs/ , and zone.js . This seems to be working. When I reference js/dependencies/zone.js/dist/zone.js in the HTML file, it pulls the file in perfectly. But then when configuring SystemJS, the files don't seem to pull in correctly.

var System;
(function(global) {

    // map tells the System loader where to look for things
    var map = {
        'app':                        'js', // 'dist',
        'rxjs':                       'js/dependencies/rxjs',
        // 'angular2-in-memory-web-api': 'angular2-in-memory-web-api',
        '@angular':                   'js/dependencies/@angular',
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        // 'angular2-in-memory-web-api': { defaultExtension: 'js' },
        // '/angular2-jwt':              { defaultExtension: 'js' }
    };

    var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/router-deprecated',
        '@angular/testing',
        '@angular/upgrade',
    ];

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function(pkgName) {
        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });

    var config = {
        map: map,
        packages: packages
    };

    System.config(config);

})(this);

This is the config file I've used to set up SystemJS. However, rxjs and @angular aren't being pulled in by SystemJS. The errors are gone from the console in the browser, but the app is definitely not being bootstrapped.

Is there any other way to get the @angular files to be pulled in by SystemJS? What other options do I have to get an Angular 2 app up and running with Sails?

**** EDIT ****

Here is a gist with the systemjs.config.js file, the layout.ejs file, and the main.ts file.

Answer 1

I got my app to start loading the @angular packages like it was supposed to. I'm not sure why this was an issue, but it turned out to affect me. In my tsconfig.json file, I had an outFile attribute declared. I made sure that the file was transpiled and output to the right spot, but it didn't work until I removed the outFile attribute and let it determine that part on its own.

This may not be the answer to everyone's issue, but it worked for me.

Answer 2

Best way to make sails/angular application is to to do it by REST API based architecture. You remove views from sails and create REST APIs for standalone Angular2 application. Then you use angular 2 material in Angular2. This way you will have least of problems.