Angular AOT 组件中的相对路径

Posted 2023-02-19

【中文标题】Angular AOT 组件中的相对路径

【英文标题】：Angular AOT Relative paths in components

【发布时间】：2017-02-19 06:13:01

【问题描述】：

我在这里问是因为我在网上找不到完整的文档。 here 的例子太简单了。 我有一个包含多个组件和一些模块的应用程序。用ngc编译后，我有很多错误。我发现修复它们的方法是使用相对路径。 所以我在所有组件中都使用了 'moduleId: module.id,'。 但现在编译器告诉我： ' 找不到名称'模块' '

据我了解，这是因为我声明了以下 AoT 编译选项：

  "compilerOptions": 
    "target": "es5",
   ---> "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  ,

  "angularCompilerOptions": 
   "genDir": "aot",
   "skipMetadataEmit" : true
 

而不是使用 "module": "commonjs",。 我该如何解决这个问题？

如何在生成 AOT 构建的同时使用相对路径？

谢谢！

【问题讨论】：

如果你使用 webpack，你可以检查 angular2-template-loader。然后在您的组件元数据中像这样设置 - templateUrl: './yourtemplate.component.html'。 ngc还有很多麻烦:(

是否可以使用 webpack 创建一个包含整个应用程序（minfied）的 js 文件？这就是我正在寻找的......一个使用整个应用程序（js、html、css）创建一个文件的过程。

当然可以。看看这里 - angular.io/docs/ts/latest/guide/webpack.html

【参考方案1】：

一个快速（也可能是肮脏的）修复就是将路径直接写为 moduleId 参数中的字符串。

所以而不是：

moduleId: module.id

写：

moduleId: 'path/to/my/app/'

这可以在开发过程中与组件相对路径一起使用，并且在创建 AoT 包时，ngc 不会抱怨找不到 module.id。