Angular 2 和 Sails.js答案

【问题标题】：Angular 2 and Sails.jsAngular 2 和 Sails.js
【发布时间】：2016-05-10 19:03:36
【问题描述】：

我们使用 Sails.js 作为应用程序的后端，前端使用 Angular 2。在 Angular 2 rc1 发布之前，一切都运行良好。我开始升级，遇到了一些障碍。

首先，我们无法从前端访问node_modules 文件夹中的任何内容。因此，为了解决这个问题，我们有一个 gulp 任务正在获取我们需要的node_modules，例如@angular/ 文件夹、rxjs/ 和zone.js。这似乎奏效了。当我在 HTML 文件中引用 js/dependencies/zone.js/dist/zone.js 时，它会完美地拉入文件。但是在配置 SystemJS 时，文件似乎没有正确拉入。

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);

这是我用来设置 SystemJS 的配置文件。然而，rxjs 和 @angular 并没有被 SystemJS 引入。错误从浏览器的控制台中消失了，但应用程序肯定没有被引导。

还有其他方法可以让 SystemJS 拉入 @angular 文件吗？为了让 Angular 2 应用程序与 Sails 一起运行，我还有哪些其他选择？

**** 编辑 ****

Here is a gist 与 systemjs.config.js 文件、layout.ejs 文件和 main.ts 文件。

【问题讨论】：

标签： angular sails.js

【解决方案1】：

我让我的应用程序开始加载 @angular 包，就像它应该做的那样。我不知道为什么这是一个问题，但事实证明它影响了我。在我的tsconfig.json 文件中，我声明了一个outFile 属性。我确保文件已被转译并输出到正确的位置，但直到我删除了 outFile 属性并让它自行确定该部分后它才起作用。

这可能不是每个人的问题的答案，但它对我有用。

【讨论】：

我通过编辑 grunt 复制任务来做同样的事情，但我注意到当我第一次提升服务器时，依赖项没有反映。如果我停止服务器并重新启动它，则依赖项就在那里。

【解决方案2】：

制作sails/angular 应用程序的最佳方式是通过基于REST API 的架构来实现。您从sails 中删除视图并为独立的Angular2 应用程序创建REST API。然后在 Angular2 中使用 Angular 2 材质。这样你的问题就会最少。

【讨论】：

我不同意您建议的“最佳方式”。让 Sails 返回 Angular 应用程序索引页面非常好，并且可以按预期工作。