Issue
Original implementation was based on the pattern described in
https://shashankvivek-7.medium.com/forroot-injectiontoken-in-action-angular-c2bab9959207
It was working until I upgraded it to angular 12. After the upgrade I kept getting the NullInjector error. Unable to resolve it anyway, I ended up creating two vanilla simple projects for Angular 11 and 12 each. Additionally, I moved the token provider from the project module to the appmodule.
Angular 12 Sample https://drive.google.com/file/d/1lE8RL6s8L9n6zQYqVOaLqMW9ikMfMgSu/view?usp=sharing
Angular 11 Sample https://drive.google.com/file/d/1HxhCz3i5nmrK8Zj0eddTlk8zz-29lwlh/view?usp=sharing
The angular 11 version works (even prod mode), but the other version runs into the same error.
This is what it looks like inside the debugger
It looks like the line
let record = this.records.get(token);
in R3Injector.get always fails to find the record by the token, even though the record exists in the list of records, as can be seen in the image (index 58). It is because of this that a duplicate record at index 78, gets added. The key and the token parameter seem to be identical.
I'm unable to find any definitive information about it, or a way to fix it.
Solution
Learned the hard way the perils of a bad import like the following (auto inserted by IDEs like VS Code)
import { Xyz } from 'projects/shared/src/public-api';
One such mis-imported object led to doubly defined SharedConfigToken in the generated main.js (hence index 58 and 78). This meant the injector would never find the record because it was inserted with one SharedConfigToken but that got overwritten later due to the double import. Since Map key comparison is SameValueZero it could never lookup the token, hence the error.
It wasted a lot of time from my life. I hope the finding helps someone.
Answered By - Battlefury
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.