集成Sails Js和Angular 2

我正在尝试将Angular 2集成到Sails Js应用程序中。 我是新来的。 我一直在这里的官方教程。 它在静态http服务器的独立模式下工作正常，但是当我尝试集成到sails应用程序时，出现以下问题：

1 – 我如何在本地node_modules文件夹内引用angular2 js。 每次我做，帆将它解释为一条路线，并给我一个404我的脚本。 例如：

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

我现在可以使用cdnjs链接克服上述问题，但是我想知道更好的/合适的解决scheme。

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安装打印机并手动编译。 这工作，但再次，预计将与脚本工作。 知道我错过了什么会很高兴。

3 – 为了摆脱上述错误，当我再次举起服务器时，它给了我更多的404错误，似乎来自system.src.js ，我无法弄清楚。 请参阅下面的控制台screengrab。

我想我可能会在sails中设置angular度应用程序目录时出错。 只是为了确保我们覆盖了一切，这里是我正在使用的目录结构。 帆应用程序还没有任何东西。 这就是为什么下面的path只是angular度相关的工件和资产。

在资产文件夹中：

应用

│├──app.component.ts

│└──main.ts

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

在sails的视图文件夹我有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。

我遵循官方快速入门教程中的代码和目录结构准则。

Answer 1

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

因此，将这些节点模块放入一个资产文件夹中，然后您就可以拥有静态访问权限。

但是，你确定你想用Sails做这个吗？ 据我所知，Sails是一个完整的MVC框架，如果你只是想用它作为Angular的后端，你不会真的需要它。 我build议使用类似Express的东西来代替。

Answer 2

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

1 – 为了提供对node_modules的静态访问，我创build了一个快速中间件（可能也使用了这个策略？）：

（configuration/ 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 不再与angular 2捆绑在一起 。 因此，我不得不修改systemjsconfiguration一点来添加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

您可以使用文件夹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> 

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

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

希望它能帮助你，Thierry

Answer 4

（1）对于第一个问题：

没有find404angular文件的问题是，当Sails提升Grunt删除.tmp中的所有文件，然后从头重build项目，所以会发生什么是Sails服务器启动之前，构build完成，文件不在那里，这就是为什么你会得到如果你稍等一会儿，你的页面应该没有任何错误地加载。

如果等待时间过长，请使用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';