升级到 Angular 12 - NullInjectorError: No provider for InjectionToken

Question

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.

Answer 1

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