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

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

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

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

Answer 2

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

npm cache clean --force