ngc error when adding NgFor directive in template.

[enanox]

Hi, I am facing a tough issue trying a few things for AoT. When I try to add an *ngFor reference in a template with its corresponding metadata (importing CommonModule in the MainModule and so) and running npm run start or start-prod, the compilation step throws: ERROR in [at-loader] TS6059: File 'C:/Users/mathiasr/Documents/angular2-aot-webpack/node_modules/@angular/common/src/directives/ng_for.ngfactory.ts' is not under 'rootDir' 'C:/Users/mathiasr/Documents/angular2-aot-webpack/src/app'. 'rootDir' is expected to contain all source files.

hello-world.template.html

<h1>Hello World!</h1>
<div *ngFor="let i of [1, 2, 3, 4]">
    <h2>{{ i }}</h2>
</div>

main.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from "@angular/common";
import { HelloWorldComponent } from '../components/hello-world.component';

export { HelloWorldComponent };

@NgModule({
  bootstrap: [HelloWorldComponent],
  declarations: [HelloWorldComponent],
  imports: [BrowserModule, CommonModule],
  providers: []
})
export class MainModule {}

I've been trying a few things and came across a workaround, which I am not sure if it's something to patch with TypeScript config, ngc or at-loader.

1. Adding a symlink to the "offender"

I tried to add a symlink to the missing file (which ngc crawls in node_modules to generate) with ln ../../node_modules/@angular/common/src/directives/ng_for.ngfactory.ts below the rootDir (I mean, src/app) to no avail. This was using the same scenario described above.

2. Remove reference to CommonModule and import the ngc generated Wrapper_NgFor from HelloWorldComponent

Pretty much the same, it isn't able to import the directive.

3. Workaround: discard compilerOptions.rootDir over files

This is the verbose option and the strangest working one. If I remove the compilerOptions.rootDir property from tsconfig.json and add each ts file in the files array, as in

"files":[
    "src/app/components/hello-world.component.ts",
    "src/app/modules/main.module.ts",
    "src/app/main.aot.ts",
    "src/app/main.jit.ts",
    "src/app/polyfill.ts"
  ]

Even more, if I remove the references to the CommonModule, it works as well. I believe it has to do with the fact that the references in node_modules are never excluded from the compilation step, but I'm not sure.

Hope this helps, I'm X-posting this issue to at-loader to see if there's something to do on their end. Please let me know if you need further information.

[sonicoder86]

Is it still an issue with latest updates?

[justingrant]

All - not sure if the problem I was running into matches the problem reported here, but I was able to share typescript code among multiple projects with awesome-typescript-loader and webpack. This issue was one of the resources that I ran across in Google who were having a similar problem.

Anyway, see my Stack Overflow Q&A for more details: https://stackoverflow.com/questions/52487112/sharing-code-between-projects-using-typescript-and-webpack