集成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 – 我添加了tsctsc -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。

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

Solutions Collecting From Web of "集成Sails Js和Angular 2"

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

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

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

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

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

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

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