fix(module:message): fix message and notification error in prod (#4884)

README-zh_CN.md

@@ -16,6 +16,7 @@ Ant Design 的 Angular 实现，开发和服务于企业级后台产品。
 [![Codecov](https://img.shields.io/codecov/c/github/NG-ZORRO/ng-zorro-antd.svg?style=flat-square)](https://codecov.io/gh/NG-ZORRO/ng-zorro-antd)
 [![GitHub Release Date](https://img.shields.io/github/release-date/NG-ZORRO/ng-zorro-antd.svg?style=flat-square)](https://github.com/NG-ZORRO/ng-zorro-antd/releases)
 [![npm package](https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-atnd)
+[![npm next package](https://img.shields.io/npm/v/ng-zorro-antd/next.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-antd)
 [![NPM downloads](http://img.shields.io/npm/dm/ng-zorro-antd.svg?style=flat-square)](https://npmjs.org/package/ng-zorro-antd)
 [![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE)
 [![Gitter](https://img.shields.io/gitter/room/ng-zorro/ng-zorro-antd.svg?style=flat-square)](https://gitter.im/ng-zorro/ng-zorro-antd)
@@ -25,7 +26,7 @@ Ant Design 的 Angular 实现，开发和服务于企业级后台产品。
 
 </div>
 
-[![](https://cdn-images-1.medium.com/max/2000/1*NIlj0-TdLMbo_hzSBP8tmg.png)](http://ng.ant.design)
+[![](https://img.alicdn.com/tfs/TB1t6QPylr0gK0jSZFnXXbRRXXa-4000-1378.png)](http://ng.ant.design)
 
 [English](README.md) | 简体中文
 
@@ -40,7 +41,8 @@ Ant Design 的 Angular 实现，开发和服务于企业级后台产品。
 
 ## 🖥 支持环境
 
-- Angular `^8.0.0`
+- Angular `^8.0.0` [![npm package](https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-atnd)
+- Angular `^9.0.0` [![npm next package](https://img.shields.io/npm/v/ng-zorro-antd/next.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-antd)
 - 支持服务端渲染
 - 现代浏览器，以及 Internet Explorer 11+ （使用 [polyfills](https://angular.io/guide/browser-support)）
 - [Electron](http://electron.atom.io/)
@@ -49,7 +51,6 @@ Ant Design 的 Angular 实现，开发和服务于企业级后台产品。
 | --------- | --------- | --------- | --------- | --------- | --------- |
 | IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
-> 由于 `@angular/cdk` 的缘故，`ng-zorro-antd` 支持主要浏览器的最新两个主版本。
 
 ## 🎨 设计规范
 

README.md

@@ -17,6 +17,7 @@ An enterprise-class UI components based on Ant Design and Angular.
 [![Codecov](https://img.shields.io/codecov/c/github/NG-ZORRO/ng-zorro-antd.svg?style=flat-square)](https://codecov.io/gh/NG-ZORRO/ng-zorro-antd)
 [![GitHub Release Date](https://img.shields.io/github/release-date/NG-ZORRO/ng-zorro-antd.svg?style=flat-square)](https://github.com/NG-ZORRO/ng-zorro-antd/releases)
 [![npm package](https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-antd)
+[![npm next package](https://img.shields.io/npm/v/ng-zorro-antd/next.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-antd)
 [![NPM downloads](http://img.shields.io/npm/dm/ng-zorro-antd.svg?style=flat-square)](https://npmjs.org/package/ng-zorro-antd)
 [![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE)
 [![Gitter](https://img.shields.io/gitter/room/ng-zorro/ng-zorro-antd.svg?style=flat-square)](https://gitter.im/ng-zorro/ng-zorro-antd)
@@ -26,7 +27,7 @@ An enterprise-class UI components based on Ant Design and Angular.
 
 </div>
 
-[![](https://cdn-images-1.medium.com/max/2000/1*NIlj0-TdLMbo_hzSBP8tmg.png)](http://ng.ant.design)
+[![](https://img.alicdn.com/tfs/TB1t6QPylr0gK0jSZFnXXbRRXXa-4000-1378.png)](http://ng.ant.design)
 
 English | [简体中文](README-zh_CN.md)
 
@@ -43,7 +44,8 @@ English | [简体中文](README-zh_CN.md)
 
 ## 🖥 Environment Support
 
-* Angular `^8.0.0`
+* Angular `^8.0.0` [![npm package](https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-atnd)
+* Angular `^9.0.0` [![npm next package](https://img.shields.io/npm/v/ng-zorro-antd/next.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-antd)
 * Server-side Rendering
 * Modern browsers and Internet Explorer 11+ (with [polyfills](https://angular.io/guide/browser-support))
 * [Electron](http://electron.atom.io/)
@@ -52,7 +54,6 @@ English | [简体中文](README-zh_CN.md)
 | --------- | --------- | --------- | --------- | --------- | --------- |
 | IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions
 
-> Listing `@angular/cdk` as its dependency, `ng-zorro-antd` supports the most recent two versions of all major browsers.
 
 ## 🎨 Design Specification
 

components/drawer/demo/service.md

@@ -9,10 +9,6 @@ title:
 
 Drawer 的 service 用法，示例中演示了用户自定义模板、自定义component。
 
-> **注意** 如果使用Component模式，则需要在NgModule中的 `declarations` 和 `entryComponents` 加入自定义的Component
-
 ## en-US
 
 Usage of Drawer's service, examples demonstrate user-defined templates, custom components.
-
-> **NOTE** If you use Component mode, you need to add your custom Component into `declarations` and `entryComponents` for a `NgModule`

components/drawer/demo/service.ts

@@ -1,4 +1,4 @@
-/* entryComponents: NzDrawerCustomComponent */
+/* declarations: NzDrawerCustomComponent */
 
 import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
 import { NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer';

components/drawer/drawer.module.ts

@@ -20,7 +20,6 @@ import { NzDrawerServiceModule } from './drawer.service.module';
 @NgModule({
   imports: [CommonModule, OverlayModule, PortalModule, NzIconModule, NzOutletModule, NzNoAnimationModule, NzDrawerServiceModule],
   exports: [NzDrawerComponent],
-  declarations: [NzDrawerComponent],
-  entryComponents: [NzDrawerComponent]
+  declarations: [NzDrawerComponent]
 })
 export class NzDrawerModule {}

components/drawer/drawer.spec.ts

@@ -2,7 +2,6 @@ import { ESCAPE } from '@angular/cdk/keycodes';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
-import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { dispatchKeyboardEvent, NzNoAnimationModule } from 'ng-zorro-antd/core';
@@ -385,9 +384,6 @@ describe('NzDrawerService', () => {
       providers: [NzDrawerService],
       declarations: [NzTestDrawerWithServiceComponent, NzDrawerCustomComponent]
     });
-    TestBed.overrideModule(BrowserDynamicTestingModule, {
-      set: { entryComponents: [NzDrawerCustomComponent] }
-    }).compileComponents();
   }));
 
   beforeEach(async(() => {

components/empty/empty.spec.ts

@@ -321,15 +321,13 @@ export class NzEmptyTestCustomComponent {
 @NgModule({
   imports: [CommonModule, NzEmptyModule, NzListModule],
   declarations: [NzEmptyTestServiceComponent, NzEmptyTestCustomComponent],
-  entryComponents: [NzEmptyTestCustomComponent],
   exports: [NzEmptyTestServiceComponent, NzEmptyTestCustomComponent]
 })
 export class NzEmptyTestServiceModule {}
 
 @NgModule({
   imports: [CommonModule, NzEmptyModule, NzListModule],
   declarations: [NzEmptyTestServiceComponent, NzEmptyTestCustomComponent],
-  entryComponents: [NzEmptyTestCustomComponent],
   exports: [NzEmptyTestServiceComponent, NzEmptyTestCustomComponent],
   providers: [
     {

components/icon/doc/index.en-US.md

@@ -122,7 +122,7 @@ Please call this in component's constructor or `AppInitService`.
 
 ### Add Icons in Lazy-loaded Modules
 
-Sometimes, you want to import icons in lazy modules to avoid increasing the size of the main.js. You can use `NzIconModule.patch`.
+Sometimes, you want to import icons in lazy modules to avoid increasing the size of the main.js. You can use `NzIconModule.forChild`.
 
 ```ts
 @NgModule({

components/icon/doc/index.zh-CN.md

@@ -124,7 +124,7 @@ export class AppModule {
 
 ### 在子模块中补充图标
 
-有时候，为了避免增大 main.js 的体积，你可能想要从懒加载模块中引入图标，这时你就可以使用 `NzIconModule.patch` 来追加图标。
+有时候，为了避免增大 main.js 的体积，你可能想要从懒加载模块中引入图标，这时你就可以使用 `NzIconModule.forChild` 来追加图标。
 
 ```ts
 @NgModule({
@@ -181,12 +181,6 @@ this._iconService.fetchFromIconfont({
 
 你是不是没有阅读以上的文档？
 
-### 出现了两个图标，这是怎么回事？
-
-1.7.0 及之后与之前的版本在图标的实现上完全不同，旧版本的主题文件中，会引入字体文件，字体文件根据 CSS 类名，通过一个伪类元素将 icon 添加进来，加上新版的 SVG icon，就会出现两个 icon。
-
-如果发生了，请先删除 `node_modules` 然后重装，如果还是不行，仔细检查你是否在别处引用了旧版本的主题文件，全局查找 `@icon-url`，删除该行代码即可。
-
 ### 我想静态引入全部的图标，该怎么做？
 
 实际上我们已经在 <a href="/components/icon/zh#%E9%9D%99%E6%80%81%E5%8A%A0%E8%BD%BD%E4%B8%8E%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD">静态加载与动态加载</a> 部分演示过了：
@@ -200,7 +194,7 @@ this._iconService.fetchFromIconfont({
 // const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key])
 ```
 
-然后通过 InjectionToken（1.8.0）或者 `NzIconService` 的 `addIcon` 方法引入。
+然后通过 forRoot 或者 `NzIconService` 的 `addIcon` 方法引入。
 
 ### 动态加载会不会影响网页的性能？
 

components/input/demo/allow-clear.ts

@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
     ></ng-template>
     <br />
     <br />
-    <nz-input-group [nzSuffix]="textAreaClearTpl">
+    <nz-input-group [nzSuffix]="textAreaClearTpl" class="ant-input-affix-wrapper-textarea-with-clear-btn">
       <textarea nz-input [(ngModel)]="textValue" placeholder="textarea with clear icon"></textarea>
     </nz-input-group>
     <ng-template #textAreaClearTpl

components/message/message.module.ts

@@ -14,11 +14,11 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 
 import { NzMessageContainerComponent } from './message-container.component';
 import { NzMessageComponent } from './message.component';
-import { NzMessageServiceModule } from './message.service.module';
+import { NzMessageService } from './message.service';
 
 @NgModule({
-  imports: [CommonModule, OverlayModule, NzIconModule, NzOutletModule, NzMessageServiceModule],
-  declarations: [NzMessageContainerComponent, NzMessageComponent],
-  entryComponents: [NzMessageContainerComponent, NzMessageComponent]
+  imports: [CommonModule, OverlayModule, NzIconModule, NzOutletModule],
+  providers: [NzMessageService],
+  declarations: [NzMessageContainerComponent, NzMessageComponent]
 })
 export class NzMessageModule {}

components/message/message.service.ts

@@ -7,27 +7,23 @@
  */
 
 import { Overlay } from '@angular/cdk/overlay';
-import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector, TemplateRef } from '@angular/core';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Injectable, Injector, TemplateRef } from '@angular/core';
 import { NzSingletonService } from 'ng-zorro-antd/core';
-
-import { NzMessageBaseService } from './base.service';
 import { NzMessageContainerComponent } from './message-container.component';
 import { NzMessageServiceModule } from './message.service.module';
 import { NzMessageData, NzMessageDataFilled, NzMessageDataOptions } from './typings';
 
+let globalCounter = 0;
+
 @Injectable({
   providedIn: NzMessageServiceModule
 })
-export class NzMessageService extends NzMessageBaseService<NzMessageContainerComponent, NzMessageData> {
-  constructor(
-    nzSingletonService: NzSingletonService,
-    overlay: Overlay,
-    injector: Injector,
-    cfr: ComponentFactoryResolver,
-    appRef: ApplicationRef
-  ) {
-    super(nzSingletonService, overlay, NzMessageContainerComponent, injector, cfr, appRef, 'message');
-  }
+export class NzMessageService {
+  private name = 'message-';
+  protected container: NzMessageContainerComponent;
+
+  constructor(private nzSingletonService: NzSingletonService, private overlay: Overlay, private injector: Injector) {}
 
   // Shortcut methods
   success(content: string | TemplateRef<void>, options?: NzMessageDataOptions): NzMessageDataFilled {
@@ -57,4 +53,52 @@ export class NzMessageService extends NzMessageBaseService<NzMessageContainerCom
   ): NzMessageDataFilled {
     return this.createMessage({ type, content }, options);
   }
+
+  remove(messageId?: string): void {
+    if (messageId) {
+      this.container.removeMessage(messageId);
+    } else {
+      this.container.removeMessageAll();
+    }
+  }
+
+  createMessage(message: NzMessageData, options?: NzMessageDataOptions): NzMessageDataFilled {
+    this.container = this.withContainer();
+    this.nzSingletonService.registerSingletonWithKey(this.name, this.container);
+    const resultMessage: NzMessageDataFilled = {
+      ...(message as NzMessageData),
+      ...{
+        createdAt: new Date(),
+        messageId: this.generateMessageId(),
+        options
+      }
+    };
+    this.container.createMessage(resultMessage);
+
+    return resultMessage;
+  }
+
+  protected generateMessageId(): string {
+    return `${this.name}-${globalCounter++}`;
+  }
+
+  // Manually creating container for overlay to avoid multi-checking error, see: https://github.com/NG-ZORRO/ng-zorro-antd/issues/391
+  // NOTE: we never clean up the container component and it's overlay resources, if we should, we need to do it by our own codes.
+  private withContainer(): NzMessageContainerComponent {
+    const containerInstance = this.nzSingletonService.getSingletonWithKey(this.name);
+
+    if (containerInstance) {
+      return containerInstance as NzMessageContainerComponent;
+    }
+    const overlayRef = this.overlay.create({
+      hasBackdrop: false,
+      scrollStrategy: this.overlay.scrollStrategies.noop(),
+      positionStrategy: this.overlay.position().global()
+    });
+    const componentPortal = new ComponentPortal(NzMessageContainerComponent, null, this.injector);
+    const componentRef = overlayRef.attach(componentPortal);
+    const overlayPane = overlayRef.overlayElement;
+    overlayPane.style.zIndex = '1010'; // Patching: assign the same zIndex of ant-message to it's parent overlay panel, to the ant-message's zindex work.
+    return componentRef.instance;
+  }
 }

components/message/message.spec.ts

@@ -39,6 +39,9 @@ describe('message', () => {
 
   beforeEach(inject([NzMessageService, OverlayContainer], (m: NzMessageService, oc: OverlayContainer) => {
     messageService = m;
+    // need init before testing
+    const message = messageService.success('init');
+    messageService.remove(message.messageId);
     // @ts-ignore
     nzConfigService = messageService.container.nzConfigService;
     if (!overlayContainerElement) {

components/message/public-api.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-export * from './base.service';
 export * from './message.service';
 export * from './message.service.module';
 export * from './message.module';

components/modal/demo/footer2.ts

@@ -1,4 +1,4 @@
-/* entryComponents: NzModalCustomFooterComponent */
+/* declarations: NzModalCustomFooterComponent */
 
 import { Component } from '@angular/core';
 import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';

components/modal/demo/service.md

@@ -9,10 +9,6 @@ title:
 
 Modal的service用法，示例中演示了用户自定义模板、自定义component、以及注入模态框实例的方法。
 
-> **注意** 如果使用Component模式，则需要在NgModule中的 `declarations` 和 `entryComponents` 加入自定义的Component
-
 ## en-US
 
 Usage of Modal's service, examples demonstrate user-defined templates, custom components, and methods for injecting modal instances.
-
-> **NOTE** If you use Component mode, you need to add your custom Component into `declarations` and `entryComponents` for a `NgModule`