feat(root): make nz-root optional

src/components/ng-zorro-antd.module.ts

@@ -108,6 +108,7 @@ export { NzModalSubject } from './modal/nz-modal-subject.service';
 // Tokens (eg. global services' config)
 export { NZ_MESSAGE_CONFIG } from './message/nz-message-config';
 export { NZ_NOTIFICATION_CONFIG } from './notification/nz-notification-config';
+export { NZ_ROOT_CONFIG, NzRootConfig } from './root/nz-root-config';
 
 // ---------------------------------------------------------
 // | Root module

src/components/root/nz-root-config.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+
+export interface NzRootConfig {
+    extraFontName: string;
+    extraFontUrl: string;
+}
+
+export const NZ_ROOT_CONFIG = new InjectionToken<NzRootConfig>('NzRootConfig');

src/components/root/nz-root-style.component.ts

@@ -0,0 +1,11 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    template      : ``,
+    styleUrls     : [
+        '../style/index.less',
+        './style/index.less',
+    ],
+    encapsulation : ViewEncapsulation.None,
+})
+export class NzRootStyleComponent { }

src/components/root/nz-root.component.ts

@@ -9,14 +9,9 @@ import { DOCUMENT } from '@angular/common';
 
 @Component({
   selector     : '[nz-root],nz-root',
-  encapsulation: ViewEncapsulation.None,
   template     : `
     <ng-content></ng-content>
   `,
-  styleUrls    : [
-    '../style/index.less',
-    './style/index.less',
-  ]
 })
 export class NzRootComponent implements OnInit {
 

src/components/root/nz-root.module.spec.ts

@@ -0,0 +1,45 @@
+import { ComponentFactoryResolver, Injector, ComponentRef, ComponentFactory } from '@angular/core';
+import { async, inject, TestBed } from '@angular/core/testing';
+import { DOCUMENT } from '@angular/common';
+import { NzRootModule } from './nz-root.module';
+import { NzRootStyleComponent } from './nz-root-style.component';
+
+describe('NzRootModule', () => {
+  let ngModule: NzRootModule;
+  let mockDocument: Document;
+  let mockInjector: Injector;
+  let mockFactoryResolver: ComponentFactoryResolver;
+  let mockElement: HTMLDivElement;
+  let mockComponentFactory: ComponentFactory<NzRootStyleComponent>;
+  let mockComponentRef: ComponentRef<NzRootStyleComponent>;
+
+  beforeEach(() => {
+    mockDocument = { createElement: () => null } as any;
+    mockInjector = {} as any;
+    mockFactoryResolver = { resolveComponentFactory: () => null } as any;
+    mockElement = {} as any;
+    mockComponentFactory = { create: () => null } as any;
+    mockComponentRef = { destroy: () => null } as any;
+
+    spyOn(mockDocument, 'createElement').and.returnValue(mockElement);
+    spyOn(mockComponentRef, 'destroy');
+    spyOn(mockComponentFactory, 'create').and.returnValue(mockComponentRef);
+    spyOn(mockFactoryResolver, 'resolveComponentFactory').and.returnValue(mockComponentFactory);
+  });
+
+  beforeEach(() => {
+    ngModule = new NzRootModule(mockDocument, mockInjector, mockFactoryResolver);
+  });
+
+  it('should create style component when start', () => {
+    expect(mockDocument.createElement).toHaveBeenCalledWith('div');
+    expect(mockFactoryResolver.resolveComponentFactory).toHaveBeenCalledWith(NzRootStyleComponent);
+    expect(mockComponentFactory.create).toHaveBeenCalledWith(mockInjector, null, mockElement);
+  });
+
+  it('should destroy style component when terminate', () => {
+    ngModule.ngOnDestroy();
+
+    expect(mockComponentRef.destroy).toHaveBeenCalled();
+  })
+});

src/components/root/nz-root.module.ts

@@ -1,12 +1,24 @@
-import { NgModule } from '@angular/core';
+import { NgModule, OnDestroy, ComponentRef, ComponentFactoryResolver, Inject, Injector } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import { NzRootComponent } from './nz-root.component';
-import { CommonModule } from '@angular/common';
+import { NzRootStyleComponent } from './nz-root-style.component';
 
 @NgModule({
-  exports     : [ NzRootComponent ],
-  declarations: [ NzRootComponent ],
-  imports     : [ CommonModule ]
+  exports         : [ NzRootComponent ],
+  declarations    : [ NzRootComponent, NzRootStyleComponent ],
+  imports         : [ CommonModule ],
+  entryComponents : [ NzRootStyleComponent ],
 })
+export class NzRootModule implements OnDestroy {
+  private styleHostComponent: ComponentRef<NzRootStyleComponent>;
 
-export class NzRootModule {
+  constructor(@Inject(DOCUMENT) _document: Document, injector: Injector, resolver: ComponentFactoryResolver) {
+    const componentFactory = resolver.resolveComponentFactory(NzRootStyleComponent);
+    const div = _document.createElement('div');
+    this.styleHostComponent = componentFactory.create(injector, null, div);
+  }
+
+  ngOnDestroy() {
+    this.styleHostComponent.destroy();
+  }
 }