angular - AOT 编译器生成错误的导入

Question

我有一个多应用程序 Angular-CLI 项目，其中有一些代码库共享。

基本上，结构如下所示:

• src - 主应用程序
  • app.component - 引导组件
  • app.module
  • 共享 - 共享应用程序部分
    • 演示.组件
    • 共享模块
• 扩展 - 第二个应用程序应该扩展主应用程序
  • extension-app.component - 引导组件
  • 扩展模块

SharedModule(声明并导出 DemoComponent)由 AppModule 和 ExtensionModule 导入。然后将 DemoComponent 添加到 AppComponent 和 ExtensionAppComponent 的模板中。

使用 JIT 编译器(ngserve、ngserve --app extension)时一切正常，但 AOT 编译器失败并提示:

无法解析“../../../src/app/demo/demo.component.ngfactory”

查看 GENDIR/app/demo/demo.component.ngfactory 生成的文件，我们得到以下结果:

import * as i0 from './demo.component.css.shim.ngstyle';
import * as i1 from '@angular/core';
import * as i2 from './demo.component';

最后一次导入失败，因为 GENDIR/app/demo 文件夹中没有“demo.component”。令人惊讶的是，作为 i0 导入的文件确实存在并且包含适当的样式。

更新:看起来问题出在 ngc 中。即使您在 tsconfig.json 中添加 paths 别名，它也不起作用。 github 上有几个关于它的问题 ( https://github.com/angular/angular/issues/13487 )

Answer 1

我今天遇到了类似的问题，我可以通过将我的 tsconfig.app.json 文件移动到我想要使用的所有代码的祖先目录中来解决它。然后，我修改了 tsconfig.app.json 中的 include 数组，以仅包含辅助应用程序。

注意:我使用配置为构建多个应用程序的单个.angular-cli.json。如果您有多种配置，您的里程可能会有所不同

对于您的示例，您可以尝试以下结构:

• <父目录>
  • src(主应用程序)
    • app.component - 引导组件
    • app.module
    • 共享 - 共享应用程序部分
      • 演示.组件
      • 共享模块
  • 扩展 - 第二个应用程序应该扩展主应用程序
    • extension-app.component - 引导组件
    • 扩展模块
  • tsconfig.extension.json - 扩展应用程序的特定于应用程序的 tsconfig 文件

在您的 tsconfig.extension.json 文件中，添加包含部分:

...
"include": [
    "./extension/**/*"
]
...

假设您在 .angular-cli.json 文件中声明了每个应用程序，您还需要更新扩展应用程序的 "tsconfig" 属性:

"name": "extension",
// Other configuration...
"tsconfig": <insert path to tsconfig based on "root" here>

读者请注意 这种结构是一种 hack，并且没有得到官方支持。如果 future 的更新导致它自行崩溃，请不要感到惊讶!

致力于:

• 节点:v8.4.0
• npm:5.4.2
• @angular/cli:1.4.2