Allow referencing modules outside of node_modules folder with @angular/compiler-cli 5.0.0

[mlakmal]

- [x ] bug report -> please search issues before submitting
- [x ] feature request

Versions.

angular 5.0.0
ngtools/webpack 1.8.0

Repro steps.

we have application that uses umd angular libraries which reference current application modules. with new compiler-cli this is not supported as it does a check if module resides within node_modules folder. with old cli we were able to use webpacl alias's to resolve this. but seems like with new version we are not able to complete this change.

Gives below error:
Error: Trying to import a source file from a node_modules package: import /Users/123/stash/features/xyz-ui/app/xyz/core/coreModule.ts from /Users/123/stash/features/xyz-ui/node_modules/@ xyz/ux/ux.ngfactory.ts

Ex:
our application has core module under app/core/coreModule.ts and also contains app/core/public_api.ts (which exports coreModule.ts)
application also uses umd bundled library from node_modules/@xyz/ux folder using @xyz/ux import. and this folder reference app/core/coreModule through @xyz/core import.
our build tscofnig contains paths to point @xyz/core to app/core/public_api.ts.

with new compiler and ngtool/webpack builder we are not able to build the app as compiler_host.ts throws error from below line.

https://github.com/angular/angular/blob/3db7112b89c609389abd8b48b0610f9c6f9510a6/packages/compiler-cli/src/transformers/compiler_host.ts#L579

Appreciate if this can be resolved with next minor version.

[hellraisercenobit]

Same as @mlakmal, but only in AOT not with ng serve.

It's seems to be clearly impossible to build an app in AOT mode with a node_module importing environments/* or any others paths relative to the current project

Somebody knows a quick fix to bypass this ?
Previous CLI's version could be compatible with angular 5.x ?

Thx a lot.

[djimoh5]

Our quick workaround was just to comment out the line in node_modules\@angular\compiler-cli\src\transformers\compiler_host.js that's throwing the exception (line 181). Everything compiles fine after that, so it's definitely not a hard stop rule.

[hellraisercenobit]

For production, with continious delivery, devops or similar, it could be a real hard stop ^^.
Anyway, your reply is welcome and really usefull.
Thank you @djimoh5 .

An other quickfix/fallback: compile without AOT and waiting for new release/fix, not perfect but it works.

[hellraisercenobit]

Any update on this?
Not really convenient to override compiler-cli to share env file between external modules and an app.

[Paulskit]

We use this webpack plugin as a workaround:
https://pastebin.com/30qJPrNt

Basically it's just a copy-paste of internal webpack AngularCompilerPlugin code.

[drakenfly]

Hey @Paulskit, what exactly have you done? I cannot open the repo :|

[Paulskit]

@drakenfly Here is another link: https://pastebin.com/30qJPrNt
Workaround is to try regular resolving (the same as AngularCompilerPlugin already does) for modules that doesn't match (in ACP opinion).
Works great so far.

[drakenfly]

Sorry if I bother you with this, but how have you managed to integrate this in a CI environment with angular cli? As far as I know, you cannot modify webpack without detaching the app?

[Paulskit]

I use webpack directly with @ngtools/webpack. Angular CLI unfortunately doesn't offer enough flexibility for our needs.

[drakenfly]

Ok. For several reasons, I cannot eject the app here in our setup :(

Are there any plans to fix this in future CLI releases?

[jensbodal]

Unfortunately for now, we went with something like this for our build process:

compiler_host="node_modules/@angular/compiler-cli/src/transformers/compiler_host.js"
patched="$compiler_host"".bak"

if [ ! -f "$patched" ]; then 
    sed -i\'.bak\' \'186,188d\' "$compiler_host" && touch "$patched";
fi

[clement911]

I also hit the same issue. We have a shared module with typescript files and those modules are consumed by our main app.

update: --aot false fixes the issue but we'd like to use aot if possible