NG-ZORRO · hsuanxyz · Sep 17, 2020 · Sep 17, 2020
@@ -4,17 +4,17 @@
  */
 
 import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable, Optional } from '@angular/core';
-import { NzConfigKey, NzConfigService } from 'ng-zorro-antd/core/config';
-import { PREFIX, warn, warnDeprecation } from 'ng-zorro-antd/core/logger';
+import { Inject, Injectable } from '@angular/core';
+import { CodeEditorConfig, NzConfigService } from 'ng-zorro-antd/core/config';
+import { PREFIX, warn } from 'ng-zorro-antd/core/logger';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { BehaviorSubject, Observable, of as observableOf, Subject } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
-import { JoinedEditorOptions, NzCodeEditorConfig, NzCodeEditorLoadingStatus, NZ_CODE_EDITOR_CONFIG } from './typings';
+import { JoinedEditorOptions, NzCodeEditorLoadingStatus } from './typings';
 
 declare const monaco: NzSafeAny;
 
-const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'codeEditor';
+const NZ_CONFIG_MODULE_NAME = 'codeEditor';
 
 function tryTriggerFunc(fn?: (...args: NzSafeAny[]) => NzSafeAny): (...args: NzSafeAny) => void {
   return (...args: NzSafeAny[]) => {
@@ -33,25 +33,15 @@ export class NzCodeEditorService {
   private loaded$ = new Subject<boolean>();
   private loadingStatus = NzCodeEditorLoadingStatus.UNLOAD;
   private option: JoinedEditorOptions = {};
-  private config: NzCodeEditorConfig;
+  private config: CodeEditorConfig;
 
   option$ = new BehaviorSubject<JoinedEditorOptions>(this.option);
 
-  constructor(
-    private readonly nzConfigService: NzConfigService,
-    @Inject(DOCUMENT) _document: NzSafeAny,
-    @Inject(NZ_CODE_EDITOR_CONFIG) @Optional() config?: NzCodeEditorConfig
-  ) {
+  constructor(private readonly nzConfigService: NzConfigService, @Inject(DOCUMENT) _document: NzSafeAny) {
     const globalConfig = this.nzConfigService.getConfigForComponent(NZ_CONFIG_MODULE_NAME);
 
-    if (config) {
-      warnDeprecation(
-        `'NZ_CODE_EDITOR_CONFIG' is deprecated and will be removed in next minor version. Please use 'NzConfigService' instead.`
-      );
-    }
-
     this.document = _document;
-    this.config = { ...config, ...globalConfig };
+    this.config = { ...globalConfig };
     this.option = this.config.defaultEditorOption || {};
 
     this.nzConfigService.getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME).subscribe(() => {
@@ -62,14 +52,6 @@ export class NzCodeEditorService {
     });
   }
 
-  updateDefaultOption(option: JoinedEditorOptions): void {
-    warnDeprecation(
-      `'updateDefaultOption' is deprecated and will be removed in next minor version. Please use 'set' of 'NzConfigService' instead.`
-    );
-
-    this._updateDefaultOption(option);
-  }
-
   private _updateDefaultOption(option: JoinedEditorOptions): void {
     this.option = { ...this.option, ...option };
     this.option$.next(this.option);

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NzCodeEditorService } from 'ng-zorro-antd/code-editor';
+import { NzConfigService } from 'ng-zorro-antd/core/config';
 
 @Component({
   selector: 'nz-demo-code-editor-config',
@@ -29,10 +29,16 @@ export class NzDemoCodeEditorConfigComponent {
 
 You can refer to [this issue](https://github.com/Microsoft/monaco-editor/issues/338).`;
 
-  constructor(private nzCodeEditorService: NzCodeEditorService) {}
+  constructor(private nzConfigService: NzConfigService) {}
 
   onDarkModeChange(dark: boolean): void {
     this.dark = dark;
-    this.nzCodeEditorService.updateDefaultOption({ theme: dark ? 'vs-dark' : 'vs' });
+    const defaultEditorOption = this.nzConfigService.getConfigForComponent('codeEditor')?.defaultEditorOption || {};
+    this.nzConfigService.set('codeEditor', {
+      defaultEditorOption: {
+        ...defaultEditorOption,
+        theme: dark ? 'vs-dark' : 'vs'
+      }
+    });
   }
 }
@@ -49,7 +49,7 @@ If you would like to load monaco dynamically (which means you load resources of
 ],
 ```
 
-If you deploy resources of monaco editor on CDN, you won't need to modift angular.json. Instead, you should a `NZ_CONFIG_EDITOR_CONFIG` with `assetsRoot` property set. For example, you put resources of monaco editor on https://mycdn.com/assets/vs, you should provide `{ assets: 'https://mycdn.com/assets/vs' }`.
+If you deploy resources of monaco editor on CDN, you won't need to modify angular.json. Instead, you must configure the `assetsRoot` property via `NzConfigService`. For example, you put resources of monaco editor on https://mycdn.com/assets/vs, you should provide `{ assets: 'https://mycdn.com/assets/vs' }`.
 
 > If you are going to use static loading (which we will explain in detail at the bottom of this page), you don't need to modify angular.json file.
 
@@ -59,7 +59,7 @@ Sometimes you need to load AMD module dynamically. But since monaco editor's loa
 
 With help of [monaco-editor-webpack-plguin](https://github.com/microsoft/monaco-editor-webpack-plugin) by Microsoft, you can do that in a convenient way.
 
-1. Please inject a `NZ_CODE_EDITOR_CONFIG` with `useStaticLoading` to be `true`.
+1. Provide the value of `NZ_CONFIG` in `app.module` and set `useStaticLoading` in the `codeEditor` property to `true`.
 2. Create a webpack.partial.js file, and config monaco-editor-webpack-loader.
 3. Use custom webpack loader like [ngx-build-plus](https://github.com/manfredsteyer/ngx-build-plus) to load this webpack config.
 
@@ -83,9 +83,11 @@ If you use static loading, you should not add assets of monaco editor to your pr
 | --- | --- |
 | `layout()` | Force monaco editor to re-render itself |
 
-### NZ_CODE_EDITOR_CONFIG
+### Global Configuration
 
-You can inject an object that implements `NzCodeEditorConfig` with the injection token `NZ_CODE_EDITOR_CONFIG`.
+You can set the default configuration of the `CodeEditor` component through the `set` method of `NzConfigService`.
+
+#### CodeEditorConfig
 
 | Parameter | Description | Type | Default |
 | --- | --- | --- | --- |

@@ -56,7 +56,7 @@ npm install monaco-editor
 
 这样就 OK 了！CodeEditor 组件在需要加载 monaco editor 时自动去 /assets/vs/ 目录下查询。
 
-如果你的静态资源都部署在 CDN 上，你就无须修改 angular.json 文件，但你必须配置 `NZ_CODE_EDITOR_CONFIG` 下的 `assetsRoot` 项。例如你将 monaco editor 的资源放置在了 https://mycdn.com/assets/vs ，你就需要传递 `{ assetsRoot: 'https://mycdn.com/assets' }` 。
+如果你的静态资源都部署在 CDN 上，你就无须修改 angular.json 文件，但你必须通过 `NzConfigService` 配置 `assetsRoot` 属性。例如你将 monaco editor 的资源放置在了 https://mycdn.com/assets/vs ，你就需要传递 `{ assetsRoot: 'https://mycdn.com/assets' }` 。
 
 > 如果你使用静态加载，你就无需修改 angular.json 文件，详见下文。
 
@@ -66,7 +66,7 @@ npm install monaco-editor
 
 方法是使用 Microsoft 提供的 [monaco-editor-webpack-plugin](https://github.com/microsoft/monaco-editor-webpack-plugin) 插件。
 
-1. 在注入 code editor 组件的全局配置项时，请启用 `useStaticLoading` 。
+1. 在 `app.module` 中提供 `NZ_CONFIG` 的值，并设置 `codeEditor` 属性下的 `useStaticLoading` 为 `true` 。
 2. 创建一个 webpack.partial.js 文件，根据插件文档进行相应的配置。
 3. 使用自定义脚本加载器，例如 [ngx-build-plus](https://github.com/manfredsteyer/ngx-build-plus)，在打包时加载这个 webpack 配置。
 
@@ -90,9 +90,11 @@ npm install monaco-editor
 | --- | --- |
 | `layout()` | 强制组件重新渲染 |
 
-### NZ_CODE_EDITOR_CONFIG
+### 全局配置
 
-你可以通过注入令牌 `NZ_CODE_EDITOR_CONFIG` 提供一个符合 `NzCodeEditorConfig` 接口的对象，来进行配置、使用钩子或设置编辑器默认选项。
+你可以通过 `NzConfigService` 的 `set` 方法，设置 `CodeEditor` 组件的默认配置。
+
+#### CodeEditorConfig
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |

@@ -3,8 +3,6 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { InjectionToken } from '@angular/core';
-import { SafeUrl } from '@angular/platform-browser';
 import { editor } from 'monaco-editor';
 import IStandAloneEditorConstructionOptions = editor.IStandaloneEditorConstructionOptions;
 import IDiffEditorConstructionOptions = editor.IDiffEditorConstructionOptions;
@@ -20,19 +18,3 @@ export enum NzCodeEditorLoadingStatus {
   LOADING = 'loading',
   LOADED = 'LOADED'
 }
-
-export interface NzCodeEditorConfig {
-  assetsRoot?: string | SafeUrl;
-  defaultEditorOption?: JoinedEditorOptions;
-  useStaticLoading?: boolean;
-
-  onLoad?(): void;
-  onFirstEditorInit?(): void;
-  onInit?(): void;
-}
-
-export const NZ_CODE_EDITOR_CONFIG = new InjectionToken<NzCodeEditorConfig>('nz-code-editor-config');
-
-export function NZ_CODE_EDITOR_CONFIG_FACTORY(): NzCodeEditorConfig {
-  return {};
-}
@@ -27,6 +27,16 @@ export const propertyNames: VersionChanges<PropertyNameUpgradeData> = {
           whitelist: {classes: ['NzTreeNode']}
         }
       ]
+    },
+    {
+      pr: 'https://github.com/NG-ZORRO/ng-zorro-antd/pull/5798',
+      changes: [
+        {
+          replace: 'updateDefaultOption',
+          replaceWith: '/** TODO(NG-ZORRO V10) updateDefaultOption is deprecated, Please use `set` of `NzConfigService` instead. **/updateDefaultOption',
+          whitelist: {classes: ['NzCodeEditorService']}
+        }
+      ]
     }
   ]
 };
@@ -62,12 +62,12 @@ describe('injection tokens migration', () => {
       await runMigration();
 
       const tokensWarn = [
-        '/index.ts@2:16 - Found deprecated symbol "NZ_NOTIFICATION_CONFIG" which has been removed. Use global config to ' +
-        'instead please.',
-        '/index.ts@2:40 - Found deprecated symbol "NZ_MESSAGE_CONFIG" which has been removed. Use global config to ' +
-        'instead please.',
-        '/index.ts@2:59 - Found deprecated symbol "NZ_DEFAULT_EMPTY_CONTENT" which has been removed. Use global config ' +
-        'to instead please.'
+        '/index.ts@2:16 - Found deprecated symbol "NZ_NOTIFICATION_CONFIG" which has been removed. ' +
+        'Please use \'NzConfigService\' instead.',
+        '/index.ts@2:40 - Found deprecated symbol "NZ_MESSAGE_CONFIG" which has been removed. ' +
+        'Please use \'NzConfigService\' instead.',
+        '/index.ts@2:59 - Found deprecated symbol "NZ_DEFAULT_EMPTY_CONTENT" which has been removed. ' +
+        'Please use \'NzConfigService\' instead.'
       ];
 
       tokensWarn.forEach(warn => {
@@ -81,19 +81,22 @@ describe('injection tokens migration', () => {
       import { NZ_DEFAULT_EMPTY_CONTENT } from 'ng-zorro-antd/empty';
       import { NZ_MESSAGE_CONFIG } from 'ng-zorro-antd/message';
       import { NZ_ICON_DEFAULT_TWOTONE_COLOR } from 'ng-zorro-antd';
+      import { NZ_CODE_EDITOR_CONFIG } from 'ng-zorro-antd/code-editor';
 
       `);
       await runMigration();
 
       const tokensWarn = [
-        '/index.ts@2:16 - Found deprecated symbol "NZ_NOTIFICATION_CONFIG" which has been removed. Use global config ' +
-        'to instead please.',
-        '/index.ts@3:16 - Found deprecated symbol "NZ_DEFAULT_EMPTY_CONTENT" which has been removed. Use global config ' +
-        'to instead please.',
-        '/index.ts@4:16 - Found deprecated symbol "NZ_MESSAGE_CONFIG" which has been removed. Use global config to ' +
-        'instead please.',
-        '/index.ts@5:16 - Found deprecated symbol "NZ_ICON_DEFAULT_TWOTONE_COLOR" which has been removed. Use global config to ' +
-        'instead please.'
+        '/index.ts@2:16 - Found deprecated symbol "NZ_NOTIFICATION_CONFIG" which has been removed. ' +
+        'Please use \'NzConfigService\' instead.',
+        '/index.ts@3:16 - Found deprecated symbol "NZ_DEFAULT_EMPTY_CONTENT" which has been removed. ' +
+        'Please use \'NzConfigService\' instead.',
+        '/index.ts@4:16 - Found deprecated symbol "NZ_MESSAGE_CONFIG" which has been removed. ' +
+        'Please use \'NzConfigService\' instead.',
+        '/index.ts@5:16 - Found deprecated symbol "NZ_ICON_DEFAULT_TWOTONE_COLOR" which has been removed. ' +
+        'Please use \'NzConfigService\' instead.',
+        '/index.ts@6:16 - Found deprecated symbol "NZ_CODE_EDITOR_CONFIG" which has been removed. ' +
+        'Please use \'NzConfigService\' instead.'
       ];
 
       tokensWarn.forEach(warn => {

@@ -2,9 +2,17 @@ import { TargetVersion } from '@angular/cdk/schematics';
 import { InjectionTokenRule } from './injection-token-rule';
 
 export class GlobalConfigRule extends InjectionTokenRule {
-  enabled = this.targetVersion === TargetVersion.V9;
-  tokens = ['NZ_MESSAGE_CONFIG', 'NZ_NOTIFICATION_CONFIG', 'NZ_DEFAULT_EMPTY_CONTENT', 'NZ_ICON_DEFAULT_TWOTONE_COLOR'];
+  enabled = this.targetVersion === TargetVersion.V9 || this.targetVersion === TargetVersion.V10;
+  tokens =
+    (
+      this.targetVersion === TargetVersion.V9 &&
+      ['NZ_MESSAGE_CONFIG', 'NZ_NOTIFICATION_CONFIG', 'NZ_DEFAULT_EMPTY_CONTENT', 'NZ_ICON_DEFAULT_TWOTONE_COLOR', 'NZ_CODE_EDITOR_CONFIG']
+    ) ||
+    (
+      this.targetVersion === TargetVersion.V10 &&
+      ['NZ_CODE_EDITOR_CONFIG']
+    )
   getFailure(token: string): string {
-    return `Found deprecated symbol "${token}" which has been removed. Use global config to instead please.`;
+    return `Found deprecated symbol "${token}" which has been removed. Please use 'NzConfigService' instead.`;
   }
 }