Search code examples
angularangular2-aotangular-aot

Angular AoT Generates Incorrect External Directory References


I've been working on creating a project (all Typescript) that contains multiple Angular and NodeJS projects. That part is going pretty well, but I figured it would be pretty great if I could have a library folder under my source folder that all of my Typescript project could share project modules with, Typescript interfaces, NgModules, etc. However, when I compile the source for production, the ModuleFactory references to the actual models do not translate correctly for my 'lib' NgModules.

I have created a demo and uploaded it to my GitHub as an example: https://github.com/ItsBaneDude/broken-external-links

I've included the compilation scripts as npm scripts under

npm run build-aot  // Builds and fails for production
npm run build-jit  // Builds and runs for dev i.e. "ng serve --dev"
npm run compile-aot // To compile and keep AoT folder in src, just ngc

I forgot to put the JiT serve script so you could automatically see it running it in the browser, but I mean you can just do ng serve --dev to achieve that.

So, what happens: you try to build for production, npm run build-aot, it says

ERROR in C:/Users/Bane/Documents/node_projects/broken-external-libs/src/project-ng/aot/lib/modules/test/test.module.ngfactory.ts (10,21): Cannot find module './test.module'.

Bummer. I wonder why.

Runs AoT compile with npm run compile-aot... It "works"...

Okay, so the AoT foder gets generated at src/project-ng/aot. If I go into .../aot/app/app.module.ngfactory.ts, I see on line 10 an import statement for my app module.

import * as i1 from '../../app/app.module';

Okay, cool, it follows correctly all the way back to ../../app/app.module and resolves successfully.

However, if I go into the AoT folder again, except inside my lib folder, to ...aot/lib/modules/test/test.module.ngfactory.ts, I see it on line 10, again, trying to import my TestModule, but from ./test.module

import * as i1 from './test.module';

But, as we know as rational, self-and-computer-aware human-beings, it should be more like ../../../../../lib/modules/test/test.module.

y tho

To be completely fair I've only recently started Angular development, so if some of this seems hazy to me, it might be because I suck. But I'm looking to suck less! If anyone would care to lend me a hand, I would be very appreciative of your borrowed expertise.


Solution

  • The answer I ended up discovering and going with was:

    Angular Compiler-CLI < 1.5.0-rc.5 (I think it's release candidate 5, I didn't look through the change logs) does not support this behavior. At the very beginning of this project with months to develop the code ahead, I'm just developing in Angular 5 and getting the results I expected.