编辑文章

描述:

封面图上传：

点击上传图片

angular 进入一个模块直接白屏，前端报错，console信息ERROR Error: Uncaught (in promise): NullInjectorError:R3InjectorError(s)[Q -> Q -> Q -> Q]:具体如下：
```js
ERROR Error: Uncaught (in promise): NullInjectorError:R3InjectorError(s)[Q -> Q -> Q -> Q]: 
  NullInjectorError: No provider for Q!
  NullInjectorError: R3InjectorError(s)[Q -> Q -> Q -> Q]: 
  NullInjectorError: No provider for Q!
    at i.value (main.a461322da124cee6.js:1:1475005)
    at i.value (main.a461322da124cee6.js:1:1476945)
    at i.value (main.a461322da124cee6.js:1:1476945)
    at i.value (main.a461322da124cee6.js:1:1476945)
    at l.value (main.a461322da124cee6.js:1:1508441)
    at i.value (main.a461322da124cee6.js:1:1476945)
    at l.value (main.a461322da124cee6.js:1:1508441)
    at Object.get (main.a461322da124cee6.js:1:1504831)
    at No (main.a461322da124cee6.js:1:1439692)
    at Bu (main.a461322da124cee6.js:1:1440457)
    at H (polyfills.84765f97c71fb3a1.js:1:17381)
    at H (polyfills.84765f97c71fb3a1.js:1:16916)
    at polyfills.84765f97c71fb3a1.js:1:18226
    at h.invokeTask (polyfills.84765f97c71fb3a1.js:1:8046)
    at Object.onInvokeTask (main.a461322da124cee6.js:1:1526603)
    at h.invokeTask (polyfills.84765f97c71fb3a1.js:1:7967)
    at h.runTask (polyfills.84765f97c71fb3a1.js:1:3117)
    at d (polyfills.84765f97c71fb3a1.js:1:10368)
```
### 原因分析
问题的主要原因是注入的一个服务、模块或者组件没有找到，导致空指针了，但是由于这个提示只是提示Q，并不知道具体是是什么模块导致的，这样的话，我们需要先需要在angular.json里面加入一个参数"optimization": false 来获取详细的是什么模块注入存在问题。
```js
   "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "optimization": false,
			...
```
---
开启参数后，日志如下,原来是NzModalService注入有问题
```js
ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(SettingModule)[NzModalService -> NzModalService -> NzModalService -> NzModalService]: 
  NullInjectorError: No provider for NzModalService!
NullInjectorError: R3InjectorError(SettingModule)[NzModalService -> NzModalService -> NzModalService -> NzModalService]: 
  NullInjectorError: No provider for NzModalService!
    at NullInjector.get (main.js:200832:21)
    at R3Injector.get (main.js:201053:29)
    at R3Injector.get (main.js:201053:29)
    at R3Injector.get (main.js:201053:29)
    at NgModuleRef.get (main.js:213427:31)
    at R3Injector.get (main.js:201053:29)
    at NgModuleRef.get (main.js:213427:31)
    at Object.get (main.js:212990:29)
    at lookupTokenUsingModuleInjector (main.js:191106:31)
    at getOrCreateInjectable (main.js:191228:10)
    at resolvePromise (polyfills.js:10700:21)
    at resolvePromise (polyfills.js:10647:11)
    at polyfills.js:10774:11
    at ZoneDelegate.invokeTask (polyfills.js:9660:173)
    at Object.onInvokeTask (main.js:217898:25)
    at ZoneDelegate.invokeTask (polyfills.js:9660:56)
    at Zone.runTask (polyfills.js:9410:39)
    at drainMicroTaskQueue (polyfills.js:9876:25)
```
原因是我在setting模块里面引入的公共模块里面依赖了nzModal 但是公共模块里面没有引入NzModalModule,处理方法如下，导入NzModalModule。
```js
import { NzModalModule } from 'ng-zorro-antd/modal';
@NgModule({
  declarations: [...],
imports: [
     NzModalModule
  ],
```