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.
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.