Ng-zorro-antd: No provider for NzMessageService!

Created on 18 Aug 2017 · 9Comments · Source: NG-ZORRO/ng-zorro-antd

I'm submitting a...


[ x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

## Current behavior

AppComponent_Host.html:1 ERROR Error: No provider for NzMessageService!
    at injectionError (core.es5.js:1169)
    at noProviderError (core.es5.js:1207)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
    at resolveNgModuleDep (core.es5.js:9476)
    at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10564)
    at resolveDep (core.es5.js:11067)
    at createClass (core.es5.js:10923)

Expected behavior

依赖注入NzMessageService并且使用


export class AppComponent{

  constructor(private _message: NzMessageService) {

  }

  _id;
  createBasicMessage = () => {
    this._id = this._message.loading('正在执行中', { nzDuration: 0 }).messageId;
    setTimeout(_ => {
      this._message.remove(this._id);
    }, 2500)
  };
}

在NgModule的providers加入NzMessageService之后还会提示找不到NzMessageService中需要到的服务

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Angular version: X.Y.Z

ng-zorro-antd version: X.Y.Z

Browser:
- [x ] Chrome (desktop) version 60.0.3112.78
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX

For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Source

canaanjin

Most helpful comment

change
import { NzMessageService } from 'ng-zorro-antd/src/components/message/nz-message.service';
to
import { NzMessageService } from 'ng-zorro-antd';

change
import {NZ_MESSAGE_CONFIG} from '../../node_modules/ng-zorro-antd/src/components/message/nz-message-config';
to
import {NZ_MESSAGE_CONFIG} from 'ng-zorro-antd';

vthinkxie on 18 Aug 2017

👍4

All 9 comments

please make sure you follow this guide, and use NgZorroAntdModule.forRoot() in your root module

vthinkxie on 18 Aug 2017

我在AppModule中是引用了NgZorroAntdModule.forRoot()的

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    NgZorroAntdModule.forRoot()
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

canaanjin on 18 Aug 2017

please provide steps to reproduce this error.

vthinkxie on 18 Aug 2017

app.module.ts 按照快速上手做的添加了NgZorroAntdModule.forRoot()

import {NZ_MESSAGE_CONFIG} from '../../node_modules/ng-zorro-antd/src/components/message/nz-message-config';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    NgZorroAntdModule.forRoot()
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent.ts 这里的代码是复制 Message 全局提示示例中的代码
并且没有任何触发

import { NzMessageService } from 'ng-zorro-antd/src/components/message/nz-message.service';
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private _message: NzMessageService) {
  }
  _id;
  createBasicMessage = () => {
     this._id = this._message.loading('正在执行中', { nzDuration: 0 }).messageId;
     setTimeout(_ => {
       this._message.remove(this._id);
     }, 2500)
  };
}

编译没有任何错误

浏览器报错


AppComponent_Host.html:1 ERROR Error: No provider for NzMessageService!
    at injectionError (core.es5.js:1169)
    at noProviderError (core.es5.js:1207)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
    at resolveNgModuleDep (core.es5.js:9476)
    at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10564)
    at resolveDep (core.es5.js:11067)
    at createClass (core.es5.js:10923)
