将 Sails Js 与 Angular 2 集成

Posted 2023-03-07

【中文标题】将 Sails Js 与 Angular 2 集成

【英文标题】：Integrating Sails Js with Angular 2

【发布时间】：2016-05-09 23:13:44

【问题描述】：

我正在尝试将 Angular 2 集成到 Sails Js 应用程序中。我都是新手。我一直在这里关注this官方教程。它在带有静态 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，我无法弄清楚。请参阅下面的控制台屏幕截图。

我想我在 Sails 中设置 Angular 应用程序目录可能会出错。只是为了确保我们涵盖了所有内容，这是我正在使用的目录结构。 Sails 应用程序中还没有任何内容。这就是为什么以下路径仅适用于与角度相关的工件和资产。

在资产文件夹中：

应用程序

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

我已遵循 official 快速入门教程中的代码和目录结构指南。

【参考方案1】：

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

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

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

【讨论】：

我想过，但我不想在里面移动模块，这太费力了，而且不是最好的维护方式，你不觉得吗？

恐怕，这是我知道的唯一方法。 Angular 是一个客户端框架，需要访问这些模块。使用 express，您可以授予对任何目录的访问权限。

是否有某种风帆政策可以让我访问？说类似“如果路由以段'node_modules'不路由开始”？

据我所知，文档没有提到这一点。但是，可能有一种方法可以使用一些自定义中间件。

选择 ejs 或 angular 的主要问题是，如果你想创建你的 html 服务器端或客户端。因此，服务器端模板引擎（ejs、jade、handlebars、mustachej ......）很好很酷，但是如果您决定要将 JSON 从服务器发送到客户端并在客户端呈现这些数据，那么您必须选择angular 或其他一些客户端 js 库

【参考方案2】：

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

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 是no longer bundled with angular 2。因此，我不得不稍微修改 systemjs 配置以添加 rxjs 的映射，如下所示：

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

【参考方案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>

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

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

希望对你有帮助 蒂埃里

【讨论】：

好吧，我已经试过了，又试了一次，但给了我 404 : ""NetworkError: 404 Not Found - "localhost:1337/node_modules/angular2/bundles/…"

我还没有添加任何服务器端路由，只是为了说清楚

根据您的问题，我看到您尝试过node_modules/angular2/dist/... 而不是node_modules/angular2/bundles/...。没有？

没关系，因为它需要在资产文件夹中。

查看我的其他答案。

【参考方案4】：

(1)对于第一个问题：

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

(2) 第二个问题： 像这样在单独的控制台窗口中运行 tsc：

npm run tsc:w

(3) 第三个问题，在需要的组件中添加以下内容：

import 'rxjs/add/operator/map';