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并且我无法弄明白。请参阅下面的控制台screengrab。

我想我可能在设置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的映射，如下所示：

（视图/ 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

您可以使用文件夹View controller-based status bar appearance -> NO中提供的JavaScript文件：

node_modules/angular2/bundles

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

关于第二个问题，您放在<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等待TypeScript文件中的更新并自动编译它们。此命令必须在后台启动...例如：tsc -w。

希望它可以帮到你，亨利

Answer 4

（1）对于第一个问题：

找不到404角度文件的问题是，当Sails提升时，Grunt会删除.tmp中的所有文件，然后从头开始重建项目，那么Sails服务器会在构建完成之前启动并且文件不在那里＃39;为什么你得到404.如果你等了一会儿你的页面加载没有任何错误。

如果等待时间过长，请使用CDN中的这些脚本：

.surveySummaryList> .active >.surveySummaryMenu {
  display: inherit;
}

（2）第二个问题：在单独的控制台窗口中运行tsc，如下所示：

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

（3）第三个问题是将以下内容添加到需要的组件中：

npm run tsc:w

将Sails Js与Angular 2

4 个答案: