Angular 2-在不同的ng2应用之间共享模块 [英] Angular 2 - sharing a module between different ng2 apps

问题描述

我在ng2应用之间共享模块时遇到问题.这是一个非常简单的方案来演示该问题.一路使用angular-cli:

I am having an issue sharing a module between ng2 apps. Here is a very simple scenario to demonstrate the problem. Using angular-cli all the way:

• 有一个使用ng new SharedModule创建的SharedModule应用.
• 有一个使用ng new MyApp创建的MyApp应用.
• SharedModule应用程序中的模块导出一个自定义组件(我想在MyApp应用程序中使用).
• MyApp中的主模块从SharedModule应用程序导入该模块.
• 当尝试使用ng serve运行MyApp时，它因错误而消失:

• There's a SharedModule app, created with ng new SharedModule.
• There's a MyApp app, created with ng new MyApp.
• The module in SharedModule app exports a custom component (that I would like to use in MyApp app).
• The main module in MyApp imports the module from SharedModule app.
• When trying to run MyApp with ng serve, it blows with error:

在静态解析符号值时遇到错误.调用函数"makeDecorator"，不支持函数调用.考虑使用对导出函数的引用替换函数或lambda ...

Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function...

省略不重要的内容，非常基本的结构如下所示:

Omitting the not important stuff, the very basic structure looks like this:

MyApp
|────angular-cli.json
|────package.json
|
└──src
   └─app
     |────app.module.ts
     |────app-root.component.ts
     └─

SharedModule
|────angular-cli.json
|────package.json
|
└─src
  └─app
    |────app-root.component.ts
    |────custom-input.component.ts
    |────shared.module.ts
    └─

这里的关键是MyApp和SharedModule是两个不同的应用程序.如果我尝试将共享模块放入MyApp中(以及导出的自定义组件中)，那么它就可以正常工作.不幸的是，目前这不是一个选择，我必须将模块/应用程序分开.也不能从SharedModule创建一个npm程序包并将其安装到MyApp中.

The key point here is that MyApp and SharedModule are two different apps. If I try to put the shared module inside MyApp (along with the exported custom component), then it works just fine. Unfortunately, this is not an option at the moment and I have to keep the modules/apps separate. Also creating an npm package from SharedModule and installing it into MyApp is not an option.

我创建了一个 github存储库来演示此问题. 为了运行它:

I've created a github repository demonstrating the problem. In order to run it:

• 在MyApp和SharedModule文件夹中运行npm install.
• 在MyApp文件夹中运行npm start.

• run npm install in MyApp and SharedModule folders.
• run npm start in MyApp folder.

这里的百万美元问题是我该如何进行这项工作?谢谢.

The million dollar question here is how can I make this work? Thanks.

推荐答案

我要说的问题在于Angular CLI现在使用

I'd say the problem lies in the fact that Angular CLI now uses AoT Compile as default.

在这种情况下，您要导入的SharedModule必须能够进行静态分析，以便可以与MyApp一起构建.

That being the case, the SharedModule you are importing needs to be able to be statically analysed, so that it can be built alongside your MyApp.

使用CLI创建应用程序时，它并不希望将其用作共享库，因此不包含AoT编译器分析该文件所需的*.metadata.json文件.

When you create an app using the CLI, it is not expecting you to use it as a shared library, and as such, does not include the needed *.metadata.json files the AoT compiler needs to analyse it.

我可以进一步解释它，但是在Medium上有一篇很棒的文章，我从中学到了这一点:

I could explain it further, but theres a great article about it on Medium, where I learned about this:

获取角度2个库已准备好进行AoT

希望它对您也有帮助.

在更新CLI时，还有几个Angular 2库遇到了此问题.列举一些可能对您有帮助的问题:

There are also a couple Angular 2 Libraries that encountered this problem when the CLI was updated. To name a couple issues that might help you:

标记输入

清晰度

这篇关于Angular 2-在不同的ng2应用之间共享模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！