angular 2 AOT-具有第三方库

我在angular 2应用程序中使用Highcharts和剑道图，当我尝试运行AOT编译时，它会抛出如下错误

Cannot Import Module

或

或

我知道我应该为所有第三方文件导入.metadata.json文件

如何创建它们？或者在哪里找到它们？或者，如果任何第三方库都没有此类文件，该怎么办？

所有引用的第三方库必须包含.metadata.json 将它们生成的任何.d.ts文件归档，否则它们不会 正确使用ngc。.metadata.json文件包含 我们需要的信息在原始的.ts文件中，但没有 包含在.d.ts文件中。如果我们没有这些信息，我们 无法生成库的工厂

.metadata.json文件由ngc自动生成。他们 应由图书馆供应商建造和交付，并要求 .ts文件

---

如果要使用的第三方依赖项没有随

metadata.json

文件一起提供，您可以尝试自己使用

ngc

构建它，但这样做可能并不简单<代码>ngc可能会在

tsc

失败时出错，可能是因为代码不是。

剑道图和海图是常规的JS库-不是编译为JavaScript的TypeScript库-metadata.json文件在这里不适用

这些库应该按原样工作（我已经运行了一个测试并确认它可以工作）。我相信你遇到的问题可能与你的体型有关

对于大多数JS库，如果类型定义文件（.d.ts）可用，则需要安装它们：

npm install @types/highcharts

如果它们不存在（或版本不正确），则可以将变量声明为

any

：

declare var Highcharts:any;

示范（证据） 如果您想做一个简单的测试来证明它是有效的，请下载以下参考应用程序：

使用Highcharts创建可重用模块 第一步 将引用应用程序解压到一个名为“features”的文件夹中（这将是模块的名称）

步骤2 安装Highcharts软件包

npm install highcharts --save

步骤3 为模块命名

功能

，并为其提供初始版本号：1.0.0

package.json

name: 'features',
version: '1.0.0'

步骤4 创建将包含图表的可重用组件。让我们保持简单

图表.组件.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]
            }]
        });
    }
}

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 { }

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 { }

确保为图表容器呈现DIV

chart.component.html

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

<chart></chart>

步骤6a（可选） 如果您想在此阶段测试组件，请在

app.component.html

中包含

标记，并在开发和生产（aot）模式下构建它

步骤6b 构建并部署

功能

模块。如果您计划使用JIT和模块加载器，则在

dist

文件夹中创建UMD、CJS和AMD模块；如果您计划在没有模块加载器的情况下使用AOT，则在

dist\src

文件夹中构建必要的JS和.metadata文件

gulp module

功能

模块现在可以发布到

npm

：

npm publish

或者您可以将其保留在共享文件夹中，其他人可以在其中访问和安装它

创建将安装功能模块的应用程序 第一步 将参考应用程序的另一个副本下载到名为“App”的文件夹中。此应用程序将安装您先前创建的

功能

模块

步骤2 从

npm

npm install 'features'

或者从共享文件夹安装

功能

模块

npm install '../features';

步骤3 导入

功能

模块

应用程序模块.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]
            }]
        });
    }
}

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 { }

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

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

<chart></chart>

步骤6 瞧

---

该语句与TS文件相关，因此是正确的。然而，许多第三方库是作为常规JS文件构建的，它们只需包含脚本即可工作。剑道图和海图是常规JS库。