AOT compiler generates wrong import

user_6899283 0
Viewed 944

I have a multi-app angular-cli project with some code base sharing.

Basically, the structure looks like following:

  • src - main application
    • app.component - bootstrapped component
    • app.module
    • shared - shared application parts
      • demo.component
      • shared.module
  • extension - second application supposed to extend the main one
    • extension-app.component - bootstrapped component
    • extension.module

SharedModule (which declares and exports the DemoComponent) is imported by both AppModule and ExtensionModule. DemoComponent is then added to templates of both AppComponent and ExtensionAppComponent.

Everything is working just fine when using JIT compiler (ng serve, ng serve --app extension), but AOT compiler fails saying:

Can't resolve '../../../src/app/demo/demo.component.ngfactory'

Looking into this generated file at GENDIR/app/demo/demo.component.ngfactory we get the following:

import * as i0 from './demo.component.css.shim.ngstyle';
import * as i1 from '@angular/core';
import * as i2 from './demo.component';

The last one import is the one that fails, because there is no 'demo.component' in the GENDIR/app/demo folder. Surprisingly the file imported as i0 does exist and contains appropriate styles.

UPDATE: looks like the problem is in ngc. It would neither work even if you add a paths alias in tsconfig.json. There are a couple of issues about it on github (https://github.com/angular/angular/issues/13487)

angular2-aot angular-cli angular
1 Answers

I ran into a similar issue today, and I was able to resolve it by moving my tsconfig.app.json file into an ancestor directory of all the code I wanted to use. I then modified the include array in my tsconfig.app.json to only include the secondary app.

NOTE: I was using a single .angular-cli.json configured to build multiple apps. If you have multiple configurations, your mileage may vary

For your example, you could try the following structure:

  • <parent directory>
    • src (main application)
      • app.component - bootstrapped component
      • app.module
      • shared - shared application parts
        • demo.component
        • shared.module
    • extension - second application supposed to extend the main one
      • extension-app.component - bootstrapped component
      • extension.module
    • tsconfig.extension.json - app-specific tsconfig file for your extension application

In your tsconfig.extension.json file, add an include section:

...
"include": [
    "./extension/**/*"
]
...

Assuming you have each app declared in your .angular-cli.json file, you'll also need to update the "tsconfig" property for your extension application:

"name": "extension",
// Other configuration...
"tsconfig": <insert path to tsconfig based on "root" here>

READER BEWARE This structure is kind of a hack, and is not officially supported. Don't be surprised if a future update causes this to collapse on itself!

Working on:

  • Node: v8.4.0
  • npm: 5.4.2
  • @angular/cli: 1.4.2
user_82608860
Related