feat: add provide function (#7952)

* feat(core:config): add provideNzConfig function

* doc: update

* doc: update

* add provideNzWave and provideNzI18n

Author: MunMunMiao

components/core/config/config.spec.ts

@@ -4,7 +4,7 @@ import { By } from '@angular/platform-browser';
 
 import { NzButtonComponent, NzButtonModule } from 'ng-zorro-antd/button';
 
-import { NZ_CONFIG } from './config';
+import { provideNzConfig } from './config';
 import { NzConfigService } from './config.service';
 
 @Component({
@@ -56,14 +56,11 @@ describe('nz global config', () => {
           imports: [NzButtonModule],
           declarations: [NzGlobalConfigTestBasicComponent],
           providers: [
-            {
-              provide: NZ_CONFIG,
-              useValue: {
-                button: {
-                  nzSize: 'large'
-                }
+            provideNzConfig({
+              button: {
+                nzSize: 'large'
               }
-            }
+            })
           ]
         }).compileComponents();
       })

components/core/config/config.ts

@@ -4,7 +4,7 @@
  */
 
 import { Direction } from '@angular/cdk/bidi';
-import { InjectionToken, TemplateRef, Type } from '@angular/core';
+import { EnvironmentProviders, InjectionToken, makeEnvironmentProviders, TemplateRef, Type } from '@angular/core';
 import { SafeUrl } from '@angular/platform-browser';
 
 import { ThemeType } from '@ant-design/icons-angular';
@@ -381,3 +381,7 @@ export type NzConfigKey = keyof NzConfig;
  * User should provide an object implements this interface to set global configurations.
  */
 export const NZ_CONFIG = new InjectionToken<NzConfig>('nz-config');
+
+export function provideNzConfig(config: NzConfig): EnvironmentProviders {
+  return makeEnvironmentProviders([{ provide: NZ_CONFIG, useValue: config }]);
+}

components/core/wave/nz-wave.directive.ts

@@ -10,6 +10,8 @@ import {
   Inject,
   InjectionToken,
   Input,
+  makeEnvironmentProviders,
+  EnvironmentProviders,
   NgZone,
   OnDestroy,
   OnInit,
@@ -30,13 +32,10 @@ export const NZ_WAVE_GLOBAL_DEFAULT_CONFIG: NzWaveConfig = {
   disabled: false
 };
 
-export const NZ_WAVE_GLOBAL_CONFIG = new InjectionToken<NzWaveConfig>('nz-wave-global-options', {
-  providedIn: 'root',
-  factory: NZ_WAVE_GLOBAL_CONFIG_FACTORY
-});
+export const NZ_WAVE_GLOBAL_CONFIG = new InjectionToken<NzWaveConfig>('nz-wave-global-options');
 
-export function NZ_WAVE_GLOBAL_CONFIG_FACTORY(): NzWaveConfig {
-  return NZ_WAVE_GLOBAL_DEFAULT_CONFIG;
+export function provideNzWave(config: NzWaveConfig): EnvironmentProviders {
+  return makeEnvironmentProviders([{ provide: NZ_WAVE_GLOBAL_CONFIG, useValue: config }]);
 }
 
 @Directive({

components/core/wave/nz-wave.module.ts

@@ -6,11 +6,12 @@
 import { PlatformModule } from '@angular/cdk/platform';
 import { NgModule } from '@angular/core';
 
-import { NzWaveDirective } from './nz-wave.directive';
+import { NzWaveDirective, provideNzWave, NZ_WAVE_GLOBAL_DEFAULT_CONFIG } from './nz-wave.directive';
 
 @NgModule({
   imports: [PlatformModule],
   exports: [NzWaveDirective],
-  declarations: [NzWaveDirective]
+  declarations: [NzWaveDirective],
+  providers: [provideNzWave(NZ_WAVE_GLOBAL_DEFAULT_CONFIG)]
 })
 export class NzWaveModule {}

components/i18n/nz-i18n.service.spec.ts

@@ -1,7 +1,9 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component, Inject, OnDestroy } from '@angular/core';
 import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
 import { Subscription } from 'rxjs';
 
+import { NZ_I18N, provideNzI18n } from 'ng-zorro-antd/i18n/nz-i18n.token';
+
 import cs_CZ from './languages/cs_CZ';
 import de_DE from './languages/de_DE';
 import en_US from './languages/en_US';
@@ -20,7 +22,8 @@ describe('i18n service', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [NzI18nTestComponent],
-      imports: [NzI18nModule]
+      imports: [NzI18nModule],
+      providers: [provideNzI18n(DEFAULT_LAN)]
     }).compileComponents();
   });
 
@@ -42,6 +45,11 @@ describe('i18n service', () => {
       console.log(i18nEN, i18nDE, i18nCS, i18nKA);
     });
 
+    it('should be provide interface be right', () => {
+      fixture = TestBed.createComponent(NzI18nTestComponent);
+      expect(fixture.componentInstance.locale === DEFAULT_LAN).toBe(true);
+    });
+
     it('should be auto default zh_CN', () => {
       expect(testComponent.locale.locale).toBe(DEFAULT_LAN.locale);
     });
@@ -79,11 +87,9 @@ https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md`
   template: ''
 })
 export class NzI18nTestComponent implements OnDestroy {
-  locale!: NzI18nInterface;
-
   private localeSubscription: Subscription;
 
-  constructor(private nzI18nService: NzI18nService) {
+  constructor(private nzI18nService: NzI18nService, @Inject(NZ_I18N) public locale: NzI18nInterface) {
     this.localeSubscription = this.nzI18nService.localeChange.subscribe(locale => {
       this.updateLocale(locale);
     });

components/i18n/nz-i18n.token.ts

@@ -3,11 +3,15 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { InjectionToken } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, EnvironmentProviders } from '@angular/core';
 
 import { DateLocale, NzI18nInterface } from './nz-i18n.interface';
 
 export const NZ_I18N = new InjectionToken<NzI18nInterface>('nz-i18n');
 
+export function provideNzI18n(config: NzI18nInterface): EnvironmentProviders {
+  return makeEnvironmentProviders([{ provide: NZ_I18N, useValue: config }]);
+}
+
 /** Locale for date operations, should import from date-fns, see example: https://github.com/date-fns/date-fns/blob/v1.30.1/src/locale/zh_cn/index.js */
 export const NZ_DATE_LOCALE = new InjectionToken<DateLocale>('nz-date-locale');

docs/animations.en-US.md

@@ -67,19 +67,15 @@ Add the following configuration while invoking components' services.
 
 ### Turn Off The Wave Effect
 
-Some components use dynamic styles to support wave effects, so their styles are unable to be override directly. Instead, you can set the provider `NZ_WAVE_GLOBAL_CONFIG` or use
+Some components use dynamic styles to support wave effects, so their styles are unable to be override directly. Instead, you can use `provideNzWave` or use
  `NoopAnimationsModule` to turn off the wave effects.
 
 ```ts
+import { provideNzWave } from 'ng-zorro-antd/core/wave';
+
 @NgModule({
-  ...
-  providers   : [
-      ...,
-      {
-        provide: NZ_WAVE_GLOBAL_CONFIG, useValue: {
-          disabled: true
-        }
-      }
-   ]
+  providers: [
+    provideNzWave({ disabled: true })
+  ]
 })
 ```

docs/animations.zh-CN.md

@@ -65,19 +65,15 @@ import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
 
 ### 关闭波浪效果
 
-部分组件（如：Button）为了支持波纹效果，使用了动态样式，因此无法直接使用样式覆盖。但是你可以通过设置提供商 `NZ_WAVE_GLOBAL_CONFIG`
+部分组件（如：Button）为了支持波纹效果，使用了动态样式，因此无法直接使用样式覆盖。但是你可以通过 `provideNzWave`
 或者使用 `NoopAnimationsModule` 来关闭波浪效果。
 
 ```ts
+import { provideNzWave } from 'ng-zorro-antd/core/wave';
+
 @NgModule({
-  ...
-  providers   : [
-      ...,
-      {
-        provide: NZ_WAVE_GLOBAL_CONFIG, useValue: {
-          disabled: true
-        }
-      }
+  providers: [
+    provideNzWave({ disabled: true })
    ]
 })
 ```

docs/global-config.en-US.md

@@ -7,10 +7,10 @@ We add a **global configuration** support to many components. You can define the
 
 ## How to Use?
 
-In order to provide default configurations in certain components, please pass an object that implements the interface `NzConfig` through the injection token `NZ_CONFIG` in the root injector. For example:
+In order to provide default configurations in certain components, please use `provideNzConfig` function. object providing implements interface `NzConfig`For example:
 
 ```typescript
-import { NzConfig, NZ_CONFIG } from 'ng-zorro-antd/core/config';
+import { NzConfig, provideNzConfig } from 'ng-zorro-antd/core/config';
 
 const ngZorroConfig: NzConfig = {
   message: { nzTop: 120 },
@@ -23,7 +23,7 @@ const ngZorroConfig: NzConfig = {
     CommonModule
   ],
   providers: [
-    { provide: NZ_CONFIG, useValue: ngZorroConfig }
+    provideNzConfig(ngZorroConfig)
   ],
   bootstrap: [AppComponent]
 })

docs/global-config.zh-CN.md

@@ -7,10 +7,10 @@ title: 全局配置项
 
 ## 如何使用
 
-想要为某些组件提供默认配置项，请在根注入器中根据注入令牌 `NZ_CONFIG` 提供一个符合 `NzConfig` 接口的对象，例如：
+想要为某些组件提供默认配置项, 可以使用 `provideNzConfig` 函数，传入一个符合 `NzConfig` 接口的对象。例如：
 
 ```typescript
-import { NzConfig, NZ_CONFIG } from 'ng-zorro-antd/core/config';
+import { NzConfig, provideNzConfig } from 'ng-zorro-antd/core/config';
 
 const ngZorroConfig: NzConfig = {
   // 注意组件名称没有 nz 前缀
@@ -24,7 +24,7 @@ const ngZorroConfig: NzConfig = {
     CommonModule
   ],
   providers: [
-    { provide: NZ_CONFIG, useValue:  ngZorroConfig  }
+    provideNzConfig(ngZorroConfig)
   ],
   bootstrap: [AppComponent]
 })