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

问题描述

我在 ng2 应用程序之间共享模块时遇到问题.这是一个非常简单的场景来演示这个问题.一直使用angular-cli:

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

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

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

MyApp|────angular-cli.json|────package.json|└──源└─应用程序|────app.module.ts|────app-root.component.ts└─共享模块|────angular-cli.json|────package.json|└─src└─应用程序|────app-root.component.ts|────custom-input.component.ts|────shared.module.ts└─

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

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

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

这里的百万美元问题是我如何才能使这项工作发挥作用?谢谢.

解决方案

我认为问题在于 Angular CLI 现在使用 AoT 编译为默认值.

既然如此，您要导入的 SharedModule 需要能够进行静态分析，以便它可以与您的 MyApp 一起构建.

当您使用 CLI 创建应用程序时，它并不期望您将其用作共享库，因此，不包括 AoT 编译器所需的 *.metadata.json 文件需要分析一下.

我可以进一步解释它，但是在 Medium 上有一篇关于它的很棒的文章，我在那里了解到了这一点:

获取您的 Angular2 图书馆为 AoT 做好准备

希望对你也有帮助.

还有几个 Angular 2 库在 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:

• 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:

  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
    └─

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.

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

• 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.

解决方案

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

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.

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.

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

Getting your Angular 2 Library ready for AoT

Hope it helps you too.

EDIT:

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:

Tag-Input

Clarity

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