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

时间:2016-12-14 16:11:20

标签: angular aot

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

Cannot Import Module

HomeModule' is not exported by

Cannot Determine Module ..

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

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

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分: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步

瞧!

enter image description here