Javascript 依赖项注入错误随导航流而变化（延迟加载的角度模块）

我在网页包AoT设置中使用

@angular^4.0.1

，大量使用延迟加载的模块。但是我开始看到依赖注入错误，我找不到错误的来源。基本上，依赖关系在某些导航流中工作良好，但在其他导航流中则不行

下面是一个具体的例子：

App

组件延迟加载

Level1

到

{path: 'level1', loadChildren: './+level1#Level1Module'},

在相同的路线样式中，

Level1

拉动

Level2

，拉动

Level3

这些都是基本组件，在这种情况下，它们主要用于HTML模板

Level3

是出现问题的地方，因为我在

Level3Module

的提供者中声明了一个简单的

Level3Service

：

@NgModule({
  declarations: [
    Level3Component,
  ],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes),
    SharedModule,
  ],
  providers: [
    Level3Service,
  ]
})
export class Level3Module {
  public static routes = routes;
}

现在，

Level3

有两个延迟加载的子级，

Level3ChildA

和

Level3ChildB

。子路径看起来有点不同，因为它们本身没有任何子路径，它们是实际页面：

{path: '', component: Level3ChildXComponent, pathMatch: 'full'},

此外，我没有重新说明

Level3Service

，尽管我需要它。根据我的理解，如果我重新声明提供者，它将不再是一个共享实例，而是一个新实例

@NgModule({
  declarations: [
    Level3ChildXComponent,
  ],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes),
    SharedModule,
  ],
  providers: [
      // Level3Service, // Let's not redeclare this, we want a shared instance.
      Level3ChildXSomeService,
  ]
})
export class Level3ChildXModule {
  public static routes = routes;
}

从

Level3ChildA

开始，用户与表单bla-bla交互，然后我想将用户从a移动到B，

Level3ChildB

。我从

Level3ChildAComponent

中执行此操作：

this.level3Service.doSomething();
return this.router.navigate(['../B'], { relativeTo: this.route.parent });

在这里，旅程以一个错误和一个疯狂的长轨迹结束

ERROR Error: Uncaught (in promise): Error: No provider for Level3Service!
Error
at injectionError (http://localhost:3000/vendor.dll.js:2579:86) [angular]
at noProviderError (http://localhost:3000/vendor.dll.js:2617:12) [angular]
at ReflectiveInjector_._throwOrNull (http://localhost:3000/vendor.dll.js:4118:19) [angular]
at ReflectiveInjector_._getByKeyDefault (http://localhost:3000/vendor.dll.js:4157:25) [angular]
at ReflectiveInjector_._getByKey (http://localhost:3000/vendor.dll.js:4089:25) [angular]
at ReflectiveInjector_.get (http://localhost:3000/vendor.dll.js:3958:21) [angular]
at AppModuleInjector.NgModuleInjector.get (http://localhost:3000/vendor.dll.js:4905:52) [angular]
at Level3ChildBModuleInjector.NgModuleInjector.get (http://localhost:3000/vendor.dll.js:4905:52) [angular]
(...) hundred lines omitted.

我希望有人能帮助我了解这里发生了什么

似乎一般的规则是，如果我从一开始就重新加载应用程序，那么所有依赖项提供程序都可以工作。但是如果我打开一个新浏览器，直接导航到其中一个子页面（例如a页面），那么它就不知道父模块

Level3

中的提供者

更新

---

当我从子模块

level3childmodule

中删除providers数组时，我发现这个错误会停止重现。这些是一些看似不相关的提供程序，但在某些情况下，它们似乎覆盖了父模块的提供程序堆栈

通过将angular软件包从

^4.0.1

更新为

^4.0.2

似乎可以解决此问题

可能是编译器错误修复（#15583）。

---

您正在使用angular cli吗？你能分享一些简单的例子来重现它吗？它在不同浏览器中的行为是否相同？@yurzui我正在使用

webpack dev server

进行测试。我在Chrome、Firefox和Safari中也经历过同样的行为。我将研究如何创建一个最小的示例，尽管我不知道Plunkr是否可以包含它—公共Github repo会起作用吗？Github repo会很好example@yurzui您的Plunker是纯角度的，问题一定在Webpack/AoT编译中的某个地方。我将尝试构建一个基本的Webpack/AoT应用程序来重现这个问题。