将Sails Js与Angular 2集成

Question

我正在尝试将Angular 2集成到Sails Js应用程序中.我是两个人的新手.我一直在这里关注这个官方教程.它在独立模式下使用静态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中的角度应用程序目录时犯了一个错误.为了确保我们涵盖所有内容,这里是我正在使用的目录结构.帆应用程序还没有任何内容.这就是为什么以下路径仅适用于角度相关的工件和资产.

在assets文件夹中:

应用

│├──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.

我已经遵循官方快速入门教程中的代码和目录结构指南.

Answer 1

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

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

但是,你确定要用Sails做这个吗？据我所知,Sails是一个全面的MVC框架,如果你只想将它用作Angular的后端,你就不会真正需要它.我推荐使用像Express这样的东西.

Answer 2

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

1 - 为了提供对node_modules的静态访问,我创建了一个快速中间件(可能也为此使用策略？):

(配置/ 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的映射,如下所示:

(视图/ 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));