AOT 编译器生成错误的导入

我有一个多应用程序angular-cli项目，其中包含一些代码库共享。

基本上，结构如下所示：

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

使用 JIT 编译器时一切正常(ng serve，ng serve --app extension(，但 AOT 编译器失败说：

Can't resolve '../../../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(

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

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

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

<父目录>
- src(主应用程序(
  - app.component- bootstrap component
  - app.module
  - 共享- 共享应用程序部件
    - 演示组件
    - 共享模块
- 扩展- 第二个应用程序应该扩展主应用程序
  - 扩展应用程序组件- 引导组件
  - 扩展模块
- 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>

读者当心这种结构是一种黑客，不受官方支持。如果将来的更新导致它自行崩溃，请不要感到惊讶！

致力于：

相关内容