InjectorError trying to inject Injector into AOT-compiled library when using JIT for app

[jeysal]

I'm submitting a...

[?] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

A library with a directive that requires injection of Injector is AOT-compiled and distributed with metadata.
An app imports the library's module and applies the directive to an element.
Running the app with ng serve --aot works fine, the Injector is injected into the library directive.
Running the app with ng serve (JIT) results in error on page load:

Error: StaticInjectorError[Injector]: 
  StaticInjectorError[Injector]: 
    NullInjectorError: No provider for Injector!

Note that this is not specific to Injector, trying to inject e.g. IterableDiffers causes the same problem.

Expected behavior

The app works with both JIT and AOT.

Minimal reproduction of the problem with instructions

https://github.com/jeysal/ng5-jit-inj-repro

Follow the instructions in the readme on master to reproduce.

Branch master contains the library (with very basic build setup).
Branch app contains the app (generated by angular-cli).

Environment

Angular version: 5.0.0


Browser:
- [x] Chrome (desktop) version 62.0.3202.75 (Official Build) (64-bit)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.8.1  
- Platform: Linux 

Others:

[trotyl]

Sorry but your repo cannot reproduce the problem, it's working fine in JIT:

_{Using dist folder for lib is invalid since Angular CLI will clear it each time, just change the folder name to lib could make it runnable.}

[jeysal]

Hmm, that's weird.
Just tried following the exact repro steps again from start and I'm still getting the error.
What version of node did you use?

Using dist for lib is invalid since Angular CLI will clear it each time, just change it to lib could make it runnable.

Could you explain what you mean by this? angular-cli is only used in the app, the lib uses plain ngc.

[trotyl]

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.5.0
Node: 6.11.2
OS: darwin x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.4.2
webpack: 3.8.1

Angular CLI will remove dist folder whenever you run ng serve (see angular/angular-cli#4293), so your app can never start successfully.

[jeysal]

Ah, I think now I understand what you did.
In the README, by "Then checkout branch app INTO ANOTHER DIRECTORY and follow README instructions there.", I meant cloning the app branch somewhere else so you have the lib in one directory and the app in another. This way, they can be yarn linked together without interference.
Could you whether you can reproduce the issue that way?

[trotyl]

Oh, I see, then your problem should be lacking of --preserve-symlinks (see angular/angular-cli#6460) in your scripts.

Your lib would importing a different Angular library, meaning you'll have two sets of Angular framework in your app.

But it won't affect the real use case (normal npm install).

[jeysal]

Ok, that seems to have solved it.
Totally didn't expect this to be a problem caused by linking instead of installing the library, especially because importing and applying the module & directive worked and only the injection didn't, and it only happened in JIT mode.
Thank you very much!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}