angular 2 AOT-带有第三方库

Question

我在我的angular 2应用程序中使用了Highcharts和Kendo Charts，当我尝试运行AOT编译时，会抛出诸如

Cannot Import Module

要么

HomeModule' is not exported by

要么

Cannot Determine Module ..

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

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

Answer 1

每个@角度问题评论：

所有引用的第三方库都必须在其生成的任何.d.ts文件旁边包含.metadata.json文件，否则它们将无法与ngc一起正常使用。 .metadata.json文件包含原始.ts文件中但未包含在.d.ts文件中的所需信息。 如果没有这些信息，就无法为图书馆生成工厂。

.metadata.json文件由ngc自动生成。 它们应由库供应商构建和交付，并需要.ts文件。

如果您要使用的第三方依赖项未随metadata.json文件一起提供，您可以尝试使用ngc自己构建它，但是这样做可能并不简单。 ngc可能会因为tsc失败而失败，并显示错误，可能是因为代码不是静态可分析的 。

Answer 2

Kendo图表和Highcharts是常规的JS库-不是编译为JavaScript的TypeScript库-metadata.json文件不适用于此处。

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

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

npm install @types/highcharts

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

declare var Highcharts:any;

示范（证明）

如果您想做一个简单的测试来证明它可以工作，请下载以下参考应用程序：

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

使用Highcharts创建可重用模块

第1步

将参考应用程序解压缩到名为“功能”的文件夹（这将是模块的名称）。

第2步

安装Highcharts程序包。

npm install highcharts --save

第三步

命名您的模块features并为其提供初始版本号：1.0.0

的package.json

name: 'features',
version: '1.0.0'

第四步

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

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

步骤6a（可选）

如果要在此阶段测试组件，请在app.component.html包含<chart>标记，并以DEV和PROD（aot）模式进行构建。

npm run dev
npm run app

步骤6b

构建和部署features模块。 如果您打算使用JIT和模块加载器，则会在dist文件夹中创建UMD，CJS和AMD模块；如果您计划在不使用模块加载器的情况下使用AOT，则会在dist\\src文件夹中构建必要的JS和.metadata文件。 。

gulp module

现在可以将features模块发布到npm ：

npm publish

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

创建将安装功能模块的应用

第1步

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

第2步

从npm安装features模块

npm install 'features'

或从共享文件夹安装features模块

npm install '../features';

第三步

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

第四步

将图表标签添加到app.component.html

app.component.html

<chart></chart>

第5步

使用AOT版本运行应用

npm run app

第6步

瞧！