angular 2 AOT - со сторонними библиотеками

За комментарий к проблеме @angular:

Все упомянутые сторонние библиотеки должны включать файл .metadata.json вместе с любыми файлами .d.ts, которые они создают, иначе они не будут корректно работать с ngc. Файл .metadata.json содержит необходимую нам информацию, которая была в исходном файле .ts, но не была включена в файл .d.ts. Если у нас нет этой информации, мы не сможем сгенерировать фабрики для библиотеки.

Файлы .metadata.json создаются автоматически ngc. Они должны быть собраны и доставлены поставщиком библиотеки, и для них требуются файлы .ts.

Если сторонняя зависимость, которую вы хотите использовать, не поставляется с metadata.json файлами, вы можете попробовать создать ее с помощью ngc самостоятельно, но это может оказаться непростым. ngc может завершиться ошибкой, когда tsc нет, возможно, из-за того, что код не статически анализируемый.

Диаграммы кендо и Highcharts — это обычные библиотеки JS, а не библиотека TypeScript, скомпилированная в JavaScript — файлы metadata.json здесь неприменимы.

Библиотеки должны работать как есть (я провел тест и подтвердил, что он работает). Я считаю, что проблема, с которой вы столкнулись, вероятно, связана с вашей сборкой.

Для большинства библиотек JS необходимо либо установить файл определения типа (.d.ts), если он доступен:

npm install @types/highcharts

Если они не существуют (или версия неверна), вы можете вместо этого объявить переменную как any:

declare var Highcharts:any;

Демонстрация (Доказательство)

Если вы хотите провести простой тест, чтобы показать, что он работает, загрузите следующее эталонное приложение:

https://github.com/pixelbits-mk/ng2-starter-app

Создайте повторно используемый модуль с Highcharts

Шаг 1

Разархивируйте эталонное приложение в папку с названием «features» (это будет название модуля).

Шаг 2

Установите пакет Highcharts.

npm install highcharts --save

Шаг 3

Назовите свой модуль features и дайте ему первоначальный номер версии: 1.0.0.

package.json

name: 'features',
version: '1.0.0'

Шаг 4

Создайте повторно используемый компонент, который будет содержать диаграмму. Давайте не будем усложнять.

chart.component.ts

import { Component, AfterViewInit } from '@angular/core';
declare var Highcharts: any;

@Component({
    moduleId: module.id,
    selector: 'chart',
    templateUrl: 'chart.component.html'
})
export class ChartComponent implements AfterViewInit {

    ngAfterViewInit() {
        var myChart = Highcharts.chart('container', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    }
}

Убедитесь, что вы визуализируете DIV для контейнера диаграммы.

chart.component.html

<div id="container" style="width:100%; height:400px;">
    test
</div>

Шаг 5

Экспортируйте ChartComponent из модуля.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ChartComponent } from './chart.component';

@NgModule({
    imports: [
        BrowserModule,
        HttpModule        
    ],
    exports: [ChartComponent],
    declarations: [ChartComponent],
    providers: [/* TODO: Providers go here */],
    bootstrap: [AppComponent],
})
export class AppModule { }

Шаг 6а (необязательно)

Если вы хотите протестировать компонент на этом этапе, включите тег <chart> в app.component.html и создайте его в режимах DEV и PROD (aot).

npm run dev
npm run app

Шаг 6б

Соберите и разверните модуль features. Это создает модули UMD, CJS и AMD в папке dist, если вы планируете использовать JIT и загрузчик модулей, или создает необходимые файлы JS и .metadata в папке dist\src, если вы планируете использовать AOT без загрузчика модулей.

gulp module

Модуль features теперь можно опубликовать в npm:

npm publish

Или вы можете оставить его в общей папке, где другие смогут получить к нему доступ и установить его.

Создание приложения, которое установит модуль функций

Шаг 1

Загрузите другую копию эталонного приложения в папку под названием «Приложение». Это приложение установит модуль features, который вы создали ранее.

Шаг 2

Установите модуль features от npm

npm install 'features'

Или установите модуль features из общей папки

npm install '../features';

Шаг 3

Импортируйте модуль features

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppModule as FeatureModule } from 'features';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        FeatureModule      
        ],
    declarations: [AppComponent],
    providers: [/* TODO: Providers go here */],
    bootstrap: [AppComponent],
})
export class AppModule { }

Шаг 4

Добавьте тег диаграммы в app.component.html

app.component.html

<chart></chart>

Шаг 5

Запустите приложение, используя сборку AOT

npm run app

Шаг 6

Вуаля!