AoT compilation module.id error Angular 2?

Question

I want to the AoT compilation for my angular 2 project.

I have separated my application into js directory where all my generated .js files are and an app directory where I keep my .ts, .html and .css files together.

For the AoT compilation I use the 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
}

and the script: "ngc": "ngc -p tsconfig.aot.json && npm run copy \"app/*\" \"compiled\" "

Currently I have my com,ponents like this:

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

But when I try to run the script it gives me this error:

> 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

So ok I should use module.id, but because I have seprated my app into js and app folders I have to use it like this:

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

This how ever gives me this error:

> 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

So I'm pretty much stuck from here on. How can I fix this? Any help is welcomed :)

issue on github:

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

Answer 1

Try this:

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

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

Similar issue: Angular2 AoT Compiler Errors

For more information about AOT compilation, and its advantages over JIT compilation visit: Ahead-of-time (AOT) vs Just-in-time (JIT)