一个组件获取新的服务实例而不是共享实例

Question

我开始了一个项目来更好地学习 Angular，并且最近开始重构它以使用服务在组件之间共享数据。有 5 个相关组件，除了其中一个之外，所有组件都共享同一个服务实例。另一个有它自己的实例，我不明白为什么。

最新代码的分支在这里（注意是 Large-Refactor 分支，不是 master）：https://github.com/epoblaguev/Gloomhaven-Calculator/tree/Large-Refactor

正在使用的服务是：/src/app/character.service.ts

工作的四个组件都位于： /src/app/modules/stats-module/

无法正常工作的组件是： /src/app/modules/perk-chooser/

如果我将 CharacterService 中的 Injectable 装饰器更改为：

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

到

@Injectable()
export class CharacterService {

并将该服务包含在 AppModule 的提供者列表中，PerkChooserComponent 抛出以下错误，而其他组件则正常：

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

我认为这个问题的症状是服务被注入到延迟加载的组件中，但我不知道该怎么办。

Answer 1

您的代码运行良好。可能您需要停止并重新运行应用程序。或者你可以运行

npm cache clean --force

Answer 2

解决方案是创建一个新组件（我称之为 Perk-Selector），将所有旧代码复制到其中，并删除旧组件（包括所有引用）。然后一切如预期运行。

我不明白根本问题是什么。我之前尝试在另一台计算机上克隆和构建项目，但遇到了同样的问题。

一个组件获取新的服务实例而不是共享实例

One component getting new instance of service instead of shared instance

angular-services

angular