Angular2, SystemJS пути для компонентов bower

Я создал пример приложения Angular2, где один из моих модулей использует внешнюю библиотеку (rest), например: 

/// <reference path="../../typings/tsd.d.ts" />
import rest = require('rest');
import jsonpClient = require('rest/client/jsonp');
import mime = require('rest/interceptor/mime');
...

Я использовал 

tsd install rest

Которые разместили остальные.d. ts в справочнике "typings", и использовали 

bower install rest

Чтобы получить версию среды выполнения (это нигде не объяснялось. Я предполагаю, что должен сделать что-то подобное? )

Я создал мой сценарий залпом, чтобы скопировать две папки из bower_components ("отдых" и его зависимостей "когда") в dist / lib

Само приложение прекрасно компилируется, но в браузере оно не может разрешить зависимости модулей rest/when.

Я добавил 

 System.config({
      "baseURL": "/",
      "transpiler": "traceur",
      "paths": {
        "components/*": "components/*.js",
        "provider/*": "provider/*.js",
        "services/*": "services/*.js",
        "model/*": "model/*.js",
        "rest": "lib/rest/rest.js",
        "rest/*": "lib/rest/*.js",
        "when": "lib/when/when.js",
        "when/*": "lib/when/*.js",
        "*": "lib/*.js"
      }
    });

К моему указателю.html-файл, и я, вероятно, мог бы продолжать добавлять файлы в этот список, но почему-то это ощущается ... неправильный.

Конечно, это не может быть правильно, что я должен перечислить внутреннюю файловую структуру каждого пакета в моем индексе.HTML-код? Я вижу, что модуль " когда "предполагает найти свои собственные зависимости в"./ lib", где " отдыхают" имеет совершенно иную структуру.

Итак, мои вопросы таковы:

  • Что я неправильно понял в том, как импортировать пакеты javascript, управляемые через bower (или npm), в клиентскую часть Angular2?

  • Мне действительно нужно перечислить каждый файл каждого модуля в системе.пути, чтобы заставить его работать?

1 6
systemjs

1 ответ:

TSD устарел пожалуйста, используйте typings для установки файлов объявлений (.д.ТС). Файлы объявлений, если они установлены правильно,можно найти в каталоге typings. Файл объявления описывает форму внешней библиотеки JavaScript. Они в первую очередь помогают вам во время разработки (завершение кода, проверка типа и т. д.). Вам не нужно импортировать их в свой машинописный текст. Их можно исключить из процесса компиляции typescript с помощью параметра exclude в tsconfig.файл json. Вам не нужно включать внешние библиотеки javascript в свою систему.config, просто сделайте ссылку на скрипт в своем индексе.формат html. Вы можете сопоставить модули typescript, такие как angular2 в вашей системе.настройте другие URL-адреса и объявите свое собственное приложение typescript как пакет. Итак:

  • .D. ts файлы для внешних библиотек javascript в основном файлы времени разработки.
  • модули typescript могут быть сопоставлены с вашими собственными URL-адресами
  • определите ваше собственное приложение typescript как пакет.
  • Нет, вы делаете не нужно постоянно добавлять файлы в вашу систему.конфиг.

Пример tsconfig.json: 

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
  },

  "exclude": [
    "node_modules",
    "wwwroot",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Пример Системы.конфиг с приложением в wwwroot / cool / app: 

System.config({
    defaultJSExtensions: true,
    packages: {
        'cool/app': {
            format: 'register',
            defaultExtension: 'js'
        },
    },

    map: {
        'rxjs': 'assets/scripts/rxjs',
        'angular2': 'assets/scripts/angular2'
    }
});
2