refactor(module:empty): migrate demo to standalone mode (#8765)

components/empty/demo/basic.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
+
 @Component({
   selector: 'nz-demo-empty-basic',
-  template: ` <nz-empty></nz-empty> `
+  standalone: true,
+  imports: [NzEmptyModule],
+  template: `<nz-empty></nz-empty>`
 })
 export class NzDemoEmptyBasicComponent {}

components/empty/demo/config.ts

@@ -1,9 +1,34 @@
 import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
+import { NzCascaderModule } from 'ng-zorro-antd/cascader';
 import { NzConfigService } from 'ng-zorro-antd/core/config';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzListModule } from 'ng-zorro-antd/list';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { NzTransferModule } from 'ng-zorro-antd/transfer';
+import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 
 @Component({
   selector: 'nz-demo-empty-config',
+  standalone: true,
+  imports: [
+    FormsModule,
+    NzCascaderModule,
+    NzDividerModule,
+    NzEmptyModule,
+    NzIconModule,
+    NzListModule,
+    NzSelectModule,
+    NzSwitchModule,
+    NzTableModule,
+    NzTransferModule,
+    NzTreeSelectModule
+  ],
   template: `
     <nz-switch
       [nzUnCheckedChildren]="'default'"

components/empty/demo/customize.ts

@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
+
 @Component({
   selector: 'nz-demo-empty-customize',
+  standalone: true,
+  imports: [NzButtonModule, NzEmptyModule],
   template: `
     <nz-empty
       nzNotFoundImage="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"

components/empty/demo/description.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
+
 @Component({
   selector: 'nz-demo-empty-description',
-  template: ` <nz-empty [nzNotFoundContent]="null"></nz-empty> `
+  standalone: true,
+  imports: [NzEmptyModule],
+  template: `<nz-empty [nzNotFoundContent]="null"></nz-empty>`
 })
 export class NzDemoEmptyDescriptionComponent {}

components/empty/demo/simple.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
+
 @Component({
   selector: 'nz-demo-empty-simple',
-  template: ` <nz-empty nzNotFoundImage="simple"></nz-empty> `
+  standalone: true,
+  imports: [NzEmptyModule],
+  template: `<nz-empty nzNotFoundImage="simple"></nz-empty>`
 })
 export class NzDemoEmptySimpleComponent {}

components/empty/empty.spec.ts

@@ -1,33 +1,26 @@
-import { CommonModule } from '@angular/common';
-import { Component, DebugElement, NgModule, TemplateRef, ViewChild, inject } from '@angular/core';
+import { Component, DebugElement, TemplateRef, ViewChild, inject } from '@angular/core';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { NZ_CONFIG, NzConfigService } from 'ng-zorro-antd/core/config';
+import { NzI18nService } from 'ng-zorro-antd/i18n';
+import en_US from 'ng-zorro-antd/i18n/languages/en_US';
+import { NzListModule } from 'ng-zorro-antd/list';
 
-import { ComponentBed, createComponentBed } from '../core/testing/component-bed';
-import { NzI18nService } from '../i18n';
-import en_US from '../i18n/languages/en_US';
-import { NzListModule } from '../list';
 import { NZ_EMPTY_COMPONENT_NAME } from './config';
 import { NzEmbedEmptyComponent } from './embed-empty.component';
 import { NzEmptyComponent } from './empty.component';
 import { NzEmptyModule } from './empty.module';
 
 describe('nz-empty', () => {
   describe('basic', () => {
-    let testBed: ComponentBed<NzEmptyTestBasicComponent>;
     let fixture: ComponentFixture<NzEmptyTestBasicComponent>;
     let testComponent: NzEmptyTestBasicComponent;
     let emptyComponent: DebugElement;
 
     beforeEach(() => {
-      testBed = createComponentBed(NzEmptyTestBasicComponent, {
-        imports: [NzEmptyModule]
-      });
-
-      fixture = testBed.fixture;
-      testComponent = testBed.component;
+      fixture = TestBed.createComponent(NzEmptyTestBasicComponent);
+      testComponent = fixture.debugElement.componentInstance;
       emptyComponent = fixture.debugElement.query(By.directive(NzEmptyComponent));
 
       fixture.detectChanges();
@@ -112,7 +105,7 @@ describe('nz-empty', () => {
       const contentEl = emptyComponent.nativeElement.lastElementChild;
       expect(contentEl.innerText.trim()).toBe('暂无数据');
 
-      testBed.bed.inject(NzI18nService).setLocale(en_US);
+      TestBed.inject(NzI18nService).setLocale(en_US);
       fixture.detectChanges();
       expect(contentEl.innerText.trim()).toBe('No Data');
     });
@@ -129,10 +122,7 @@ describe('nz-empty', () => {
 
     describe('service method', () => {
       beforeEach(() => {
-        TestBed.configureTestingModule({
-          imports: [NzEmptyTestServiceModule]
-        }).compileComponents();
-
+        TestBed.configureTestingModule({}).compileComponents();
         fixture = TestBed.createComponent(NzEmptyTestServiceComponent);
         testComponent = fixture.debugElement.componentInstance;
       });
@@ -167,7 +157,7 @@ describe('nz-empty', () => {
         expect(embedComponent.nativeElement.innerText).toBe('list');
 
         // Null.
-        testComponent.noResult = null;
+        testComponent.noResult = null!;
         refresh();
         expect(embedComponent).toBeTruthy();
         expect(emptyComponent).toBeFalsy();
@@ -232,9 +222,17 @@ describe('nz-empty', () => {
     describe('service injection', () => {
       beforeEach(() => {
         TestBed.configureTestingModule({
-          imports: [NzEmptyTestInjectionModule]
+          providers: [
+            {
+              provide: NZ_CONFIG,
+              useValue: {
+                empty: {
+                  nzDefaultEmptyContent: NzEmptyTestCustomComponent
+                }
+              }
+            }
+          ]
         }).compileComponents();
-
         fixture = TestBed.createComponent(NzEmptyTestServiceComponent);
         testComponent = fixture.debugElement.componentInstance;
       });
@@ -264,6 +262,8 @@ describe('nz-empty', () => {
 });
 
 @Component({
+  standalone: true,
+  imports: [NzEmptyModule],
   template: `
     <nz-empty [nzNotFoundImage]="image" [nzNotFoundContent]="content" [nzNotFoundFooter]="footer">
       <ng-template #imageTpl>Image</ng-template>
@@ -277,12 +277,14 @@ export class NzEmptyTestBasicComponent {
   @ViewChild('contentTpl', { static: false }) contentTpl!: TemplateRef<void>;
   @ViewChild('footerTpl', { static: false }) footerTpl!: TemplateRef<void>;
 
-  image?: TemplateRef<void> | string;
+  image!: TemplateRef<void> | string;
   content?: TemplateRef<void> | string;
   footer?: TemplateRef<void> | string;
 }
 
 @Component({
+  standalone: true,
+  imports: [NzListModule],
   template: `
     <nz-list [nzDataSource]="[]" [nzNoResult]="noResult"></nz-list>
     <ng-template #tpl let-component>
@@ -293,7 +295,7 @@ export class NzEmptyTestBasicComponent {
 export class NzEmptyTestServiceComponent {
   @ViewChild('tpl', { static: false }) template!: TemplateRef<string>;
 
-  noResult?: string | null;
+  noResult!: string;
 
   constructor(public configService: NzConfigService) {}
 
@@ -307,34 +309,10 @@ export class NzEmptyTestServiceComponent {
 }
 
 @Component({
-  // eslint-disable-next-line
+  standalone: true,
   selector: 'nz-empty-test-custom',
-  template: ` <div>I'm in component {{ name }}</div> `
+  template: `<div>I'm in component {{ name }}</div>`
 })
 export class NzEmptyTestCustomComponent {
   name = inject(NZ_EMPTY_COMPONENT_NAME);
 }
-
-@NgModule({
-  imports: [CommonModule, NzEmptyModule, NzListModule],
-  declarations: [NzEmptyTestServiceComponent, NzEmptyTestCustomComponent],
-  exports: [NzEmptyTestServiceComponent, NzEmptyTestCustomComponent]
-})
-export class NzEmptyTestServiceModule {}
-
-@NgModule({
-  imports: [CommonModule, NzEmptyModule, NzListModule],
-  declarations: [NzEmptyTestServiceComponent, NzEmptyTestCustomComponent],
-  exports: [NzEmptyTestServiceComponent, NzEmptyTestCustomComponent],
-  providers: [
-    {
-      provide: NZ_CONFIG,
-      useValue: {
-        empty: {
-          nzDefaultEmptyContent: NzEmptyTestCustomComponent
-        }
-      }
-    }
-  ]
-})
-export class NzEmptyTestInjectionModule {}