Question

我想要使用角度2积分帆，我也想添加这个项目打字稿我如何配置这个我是该领域的新手

我创建了这样的风帆应用，

sails new myApp

我如何添加我的项目？

Answer 1

有一个来自此网址的解决方案：http://sharpten.com/blog/2016/02/02/integrating-angular-2-with-sails-js.html

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

＆＃34; node_modules / angular2 / src / facade / promise.d.ts（1,10）：错误TS2661：无法重新导出模块中未定义的名称。＆＃34;

来源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": ""
}

请注意，感谢＆＃34; start＆＃34; ligne into＆＃34; scripts＆＃34;我们将开始使用以下命令编译器，服务器和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的入口脚本。但是，如果您尝试使用＆＃34; sails lift＆＃34;来启动服务器。您可能会注意到我们刚刚添加的脚本有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的快速访问。

以下是两个要编译的打字稿代码，将它们创建为新文件夹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 start

看看：localhost：1337，你应该看到My First Angular 2 App

我希望你能理解一切。

阿利克斯

将Angular 2与Sails.js集成

1 个答案: