将 Angular 2 与 Sails.js 集成

Question

我想将风帆与角度 2 集成，我还想添加这个项目打字稿我如何配置这个我是该文件的新手

我创建这样的帆应用程序，

sails new myApp

我如何将这个添加到我的项目中？

Answer 1

此 URL 提供了一种解决方案：http://sharpten.com/blog/2016/02/02/integrating-angular-2-with-sails-js.html

本教程不再适用，因为它要求 npm 安装 angular 的 v2.0.0 beta2 和最新版本的 Typescript（当前为 1.8）。但是，TS 1.8 需要使用 angular2 beta7 或更高版本（但较低版本与 TS 1.7.5 完美配合），这就是您收到此错误消息的原因：

“node_modules/angular2/src/facade/promise.d.ts(1,10): 错误 TS2661: 无法重新导出未在模块中定义的名称。”

来源 1：https://github.com/angular/angular/issues/6795

来源 2：https://github.com/angular/angular/issues/6468

那么我是怎么做到的：

首先你必须全局安装 Typescript：

npm install -g typescript

然后在你的 package.json 中添加依赖，这是你应该有的：

{
  "name": "test",
  "private": true,
  "version": "0.0.0",
  "description": "a Sails application",
  "keywords": [],
  "dependencies": {
    "ejs": "2.3.4",
    "grunt": "0.4.5",
    "grunt-contrib-clean": "0.6.0",
    "grunt-contrib-coffee": "0.13.0",
    "grunt-contrib-concat": "0.5.1",
    "grunt-contrib-copy": "0.5.0",
    "grunt-contrib-cssmin": "0.9.0",
    "grunt-contrib-jst": "0.6.0",
    "grunt-contrib-less": "1.1.0",
    "grunt-contrib-uglify": "0.7.0",
    "grunt-contrib-watch": "0.5.3",
    "grunt-sails-linker": "~0.10.1",
    "grunt-sync": "0.2.4",
    "include-all": "~0.1.6",
    "rc": "1.0.1",
    "sails": "~0.12.1",
    "sails-disk": "~0.10.9",
    "angular2": "2.0.0-beta.9",
    "systemjs": "0.19.24",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.8.7",
    "typings":"^0.7.5"
  },
  "scripts": {
    "debug": "node debug app.js",
    "start": "concurrently  \"npm run tsc:w\" \"npm run lite\" \"node app.js\" ",
    "tsc": "tsc",
   "tsc:w": "tsc -w",
   "lite": "lite-server",
   "typings": "typings",
   "postinstall": "typings install"
  },
  "main": "app.js",
  "repository": {
    "type": "git",
    "url": "git://github.com/root/pietate.git"
  },
  "author": "root",
  "license": ""
}

请注意，由于“开始”进入“脚本”，我们将开始 编译器、服务器和sails服务器一次使用：

npm start

安装最新版本的依赖：

npm update --save

然后将以下代码添加到一个新的 tsconfig.json 文件中，该文件包含 Typescript 的配置，应该放在你的sails 应用程序根目录中。

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

根据 angular.io ：

许多 JavaScript 库都扩展了 JavaScript 环境 TypeScript 编译器无法识别的功能和语法 本地人。我们用 TypeScript 类型教它这些功能 定义文件——d.ts 文件——我们在 typings.json 中标识 文件

所以我们需要在我们的应用根目录中添加一个 typings.json 文件：

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c",
    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#d594ef506d1efe2fea15f8f39099d19b39436b71"
  }
}

现在，假设您使用 EJS 作为模板引擎，将其添加到您的 layout.ejs 中：

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>

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

上面的代码加载了 Angular 2 和 ES6 模块。 /app/main.ts 尚未创建（我们稍后会创建），它是 Angular 2 的入口脚本。但是，如果您尝试使用“sails lift”启动服务器，您可能会注意到 404 错误我们刚刚添加的脚本。

默认情况下，sails 没有对文件夹 /node_modules 的静态访问条目。将此添加到配置文件夹 (config/express.js) 中的新文件 express.js：

var express = require('express');
module.exports.http = {
customMiddleware: function (app) {
    app.use('/node_modules', express.static(process.cwd() + '/node_modules'));
   }
};

这个 express.js 文件作为一个中间件提供对 /node_modules 的快速访问。

这里有两个将被编译的 Typescript 代码，将它们创建到一个新的文件夹 assets/app/ 中。

assets/app/main.ts：

/// <reference path="../../node_modules/typescript/lib/lib.es6.d.ts" />

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

我们使用引用是因为我们从编译中排除了 /node_modules。

assets/app/app.components.ts :

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

现在你可以使用了：

npm 开始

看看：localhost:1337，你应该会看到一个 My First Angular 2 App

我希望你明白一切。

阿利克斯