CODEWITHSUNDEEP
angularangular-services
Morglor
Morglor

Reputation: 347

One component getting new instance of service instead of shared instance

I started a project to learn Angular better, and recently started refactoring it to using a service to share data between components. There are 5 relevant components, and all but one of them are sharing the same instance of the service. The other one has it's own instance, and I can't figure out why.

The branch with the latest code is here (note it's the Large-Refactor branch, not master): https://github.com/epoblaguev/Gloomhaven-Calculator/tree/Large-Refactor

The service being used is: /src/app/character.service.ts

The four components that work are all located in: /src/app/modules/stats-module/

The component that doesn't work properly is: /src/app/modules/perk-chooser/

If I change Injectable decorator in CharacterService from:

@Injectable({provideIn: 'root' })
export class CharacterService {

to

@Injectable()
export class CharacterService {

and include the service in the list of providers in AppModule, the PerkChooserComponent throws the following error, while the other components are just fine:

AppComponent.html:46 ERROR Error: StaticInjectorError(AppModule)[PerkChooserComponent -> CharacterService]: 
  StaticInjectorError(Platform: core)[PerkChooserComponent -> CharacterService]: 
    NullInjectorError: No provider for CharacterService!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8895)
    at resolveToken (core.js:9140)
    at tryResolveToken (core.js:9084)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
    at resolveToken (core.js:9140)
    at tryResolveToken (core.js:9084)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
    at resolveNgModuleDep (core.js:21217)
    at NgModuleRef_.push../node_modules/@an

I think the issue has the symptoms of a service being injected into a lazy loaded component, but I can't figure out what to do about it.

Upvotes: 1

Views: 145

Answers (2)

Morglor
Morglor

Reputation: 347

The solution was to create a new component (I called it Perk-Selector), copy all the old code into it, and delete the old component (including all references). Then everything ran as expected.

I don't understand what the underlying issue was. I previously tried to clone and build the project on a different computer, but had the same issue.

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222522

Your code is working perfectly. Probably you need to stop and re run the application. Or you could run

npm cache clean --force

Upvotes: 3

Related Questions