Интеграция Угловые 2 с Sails.js

Question

Я хочу, чтобы интегрировать паруса с угловыми 2, и я хочу, чтобы добавить этот проект машинописные Как настроить это я новичок для этого подал

Я создаю приложение парусов, как это,

sails new myApp 

Как я могу добавить этот проект?

Answer 1

Thereis одно решение, которое приходит из этого URL: http://sharpten.com/blog/2016/02/02/integrating-angular-2-with-sails-js.html

Это руководство больше не работает, так как он askes НПМ установить v2.0.0 beta2 угловых и самую последнюю версию машинопись (в настоящее время 1.8). Тем не менее, TS 1.8 требует использования angular2 beta7 или выше (но нижняя версия отлично работает с TS 1.7.5), поэтому у вас есть это сообщение об ошибке:

«node_modules/angular2/src/facade/prom.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 

Затем добавить зависимостей в вашем пакете.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 

Установить Lastest версия зависимостей с:

npm update --save 

Затем добавьте следующий код в новый файл tsconfig.json, этот файл содержит й e для Typcript и должен быть помещен в корневой каталог вашего паруса.

{ 
    "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. Однако, если вы попытаетесь запустить сервер с «подъемом парусов», вы можете заметить 404 ошибки для которые мы только что добавили.

По умолчанию sails не имеет записи статического доступа к папке/node_modules. Добавьте это к новому express.js файлов в конфиге папки конфигурации (Config/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 { } 

Теперь вы можете использовать:

НПМ начать

Посмотрите на: локальный: 1337, вы должны увидеть мой первый Угловое 2 приложения

Я надеюсь, что вы поняли все.

Аликс