角度2 AOT - 与第三方图书馆

Question

我在我的角度2应用程序中使用Highcharts和Kendo Charts，当我尝试运行AOT编译时，它会抛出错误，如

Cannot Import Module

或

HomeModule' is not exported by

或

Cannot Determine Module ..

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

如何创建它们？或者在哪里找到它们？或者如果任何第三方库没有这样的文件怎么办？

Answer 1

Per @angular issue comment:

  

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

     

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

如果您要使用的第三方依赖项不附带bundle update coffee-script-source个文件，您可以尝试自己使用metadata.json构建它，但这样做可能不简单。当ngc没有时，ngc可能会失败，可能是因为代码不是statically analyzable。

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步

将参考应用程序解压缩到名为“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 { }

步骤6a（可选）

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

npm run dev
npm run app

步骤6b

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

gulp module

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

npm publish

或者您可以将其保存在其他人可以访问和安装的共享文件夹中。

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

第1步

将参考应用程序的另一个副本下载到名为“App”的文件夹中。此应用程序将安装您之前创建的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步

瞧！