AoT 编译 module.id 错误 Angular 2？

Question

我想为我的 Angular 2 项目进行 AoT 编译。

我已将我的应用程序分隔到 js 目录中，我生成的所有 .js 文件都在该目录中，以及一个 app 目录中，我将我的 .ts、.html 和 .css 文件放在一起。

对于 AoT 编译，我使用 tsconfig.aot.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "es2015", "dom"],
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true,
    "outDir": "js",
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules"
    ],
    "types": [
    ]
  },
  "files": [
    "app/main.ts"
  ],
  "exclude": [
    "node_modules",
    "js",
    "app"
  ],
  "compileOnSave": false
}

和脚本："ngc": "ngc -p tsconfig.aot.json && npm run copy \"app/*\" \"compiled\" "

目前我有这样的组件：

 @Component({
    selector: 'fs-mainbar',
    templateUrl: 'app/mainbar/mainbar.component.html'
 })
export class MainbarComponent {

但是当我尝试运行脚本时，它给了我这个错误：

> angular-quickstart@1.0.0 ngc C:\dev_escal\project\escal\ui\src\main\webapp
> ngc -p tsconfig.aot.json && npm run copy "app/*" "compiled"

Error: Compilation failed. Resource file not found: C:/dev_escal/project/escal/ui/src/main/webapp/app/mainbar/app/mainbar/mainbar.component.html
    at ModuleResolutionHostAdapter.readResource (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler-cli\src\compiler_host.js:291:19)
    at CompilerHost.loadResource (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler-cli\src\compiler_host.js:230:85)
    at Object.get (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler\bundles\compiler.umd.js:26374:111)
    at DirectiveNormalizer._fetch (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler\bundles\compiler.umd.js:13753:47)
    at DirectiveNormalizer.normalizeTemplateAsync (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler\bundles\compiler.umd.js:13799:25)
    at DirectiveNormalizer.normalizeTemplate (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler\bundles\compiler.umd.js:13771:48)
    at CompileMetadataResolver._loadDirectiveMetadata (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler\bundles\compiler.umd.js:18074:79)
    at C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler\bundles\compiler.umd.js:18250:58
    at Array.forEach (native)
    at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (C:\dev_escal\project\escal\ui\src\main\webapp\node_modules\@angular\compiler\bundles\compiler.umd
.js:18249:45)
Compilation failed

好吧，我应该使用module.id，但是因为我已将我的应用程序分成js 和app 文件夹，所以我必须像这样使用它：

 @Component({
     moduleId: module.id.replace("/js/", "/app/"),
     selector: 'escl-mainbar',
     templateUrl: './mainbar.component.html'
 })
export class MainbarComponent {

这怎么会给我这个错误：

> angular-quickstart@1.0.0 ngc C:\dev_escal\project\escal\ui\src\main\webapp
> ngc -p tsconfig.aot.json && npm run copy "app/*" "compiled"

Error encountered resolving symbol values statically. Calling function 'module', function calls are not supported. Consider replacing the function or lambda with a re
ference to an exported function, resolving symbol MainbarComponent in C:/dev_escal/project/escal/ui/src/main/webapp/app/mainbar/mainbar.component.ts, resolving symbol
 MainbarComponent in C:/dev_escal/project/escal/ui/src/main/webapp/app/mainbar/mainbar.component.ts

所以从这里开始我几乎被困住了。我怎样才能解决这个问题？欢迎任何帮助:)

github 上的问题：

https://github.com/angular/angular/issues/14374

Answer 1

试试这个：

 export function moduleId() {
     return module.id.replace("/js/", "/app/");
 }

 @Component({
     moduleId: moduleId(),
     selector: 'escl-mainbar',
     templateUrl: './mainbar.component.html'
 })
export class MainbarComponent { }

类似问题：Angular2 AoT Compiler Errors

有关 AOT 编译及其相对于 JIT 编译的优势的更多信息，请访问：Ahead-of-time (AOT) vs Just-in-time (JIT)