angular 进入一个模块直接白屏,前端报错,console信息ERROR Error: Uncaught (in promise): NullInjectorError:R3InjectorError(s)[Q -> Q -> Q -> Q]:具体如下:

  1. ERROR Error: Uncaught (in promise): NullInjectorError:R3InjectorError(s)[Q -> Q -> Q -> Q]:
  2. NullInjectorError: No provider for Q!
  3. NullInjectorError: R3InjectorError(s)[Q -> Q -> Q -> Q]:
  4. NullInjectorError: No provider for Q!
  5. at i.value (main.a461322da124cee6.js:1:1475005)
  6. at i.value (main.a461322da124cee6.js:1:1476945)
  7. at i.value (main.a461322da124cee6.js:1:1476945)
  8. at i.value (main.a461322da124cee6.js:1:1476945)
  9. at l.value (main.a461322da124cee6.js:1:1508441)
  10. at i.value (main.a461322da124cee6.js:1:1476945)
  11. at l.value (main.a461322da124cee6.js:1:1508441)
  12. at Object.get (main.a461322da124cee6.js:1:1504831)
  13. at No (main.a461322da124cee6.js:1:1439692)
  14. at Bu (main.a461322da124cee6.js:1:1440457)
  15. at H (polyfills.84765f97c71fb3a1.js:1:17381)
  16. at H (polyfills.84765f97c71fb3a1.js:1:16916)
  17. at polyfills.84765f97c71fb3a1.js:1:18226
  18. at h.invokeTask (polyfills.84765f97c71fb3a1.js:1:8046)
  19. at Object.onInvokeTask (main.a461322da124cee6.js:1:1526603)
  20. at h.invokeTask (polyfills.84765f97c71fb3a1.js:1:7967)
  21. at h.runTask (polyfills.84765f97c71fb3a1.js:1:3117)
  22. at d (polyfills.84765f97c71fb3a1.js:1:10368)

原因分析

问题的主要原因是注入的一个服务、模块或者组件没有找到,导致空指针了,但是由于这个提示只是提示Q,并不知道具体是是什么模块导致的,这样的话,我们需要先需要在angular.json里面加入一个参数”optimization”: false 来获取详细的是什么模块注入存在问题。

  1. "architect": {
  2. "build": {
  3. "builder": "@angular-devkit/build-angular:browser",
  4. "options": {
  5. "optimization": false,
  6. ...

开启参数后,日志如下,原来是NzModalService注入有问题

  1. ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(SettingModule)[NzModalService -> NzModalService -> NzModalService -> NzModalService]:
  2. NullInjectorError: No provider for NzModalService!
  3. NullInjectorError: R3InjectorError(SettingModule)[NzModalService -> NzModalService -> NzModalService -> NzModalService]:
  4. NullInjectorError: No provider for NzModalService!
  5. at NullInjector.get (main.js:200832:21)
  6. at R3Injector.get (main.js:201053:29)
  7. at R3Injector.get (main.js:201053:29)
  8. at R3Injector.get (main.js:201053:29)
  9. at NgModuleRef.get (main.js:213427:31)
  10. at R3Injector.get (main.js:201053:29)
  11. at NgModuleRef.get (main.js:213427:31)
  12. at Object.get (main.js:212990:29)
  13. at lookupTokenUsingModuleInjector (main.js:191106:31)
  14. at getOrCreateInjectable (main.js:191228:10)
  15. at resolvePromise (polyfills.js:10700:21)
  16. at resolvePromise (polyfills.js:10647:11)
  17. at polyfills.js:10774:11
  18. at ZoneDelegate.invokeTask (polyfills.js:9660:173)
  19. at Object.onInvokeTask (main.js:217898:25)
  20. at ZoneDelegate.invokeTask (polyfills.js:9660:56)
  21. at Zone.runTask (polyfills.js:9410:39)
  22. at drainMicroTaskQueue (polyfills.js:9876:25)

原因是我在setting模块里面引入的公共模块里面依赖了nzModal 但是公共模块里面没有引入NzModalModule,处理方法如下,导入NzModalModule。

  1. import { NzModalModule } from 'ng-zorro-antd/modal';
  2. @NgModule({
  3. declarations: [...],
  4. imports: [
  5. NzModalModule
  6. ],