AoT compiler doesn't recognize compilerOptions paths from tsconfig

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Running AoT compiler on valid typescript code fails because the AoT compiler doesn’t know how to honor tsconfig.json compilerOptions.paths, for example in my project I get Error: Unexpected value 'AppComponent' declared by the module 'AppModule'

Expected behavior

AoT should produce valid output, if I change imports to use relative paths everything works fine.

Minimal reproduction of the problem with instructions

This is a minimal starter project, bug repro is on the aot-path branch.

To reproduce :

• clone the project, check out the aot-path branch
• npm install
• npm run scss to compile scss -> css (because components reference css file so it will complain about it missing if you don’t do this)
• npm run ngc - this will run AoT compiler and you will get Error: Unexpected value 'AppComponent' declared by the module 'AppModule'

app.module.ts imports AppComponent from components/app.component.

components/* is mapped inside of tsconfig,aot.json in compilerOptions.paths to app/*.

If you do npm run build:dll and then npm run compile:dev which builds without the AoT you will see that this is valid code and TS/WebPack knows how to deal with this.

What is the motivation / use case for changing the behavior?

We use paths to alias folders in our project because using relative imports is really messy with deep nesting, eg. import ‘…/…/…/…/services/logging’ vs import ‘services/logging’, etc. We need to use AoT for localization so right now I’m hacking away at the code and converting everything to relative paths but hopefully you can fix this and this is just a temporary workaround.

Please tell us about your environment: Windows 10

• Angular version: 2.2.x

• Language: TypeScript 2.0

• Node (for AoT issues): node --version = v6.4.0

[dirkluijk]

This still is an issue for me when using ng-packagr.

[PleasantD]

I’m trying to build multiple “apps” within the same project. Both app reference a module under a different root path. I build the module using ngc and then

/dist/** --> all tsc and ngc output is supposed to go here
/framework/widget/** --> common widgets each should compile either with tsc or ngc to dist
/scripts/app-a/**
/scripts/app-b/**

tsc lets me have a single tsconfig.json file at the /framework and /scripts paths that configure and set the compilation entry points for each sub tree. For instance, framework compilation needs declaration files while scripts don’t need declaration files but DO need paths for each of the framework modules so they can be included without relative references.

AoT should behave the same way, allowing me a single config file per path, but this doesn’t work. Firstly, the output paths are wrong. tsc with an outDir of ../dist/framework puts module a in ../dist/framework/a. ngc drops the /a path. So each module built with ngc needs its own config file.

But then, when the apps are compiled ngc does the wrong thing with relative paths. If I don’t put genDir in the application root then any factories referencing factories built for framework modules wind up with an extra ../ and fail. If I set the genDir with a relative path to the root then the factories all get constructed, but the references to local components is off.

If genDir is ./aot then that puts in /scripts/aot/** but /scripts/aot/a/app.component.ngfactory.ts tries to import ../../dist/framework/widget/src/widget.component.ngfactory.ts (which doesn’t exist) instead of ../../dist/framework/widget/src/widget.component.ngfactory.ts which it just constructed.

If genDir is ../aot then that puts in /aot/** but /aot/a/app.component.ngfactory.ts now cannot find ./app.component.