Использование Angular 1.x с TypeScript 1.5 и SystemJS

Question

Я пытаюсь использовать Angular 1.x с TypeScript 1.5.3 и SystemJS. Страница index.html настроена на System.import('bootstrapper'), что должно начаться.

bootstrapper.ts компилируется в bootstrapper.js и прекрасно работает до тех пор, пока он не использует угловые (т.е. делать только console.log() работает нормально)

Теперь я хотел бы импортировать и использовать угловые для начальной загрузки его. Я уже сделал jspm install angular, и я также установил некоторые тиски для угловых, используя tsd. Типизация указана в верхней части файла bootstrap.ts.

К сожалению, import angular from 'angular' не компилируется, я получаю Module "angular" has no default export. Мои вопросы:

1. Почему не import angular from 'angular' компилировать? Глядя в angular.d.ts файл я вижу declare module 'angular'{ export = angular; }, который, если я правильно понимаю, является экспорт по умолчанию из модуля углового переменной (определено выше в файле типизации) declare var angular: angular.IAngularStatic
2. Я заметил, что делать import 'angular' компилирует и тогда я могу на самом деле ссылки angular и, например, angular.module(...), но я не думаю, что правильно понимаю, как это работает. Должно ли import 'angular' сделать «голый импорт», т. Е. Запустить модуль только для его побочных эффектов? Если это так, означает ли это, что этот импорт фактически регистрирует angular в глобальной области?

Я уверен, что неправильно понимаю, как файлы определения типов модулей/типов работают в Typcript, заранее заблаговременно объяснение.

Answer 1

[...] если я правильно понимаю, экспорт по умолчанию из модуля угловой переменной

Нет, это не то, что происходит. Угловое экспортирует все пространство имен в качестве экспорта, если это имеет смысл.

import angular from 'angular' пытается импортировать default с модуля.

Что вы хотите, это import * as angular from 'angular';, который импортирует весь экспорт в виде переменной.

Answer 2

Во-первых, это мой предпочтительный способ использования AngularJS 1.5 с машинописи и SystemJS: index.html

<script src="jspm_packages/system.js"></script> 
<script src="config.js"></script> 

<script> 
    SystemJS.import('app') 
    .then(function (app) { 
     app.bootstrap(document); 
    }) 
    .catch(function (reason) { 
     console.error(reason); 
    }); 
</script> 

app/main.ts

import angular from 'angular'; 

const app = angular.module('app', []); 

export function bootstrap(target: Element | Document) { 
    angular.bootstrap(target, [app.name], { strictDi: true }); 
} 

tsconfig.json

{ 
    "compilerOptions": { 
     "module": "system", 
     "allowSyntheticDefaultImports": true, 
     .... 
    } 
} 

config.js (загрузчик конфигурации, упрощенный)

SystemJS.config({ 
    transpiler: "typescript", 
    packages: { 
    "app": { 
     main: "main.ts", 
     defaultExtension: "ts", 
     meta: { 
     "*.ts": {loader: "typescript"} 
     } 
    } 
    } 
}); 

Примечания:

1. Если вы используете JSPM 0.17 указать "plugin-typescript", не "typescript" для загрузчика и transpiler или просто запустить $ jspm init и выберите transpiler.
2. Вы можете импортировать угловое значение по умолчанию, но оно все равно будет регистрироваться в глобальном масштабе.
3. Причина, по которой вы получаете синтаксические ошибки, состоит в том, что angular, а файл декларации angular.d.ts содержит объявление типатипа CommonJS для использования в качестве модуля и глобального использования пространства имен. SystemJS, для максимальной совместимости, интерполирует это на экспорт по умолчанию во время выполнения.
4. Компилятор TypeScript должен быть осведомлен об этом. Это можно сделать, установив "module": "system" и/или указав "allowSyntheticDefaultImports": true. Я сделал это ради изложения и объяснения.