集成角2 Sails.js

Question

我想與角2集成帆，我也想加入這個項目打字稿我如何配置這個我是新爲申請

創建帆應用程式這樣，

sails new myApp 

我如何添加這個項目？

Answer 1

Thereis一個解決方案，它來源於此網址：http://sharpten.com/blog/2016/02/02/integrating-angular-2-with-sails-js.html

，因爲它askes NPM安裝的角度V2.0.0β2和打字稿的最新版本（目前爲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

所以在這裏我是如何做的：

首先，你必須在全球範圍內安裝打字稿：

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

注意，由於「開始」 LIGNE到「腳本」我們將開始 編譯器，服務器和帆服務器同時使用：

npm start 

安裝最新版本的依賴關係：

npm update --save 

然後將以下代碼添加到新的tsconfig.json文件中，該文件包含th用於Typescript的e配置，應放置在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環境與 功能和打字稿編譯器無法識別 本身的語法。我們教它有關這些功能與打字稿 類型定義文件 - 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作爲模板引擎，將其添加到您的佈局。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的靜態訪問條目。在配置的配置文件夾（配置/ 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 /中。

資產/應用/ 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啓動

在看看：本地主機：1337，你會看到我的第一角2應用

我希望你明白了一切。

阿利克斯