如何发布在AoT angular2应用程序中使用的包

时间:2016-12-05 10:11:49

标签: angular tsconfig angular2-aot

我有一个用angular2打字稿编写的代码,这是一个用服务和组件导出的模块



<p>
  Schedule: 
  <%= for {key, value} <- @schedule do %>
    ...use key and value variables here...
  <% end %>
</p>
&#13;
&#13;
&#13;

我想在不同的angular2应用程序中使用这个MyModule,所以我用这个tsconfig和脚本发布了它

&#13;
&#13;
@NgModule({
    declarations:[
        ...DECLARATIONS
    ],
    imports: [
        CommonModule,
        ChartModule
    ],
    exports:[
        ...DECLARATIONS,
        CommonModule,
        ChartModule
    ],
    providers:[
        AlertErrorHandleService
        , AuthenticationModelService
        , AuthConnectionBackend
    ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class MyModule {
    static forRoot():ModuleWithProviders {
        return {
            ngModule: StmsModule,
            providers: [AlertErrorHandleService
                , AuthenticationModelService
                , AuthConnectionBackend
            ]
        };
    }
}
&#13;
&#13;
&#13;

packages.json

&#13;
&#13;
{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "removeComments": true,
    "module": "es2015",
    "target": "es5",
    "moduleResolution": "node",
    "sourceMap": true,
    "declaration": true,
    "noImplicitAny": false,
    "experimentalDecorators": true,
    "lib": ["dom", "es2015"],
    "outDir": "dist",
    "types": [
      "node"
    ]
  },
  "exclude": [
    "node_modules",
    "dist",
    "scripts"
  ],
  "angularCompilerOptions": {
    "genDir": "aot"
  }
}
&#13;
&#13;
&#13;

在使用来自angular2 seed的种子创建的其他angular2应用程序中我已经安装了该软件包,试图使用它全部工作,因为我在AOT中运行应用程序但在AoT中它有错误

  

错误:意外的值&#39; MyModule&#39;模块导入&#39; AboutModule&#39;

我有几个问题:

  1. 我应该如何发布包/内部的不同内容 tsconfig&#34; module&#34; = es2015 / systemjs / commonjs
  2. 是模块 publishe类型与包的使用方式有关 在angular2内 - 即,如果我使用systemjs发布我可以这个包 在angular2 AoT应用程序?
  3. 有什么样的最佳实践如何 发布angular2共享模块并在diff应用程序中使用它?

2 个答案:

答案 0 :(得分:0)

恕我直言,采用AoT还为时尚早。我只是在我的项目中尝试过。我认为AoT的工具还没有准备好。

但是,我认为我已经在我的项目中发挥了作用。您可以使用相同的设置让您的工作。

这是ngx-clipboard

的github

这个项目实际上非常小,但它展示了如何使用第三方库(纯javascript)与角度和AoT兼容。

有很多事情可以扰乱AoT的构建。

Webpack,ngTool,angular,Typescript。我建议你尝试使用我先用过的完全相同的版本。

1.使用es2015,因为AoT不接受“要求”

https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#rollup

  1. 我认为这取决于。但如果你想让你的包AoT兼容,我认为你最好使用es2015。

  2. 我还没找到。

    但我发现这个post很有用。

答案 1 :(得分:0)

我恳求无知实际问题,但是从我刚刚阅读的博客文章中识别出错误信息的原因不同。

这似乎与需要在npm包中包含* .metadata.json文件有关。

https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad#.p7i6p63e8