View_AppComponent_Host_0 @ AppComponent_Host.html:1
proxyClass @ compiler.es5.js:14971
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13405
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080
(anonymous) @ core.es5.js:4409
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141
webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844
(anonymous) @ core.es5.js:4409
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141
(anonymous) @ zone.js:831
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:595
Promise resolved (async)
scheduleMicroTask @ zone.js:578
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:235
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:255
scheduleResolveOrReject @ zone.js:829
ZoneAwarePromise.then @ zone.js:918
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap b4cdca61e9d7be64fed6:54
0 @ main.bundle.js:453
__webpack_require__ @ bootstrap b4cdca61e9d7be64fed6:54
webpackJsonpCallback @ bootstrap b4cdca61e9d7be64fed6:25
(anonymous) @ main.bundle.js:1
AppComponent_Host.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 1, nodeDef: {…}, elDef: {…}, elView: {…}}
View_AppComponent_Host_0 @ AppComponent_Host.html:1
proxyClass @ compiler.es5.js:14971
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13405
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1085
(anonymous) @ core.es5.js:4409
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141
webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844
(anonymous) @ core.es5.js:4409
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141
(anonymous) @ zone.js:831
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:595
Promise resolved (async)
scheduleMicroTask @ zone.js:578
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:235
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:255
scheduleResolveOrReject @ zone.js:829
ZoneAwarePromise.then @ zone.js:918
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap b4cdca61e9d7be64fed6:54
0 @ main.bundle.js:453
__webpack_require__ @ bootstrap b4cdca61e9d7be64fed6:54
webpackJsonpCallback @ bootstrap b4cdca61e9d7be64fed6:25
(anonymous) @ main.bundle.js:1
zone.js:654 Unhandled Promise rejection: No provider for NzMessageService! ; Zone:  ; Task: Promise.then ; Value: Error: No provider for NzMessageService!
    at injectionError (core.es5.js:1169)
    at noProviderError (core.es5.js:1207)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
    at resolveNgModuleDep (core.es5.js:9476)
    at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10564)
    at resolveDep (core.es5.js:11067)
    at createClass (core.es5.js:10923) Error: No provider for NzMessageService!
    at injectionError (http://localhost:4200/vendor.bundle.js:107744:90)
    at noProviderError (http://localhost:4200/vendor.bundle.js:107782:12)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor.bundle.js:109224:19)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:109263:25)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (http://localhost:4200/vendor.bundle.js:109195:25)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (http://localhost:4200/vendor.bundle.js:109064:21)
    at resolveNgModuleDep (http://localhost:4200/vendor.bundle.js:116051:25)
    at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (http://localhost:4200/vendor.bundle.js:117139:16)
    at resolveDep (http://localhost:4200/vendor.bundle.js:117642:45)
    at createClass (http://localhost:4200/vendor.bundle.js:117498:91)

canaanjin on 18 Aug 2017

you should import all service, config and module from ng-zorro-antd other than its source code.
like

import {NZ_MESSAGE_CONFIG} from 'ng-zorro-antd';
import { NzMessageService } from 'ng-zorro-antd';

vthinkxie on 18 Aug 2017

我不太明白你说的什么意思
你是说像这样吗？

  providers: [
    { provide: NZ_MESSAGE_CONFIG, useValue: {} }
  ],

或者吧NzMessageService也添加上

  providers: [
    { provide: NZ_MESSAGE_CONFIG, useValue: {} },
    NzMessageService
  ],

这两种都依然在报错

canaanjin on 18 Aug 2017

change
import { NzMessageService } from 'ng-zorro-antd/src/components/message/nz-message.service';
to
import { NzMessageService } from 'ng-zorro-antd';

change
import {NZ_MESSAGE_CONFIG} from '../../node_modules/ng-zorro-antd/src/components/message/nz-message-config';
to
import {NZ_MESSAGE_CONFIG} from 'ng-zorro-antd';

vthinkxie on 18 Aug 2017

👍4

Hello,
can anyone help? I also used schemas: [CUSTOM_ELEMENTS_SCHEMA].
the line also fails: import { CUSTOM_ELEMENTS_SCHEMA} from 'ng-zorro-antd';
I am using Ng-Zorro 0.7.1 version, cannot import NzMeasureScrollbarService. The error I got is:
StaticInjectorError(Platform: core)[NzTableComponent -> NzMeasureScrollbarService]:
NullInjectorError: No provider for NzMeasureScrollbarService!
Error: StaticInjectorError(DynamicTestModule)[NzTableComponent -> NzMeasureScrollbarService]:

maodean001 on 31 Aug 2018

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.