Javascript 将Sails Js与Angular 2集成

我正在尝试将Angular 2集成到Sails Js应用程序中。我对这两个都不熟悉。我一直在遵循这里的官方教程。它在静态http服务器的独立模式下运行良好，但当我尝试集成到sails应用程序时，会遇到以下问题：

1-如何在本地节点\模块文件夹中引用angular2 js。每次我这么做，sails都会将其解释为一条路线，并为我的脚本提供404。例如：

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

2-我在我的package.json中添加了

tsc

和

tsc-w

脚本，但即使使用

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

│   └── 梅因酒店

当然，

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

。
.
.
System.config({
套餐：{
应用程序：{
格式：'寄存器'，
defaultExtension:'js'
}
}
});
System.import（“/app/main”）
.then（null，console.error.bind（console））；
.
.
.
加载。。。

除了上面的文件，我还在sails根文件夹中添加了tsconfig

---

我遵循了quickstart教程中的代码和目录结构指南

您可以使用文件夹

node\u 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>

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

关于第二个问题，您在

package.json

文件的

scripts

块中放置的元素是命令的别名。

tsc-w

one等待TypeScript文件中的更新并自动编译它们。此命令必须在后台启动。。。例如：

npm运行tsc:w

希望它能帮助你，

---

Thierry

您需要设置对静态文件的访问权限。你可以看看怎么做，就在这里。

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

---

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

因此，对于任何感兴趣的人，我已经解决了如下问题：

1-为了提供对节点模块的静态访问，我创建了一个express中间件（可能也会使用策略）：

（config/express.js）

2-我已经能够编译了，所以在那里一切都很好

3-对于rxjs相关的错误，我做了一些研究，发现rxjs是。因此，我不得不稍微修改systemjs配置以添加rxjs的映射，如下所示：

（视图/layout.ejs）

（1） 关于第一个问题：

找不到404 angular文件的问题是，当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>

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

import 'rxjs/add/operator/map';

---

好吧，我已经试过了，又试过了，但给出了404:“NetworkError:404 Not Found-”“我还没有添加任何服务器端路由，只是想从你的问题中弄清楚，我看到了你试过的

node\u模块/angular2/dist/…

而不是

node\u模块/angular2/bundles/…

。不？没关系，因为它需要在资产文件夹中。请检查我的其他答案。我想到了这一点，但我不想将模块移到内部，这太费劲了，不是维护的最佳方式，你不认为吗？恐怕，这是我唯一知道的方式。Angular是一个客户端框架，需要访问这些模块。使用express，您可以访问任何目录。是否有某种sails策略允许我访问？比如说“如果路由以段‘node_modules’not route’开始”？据我所知，文档中没有提到这一点。然而，可能有一种方法可以使用一些定制的middlewar。选择ejs或angular的主要问题是，您是想创建html服务器端还是客户端。因此，服务器端模板引擎（ejs、jade、Handlebar、mustachej等）很好也很酷，但是如果您决定从服务器向客户端发送JSON并在客户端呈现这些数据，那么您必须选择angular或其他客户端js库

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

npm run tsc:w

import 'rxjs/add/operator/map';