fix(module:code-editor): fix config (#4436)

components/code-editor/doc/index.en-US.md

@@ -14,7 +14,15 @@ Support monaco editor in Angular.
 
 ## API
 
-If you would like to load monaco dynamically, you will need assets of monaco editor itself. You can do that load by adding these lines in angular.json:
+Install `monaco-editor` in your project first:
+
+```sh
+npm install monaco-editor
+```
+
+### Dynamic Loading
+
+If you would like to load monaco dynamically (which means you load resources of monaco editor right before you would like to use it), you will need to register assets of monaco editor itself. You can do that by adding these lines in angular.json file:
 
 ```diff
 "assets": [
@@ -26,13 +34,21 @@ If you would like to load monaco dynamically, you will need assets of monaco edi
 ],
 ```
 
+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 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.
 
-And don't forget to install `monaco-editor`.
+### Static Loading
 
-```sh
-npm install monaco-editor
-```
+Sometimes you need to load AMD module dynamically. But since monaco editor's loader patches `window[require]`, you can not use AMD loader like requireJS. In this situation you need to enable static loading.
+
+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`.
+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.
+
+If you use static loading, you should not add assets of monaco editor to your project by modifying angular.json file.
 
 ### nz-code-editor
 
@@ -64,15 +80,3 @@ You can inject an object that implements `NzCodeEditorConfig` with the injection
 | `onFirstEditorInit` | The hook invoked when the first monaco editor is initialized | `() => void` | - |
 | `onInit` | The hook invoked every time a monaco editor is initialized | `() => void`  | - |
 | `useStaticLoading` | Load monaco editor statically | `boolean` | `false` |
-
-## Static Loading
-
-Sometimes you need to load AMD module dynamically. But since monaco editor's loader patches `window[require]`, you can not use AMD loader like requireJS. In this situation you need to enable static loading.
-
-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`.
-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.
-
-If you use static loading, you should not add assets of monaco editor to your project by modifying angular.json file.

components/code-editor/doc/index.zh-CN.md

@@ -15,7 +15,17 @@ monaco editor 组件。
 
 ## API
 
-如果你使用动态加载的引入方式，你就需要在运行时加载 monaco editor 本身的资源。在 `angular.json` 中添加：
+别忘记先安装 monaco editor：
+
+```sh
+npm install monaco-editor
+```
+
+### 动态加载
+
+如果你使用动态加载，你就需要在运行时加载 monaco editor 本身的资源。
+
+在 angular.json 中添加：
 
 ```diff
 "assets": [
@@ -27,13 +37,23 @@ monaco editor 组件。
 ],
 ```
 
-> 如果你使用静态加载，你就无需修改 angular.json 文件。详见下文。
+这样就 OK 了！CodeEditor 组件在需要加载 monaco editor 时自动去 /assets/vs/ 目录下查询。
 
-另外别忘记安装 monaco editor：
+如果你的静态资源都部署在 CDN 上，你就无须修改 angular.json 文件，但你必须配置 `NZ_CODE_EDITOR_CONFIG` 下的 `assetsRoot` 项。例如你将 monaco editor 的资源放置在了 https://mycdn.com/assets/vs ，你就需要传递 `{ assetsRoot: 'https://mycdn.com/assets' }` 。
 
-```sh
-npm install monaco-editor
-```
+> 如果你使用静态加载，你就无需修改 angular.json 文件，详见下文。
+
+### 静态加载
+
+有时候你可能需要在运行时加载 AMD module，但 monaco editor 的加载文件 loader.js patch 了 `window[require]` 属性，导致你无法使用 requireJS 等模块加载库，这时，你可以启用静态加载功能。
+
+方法是使用 Microsoft 提供的 [monaco-editor-webpack-plugin](https://github.com/microsoft/monaco-editor-webpack-plugin) 插件。
+
+1. 在注入 code editor 组件的全局配置项时，请启用 `useStaticLoading` 。
+2. 创建一个 webpack.partial.js 文件，根据插件文档进行相应的配置。
+3. 使用自定义脚本加载器，例如 [ngx-build-plus](https://github.com/manfredsteyer/ngx-build-plus)，在打包时加载这个 webpack 配置。
+
+使用静态加载时，你无需在 angular.json 文件中注册 monaco editor 的资源。
 
 ### nz-code-editor
 
@@ -65,15 +85,3 @@ npm install monaco-editor
 | `onFirstEditorInit` | 当第一个编辑器请求初始化时触发的钩子 | `() => void` | - |
 | `onInit` | 每个编辑器请求初始化时触发的钩子  | `() => void`  | - |
 | `useStaticLoading` | 使用静态加载 | `boolean` | `false` |
-
-## 静态加载
-
-有时候你可能需要动态加载 AMD module，但 monaco editor 的加载文件 loader.js patch 了 `window[require]` 对象，导致你无法使用 requireJS 等模块加载库，这时，你可以启用静态加载功能。
-
-方法是使用 Microsoft 提供的 [monaco-editor-webpack-plugin](https://github.com/microsoft/monaco-editor-webpack-plugin) 插件。
-
-1. 在注入 code editor 组件的全局配置项时，请启用 `useStaticLoading`
-2. 创建一个 webpack.partial.js 文件，根据插件文档进行相应的配置
-3. 使用自定义脚本加载器，例如 [ngx-build-plus](https://github.com/manfredsteyer/ngx-build-plus)，在打包时加载这个 webpack 配置
-
-使用静态加载时，你无需在 angular.json 文件中注册 monaco editor 的资源。

components/code-editor/nz-code-editor.service.ts

@@ -61,7 +61,8 @@ export class NzCodeEditorService {
     }
 
     this.document = _document;
-    this.option = { ...(this.config || {}).defaultEditorOption, ...(globalConfig || {}).defaultEditorOption };
+    this.config = { ...config, ...globalConfig };
+    this.option = this.config.defaultEditorOption || {};
 
     this.nzConfigService.getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME).subscribe(() => {
       const newGlobalConfig = this.nzConfigService.getConfigForComponent(NZ_CONFIG_COMPONENT_NAME);