将Sails Js与Angular 2集成 [英] Integrating Sails Js with Angular 2
问题描述
我正在尝试将Angular 2集成到Sails Js应用程序中。我是两个人的新手。我一直在这里关注
I我想我可能在设置sails中的角度应用程序目录时犯了一个错误。为了确保我们涵盖所有内容，这里是我正在使用的目录结构。帆应用程序还没有任何内容。这就是为什么以下路径仅适用于与角度相关的工件和资产。
在资产文件夹中：
app
│├──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 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>正在加载...< / my-app>
除上述文件外，我还在sails根文件夹中添加了tsconfig。
我已遵循官方快速入门教程。
所以，对于任何有兴趣的人，我已经解决了这样的问题：
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是不再与angular 2捆绑在一起。因此，我不得不修改systemjs配置以添加rxjs的映射，如下所示：
（views / layout.ejs）
System.config（{
map：{
rxjs：'node_modules / rxjs'//添加了这个地图部分
}，
包裹：{
app：{
格式：'注册'，
defaultExtension：'js'
}，
'rxjs'：{defaultExtension：'js'} //并将其添加到包
}
}）;
System.import（'/ app / main'）
.then（null，console.error.bind（console））;
I'm trying to integrate Angular 2 in a Sails Js application. I'm new to both. I have been following this official tutorial here. It works fine in standalone mode with a static http server but when i try to integrate into sails app i get following problems:
1 - How do i refer to angular2 js inside the local node_modules folder. Everytime i do, sails interprets it as a route and gives me a 404 for my scripts. For instance:
<script src="node_modules/angular2/dist/angular2.min.js"></script>
I was able to overcome above issue using cdnjs links for now but i would like to know a better/proper solution.
2 - I added the tsc and tsc -w scripts to my package.json, but even with sails lift --verbose i do not get any output or error. Here is how I added the script to json file:
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"debug": "node debug app.js",
"start": "node app.js"
}
In the end i had to install typescript with -g and compile manually. That worked, but again, it's expected to work with the scripts. It would be great to know what I'm missing.
3 - After jumping through hoops to get rid of the above errors, when i lift the server again, it gives me more 404 error which seem to be coming from system.src.js and that I am unable to figure out. Please see the console screengrab below.
I think I might be making a mistake setting up the angular application directories within sails. Just to make sure we cover everything, here is the directory structure I'm using. The sails app does not have anything in it yet. Which is why the below paths are just for angular related artifacts and assets.
Within the assets folder:
app
│ ├── app.component.ts
│ └── main.ts
Of course the .ts files get compiled to js.
In the sails views folder I have layout.ejs which has following contents:
.
.
.
<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>
In addition to above files, I have also added the tsconfig in the sails root folder.
I have followed the code and directory structure guidelines from the official quickstart tutorial.
So, for anyone interested, i have resolved the issues like so:
1 - For providing static access to node_modules i created an express middleware (probably use policies for this as well?):
(config/express.js)
var express = require('express');
module.exports.http = {
customMiddleware: function (app) {
app.use('/node_modules', express.static(process.cwd() + '/node_modules'));
}
};
2 - I was able to compile already so all good there
3 - For the rxjs related errors, i did some research and found out that rxjs is no longer bundled with angular 2. Therefor, i had to modify the systemjs config a bit to add mapping for rxjs, like so:
(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));
这篇关于将Sails Js与Angular 2集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
