javascript - 将 Sails Js 与 Angular 2 集成

Question

我正在尝试将 Angular 2 集成到 Sails Js 应用程序中。我对两者都是新手。我一直在关注this官方教程在这里。它在静态 http 服务器的独立模式下工作正常，但是当我尝试集成到 sails 应用程序时，我遇到以下问题:

1 - 我如何引用本地 node_modules 文件夹中的 angular2 js。每次我这样做，sails 都会将其解释为一条路线，并为我的脚本提供 404。例如:

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

我现在能够使用 cdnjs 链接克服上述问题，但我想知道更好/合适的解决方案。

2 - 我添加了 tsc和 tsc -w脚本到我的 package.json，但即使是 sails lift --verbose我没有得到任何输出或错误。这是我将脚本添加到 json 文件的方式:

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

最后我不得不使用 -g 安装 typescript 并手动编译。这行得通，但同样，它应该与脚本一起工作。很高兴知道我错过了什么。

3 - 在克服上述错误后，当我再次提起服务器时，它给了我更多 404 错误，这似乎来自 system.src.js我无法弄清楚。请查看下面的控制台屏幕截图。

我想我在 sails 中设置 Angular 应用程序目录时可能会犯错误。为了确保我们涵盖所有内容，这里是我正在使用的目录结构。 sails 应用程序中还没有任何内容。这就是为什么以下路径仅适用于与 Angular 相关的工件和 Assets 。

在 Assets 文件夹中:

应用

│ ├── app.component.ts

│ └── main.ts

当然是 .ts文件被编译成js。

在 sails views 文件夹中，我有 layout.ejs，它包含以下内容:

  .
  .
  .

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

除了上述文件外，我还在 sails 根文件夹中添加了 tsconfig。

我遵循了 official 中的代码和目录结构指南快速入门教程。

Answer 1

所以，对于任何感兴趣的人，我已经解决了这样的问题:

1 - 为了提供对 node_modules 的静态访问，我创建了一个快速中间件(可能也为此使用策略？):

(config/express.js)

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

2 - 我已经能够编译了，一切都很好

3 - 对于与 rxjs 相关的错误，我做了一些研究，发现 rxjs 是 no longer bundled with angular 2 .因此，我不得不稍微修改 systemjs 配置以添加 rxjs 的映射，如下所示:

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