Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jeysal opened this issue Nov 2, 2017 · 7 comments

Comments

@jeysal
Copy link

jeysal commented Nov 2, 2017

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
Copy link
Contributor

trotyl commented Nov 2, 2017

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

image
image
image

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
Copy link
Author

jeysal commented Nov 2, 2017

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
Copy link
Contributor

trotyl commented Nov 2, 2017

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

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
Copy link
Author

jeysal commented Nov 2, 2017

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
Copy link
Contributor

trotyl commented Nov 2, 2017

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
Copy link
Author

jeysal commented Nov 2, 2017

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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants