将 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 应用程序中还没有任何内容。这就是为什么以下路径仅适用于与角度相关的工件和资产。

在资产文件夹中：

应用程序

│   ├── 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

您需要设置对静态文件的访问权限。你可以在这里查看如何。 http://sailsjs.org/documentation/concepts/assets

因此，将这些节点模块放入资产文件夹中，然后您就可以对其进行静态访问。

但是，您确定要使用 Sails 执行此操作吗？据我所知，Sails 是一个成熟的 MVC 框架，如果您只想将其用作 Angular 的后端，您将不需要它。我建议改用 Express 之类的东西。

Answer 2

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

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

Answer 3

您可以使用文件夹node_modules/angular2/bundles中提供的JavaScript文件：

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

这应该回答你的第一个问题。

关于第二个问题，您放入 scripts 文件的 package.json 块中的元素是命令的别名。 tsc -w 等待 TypeScript 文件中的更新并自动编译它们。此命令必须在后台启动...例如：npm run tsc:w。

希望对你有帮助 蒂埃里

Answer 4

(1)对于第一个问题：

找不到 404 角度文件的问题是，当 Sails 解除 Grunt 时，会删除 .tmp 中的所有文件，然后从头开始重新构建项目，所以发生的情况是 Sails 服务器在构建完成之前启动并且文件不存在为什么会出现 404。如果您稍等片刻，您的页面应该会加载而不会出现任何错误。

如果等待时间过长，请使用 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) 第二个问题： 像这样在单独的控制台窗口中运行 tsc：

npm run tsc:w

(3) 第三个问题，在需要的组件中添加以下内容：

import 'rxjs/add/operator/map';