This repository has been archived by the owner on Aug 1, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
14-es2015.4204470308f7e79ccb0d.js
1 lines (1 loc) · 68.9 KB
/
14-es2015.4204470308f7e79ccb0d.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{YtDt:function(e,t,a){"use strict";a.r(t);var n=a("8Y7J"),o=a("0qEG");class d{constructor(){this.item={cols:1,urls:{"en-US":"packages/schematics/docs/add.en-US.md","zh-CN":"packages/schematics/docs/add.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><h2 id="Overview">Overview<a onclick="window.location.hash = \'Overview\'" class="anchor">#</a></h2><pre class="hljs language-bash"><code>ng add ng-alain\n# If you want to create an English version, then:\nng add ng-alain --defaultLanguage=en</code></pre><h2 id="Options">Options<a onclick="window.location.hash = \'Options\'" class="anchor">#</a></h2><table><thead><tr><th>Name</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>--form</code></td><td><code>true</code></td><td>Whether include dynamic form</td></tr><tr><td><code>--mock</code></td><td><code>true</code></td><td>Whether include mock</td></tr><tr><td><code>--hmr</code></td><td><code>true</code></td><td>Whether include HMR</td></tr><tr><td><code>--defaultLanguage</code></td><td><code>zh</code></td><td>Default language, <a href="/cli/plugin/en#Supported-language-list" data-url="/cli/plugin/en#Supported-language-list">Supported language list</a></td></tr><tr><td><code>--codeStyle</code></td><td><code>false</code></td><td>Whether include code style</td></tr><tr><td><code>--i18n</code></td><td><code>false</code></td><td>Whether include i18n</td></tr><tr><td><code>--g2</code></td><td><code>false</code></td><td>Whether include g2</td></tr><tr><td><code>--npm</code></td><td><code>false</code></td><td>Whether include <code>npm</code> taobao mirror configuration file (Chinese users)</td></tr><tr><td><code>--yarn</code></td><td><code>false</code></td><td>Whether include <code>yarn</code> taobao mirror configuration file (Chinese users)</td></tr></tbody></table><p>For example, generate a project with i18n:</p><pre class="hljs language-bash"><code>ng add ng-alain --i18n --defaultLanguage=en</code></pre><p>See more <a href="/cli/plugin" data-url="/cli/plugin">plugins</a>.</p></article></section>',meta:{order:10,title:"ng add",subtitle:"Create scaffold",type:"Documents"},toc:[{id:"Overview",title:"Overview",h:2},{id:"Options",title:"Options",h:2}]},"zh-CN":{content:'<section class="markdown"><article><h2 id="\u547d\u4ee4\u683c\u5f0f">\u547d\u4ee4\u683c\u5f0f<a onclick="window.location.hash = \'\u547d\u4ee4\u683c\u5f0f\'" class="anchor">#</a></h2><pre class="hljs language-bash"><code>ng add ng-alain\n# \u5982\u679c\u4f60\u60f3\u521b\u5efa\u4e00\u4e2a\u82f1\u6587\u7248\u672c\uff0c\u5219\uff1a\nng add ng-alain --defaultLanguage=en</code></pre><h2 id="\u989d\u5916\u53c2\u6570">\u989d\u5916\u53c2\u6570<a onclick="window.location.hash = \'\u989d\u5916\u53c2\u6570\'" class="anchor">#</a></h2><table><thead><tr><th>\u53c2\u6570\u540d</th><th>\u9ed8\u8ba4\u503c</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>--form</code></td><td><code>true</code></td><td>\u662f\u5426\u9700\u8981\u52a8\u6001\u8868\u5355</td></tr><tr><td><code>--mock</code></td><td><code>true</code></td><td>\u662f\u5426\u9700\u8981 mock \u529f\u80fd</td></tr><tr><td><code>--hmr</code></td><td><code>true</code></td><td>\u662f\u5426\u9700\u8981 hmr \u70ed\u66ff\u6362</td></tr><tr><td><code>--defaultLanguage</code></td><td><code>zh</code></td><td>\u9ed8\u8ba4\u8bed\u8a00\uff0c<a href="/cli/plugin/zh#\u652f\u6301\u8bed\u8a00\u5217\u8868" data-url="/cli/plugin/zh#\u652f\u6301\u8bed\u8a00\u5217\u8868">\u652f\u6301\u8bed\u8a00\u5217\u8868</a></td></tr><tr><td><code>--codeStyle</code></td><td><code>false</code></td><td>\u662f\u5426\u9700\u8981\u4ee3\u7801\u98ce\u683c</td></tr><tr><td><code>--i18n</code></td><td><code>false</code></td><td>\u662f\u5426\u9700\u8981\u56fd\u9645\u5316\u652f\u6301</td></tr><tr><td><code>--g2</code></td><td><code>false</code></td><td>\u662f\u5426\u9700\u8981 G2 \u56fe\u8868</td></tr><tr><td><code>--npm</code></td><td><code>false</code></td><td>\u662f\u5426\u9700\u8981 npm \u6dd8\u5b9d\u955c\u50cf\u914d\u7f6e\u6587\u4ef6</td></tr><tr><td><code>--yarn</code></td><td><code>false</code></td><td>\u662f\u5426\u9700\u8981 yarn \u6dd8\u5b9d\u955c\u50cf\u914d\u7f6e\u6587\u4ef6</td></tr></tbody></table><p>\u4f8b\u5982\u751f\u6210\u4e00\u4e2a\u5e26\u6709\u56fd\u9645\u5316\u9879\u76ee\uff1a</p><pre class="hljs language-bash"><code>ng add ng-alain --i18n --defaultLanguage=en</code></pre><p>\u67e5\u770b\u66f4\u591a<a href="/cli/plugin" data-url="/cli/plugin">\u63d2\u4ef6</a>\u3002</p></article></section>',meta:{order:10,title:"ng add",subtitle:"\u521b\u5efa\u811a\u624b\u67b6",type:"Documents"},toc:[{id:"\u547d\u4ee4\u683c\u5f0f",title:"\u547d\u4ee4\u683c\u5f0f",h:2},{id:"\u989d\u5916\u53c2\u6570",title:"\u989d\u5916\u53c2\u6570",h:2}]}},demo:!1},this.codes=[]}}class l{constructor(){this.item={cols:1,urls:{"en-US":"packages/schematics/docs/default.en-US.md","zh-CN":"packages/schematics/docs/default.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>ng-alain provides a number of build modules, page templates, which have same option parameters, such as: <code>spec</code> for generating test pages, <code>flat</code> for flat directories, <code>inline-template</code> for inline template, etc.</p><p>However, parameters can be preset via <code>angular.json</code>.</p><pre class="hljs language-json"><code>// angular.json\n{\n "schematics": {\n "ng-alain:module": {\n "routing": true,\n "spec": false\n },\n "ng-alain:list": {\n "spec": false\n },\n "ng-alain:edit": {\n "spec": false,\n "modal": true\n },\n "ng-alain:view": {\n "spec": false,\n "modal": true\n },\n "ng-alain:curd": {\n "spec": false\n },\n "@schematics/angular:module": {\n "routing": true,\n "spec": false\n },\n "@schematics/angular:component": {\n "spec": false,\n "flat": false,\n "inlineStyle": true,\n "inlineTemplate": false\n },\n "@schematics/angular:directive": {\n "spec": false\n },\n "@schematics/angular:service": {\n "spec": false\n }\n }\n}</code></pre><p>You can execute the following command to get the parameter description:</p><pre class="hljs language-bash"><code>ng g ng-alain:list --help</code></pre></article></section>',meta:{order:90,title:"Default parameter",type:"Documents"},toc:[]},"zh-CN":{content:'<section class="markdown"><article><p>ng-alain \u63d0\u4f9b\u8bf8\u591a\u751f\u6210\u6a21\u5757\u3001\u9875\u6a21\u677f\uff0c\u4f46\u5b9e\u9645\u4e0a\u7ee7\u627f\u4e86\u539f\u751f Angular CLI \u7ec4\u4ef6\u9875\u7684\u4e00\u4e9b\u53c2\u6570\uff0c\u4f8b\u5982\uff1a<code>spec</code> \u8868\u793a\u662f\u5426\u751f\u6210\u6d4b\u8bd5\u9875\u3001<code>flat</code> \u8868\u793a\u6241\u5e73\u76ee\u5f55\u3001<code>inline-template</code> \u8868\u793a\u5185\u8054\u6a21\u677f\u5185\u5bb9\u7b49\u3002</p><p>\u7136\u800c\uff0c\u5bf9\u4e8e\u8fd9\u4e9b\u53c2\u6570\u6211\u4eec\u6ca1\u6709\u5fc5\u8981\u6bcf\u4e00\u6b21\u6267\u884c\u547d\u4ee4\u65f6\u90fd\u5199\u4e00\u904d\uff0c\u53ef\u4ee5\u901a\u8fc7 <code>angular.json</code> \u5bf9\u53c2\u6570\u9884\u8bbe\u3002</p><p>\u4f8b\u5982\uff1a</p><pre class="hljs language-json"><code>// angular.json\n{\n "schematics": {\n "ng-alain:module": {\n "routing": true,\n "spec": false\n },\n "ng-alain:list": {\n "spec": false\n },\n "ng-alain:edit": {\n "spec": false,\n "modal": true\n },\n "ng-alain:view": {\n "spec": false,\n "modal": true\n },\n "ng-alain:curd": {\n "spec": false\n },\n "@schematics/angular:module": {\n "routing": true,\n "spec": false\n },\n "@schematics/angular:component": {\n "spec": false,\n "flat": false,\n "inlineStyle": true,\n "inlineTemplate": false\n },\n "@schematics/angular:directive": {\n "spec": false\n },\n "@schematics/angular:service": {\n "spec": false\n }\n }\n}</code></pre><p>\u53ef\u4ee5\u901a\u8fc7\u6267\u884c\u4e0b\u5217\u547d\u4ee4\u6765\u83b7\u53d6\u6240\u6709\u53c2\u6570\u63cf\u8ff0\uff1a</p><pre class="hljs language-bash"><code>ng g ng-alain:list --help</code></pre></article></section>',meta:{order:90,title:"\u9ed8\u8ba4\u53c2\u6570",type:"Documents"},toc:[]}},demo:!1},this.codes=[]}}class c{constructor(){this.item={cols:1,urls:{"en-US":"packages/schematics/docs/generate.en-US.md","zh-CN":"packages/schematics/docs/generate.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><h2 id="Foreword">Foreword<a onclick="window.location.hash = \'Foreword\'" class="anchor">#</a></h2><p><code>ng generate</code> (shorthand: <code>ng g</code>) is used to generate business pages. The default Angular Cli template is different from the ng-alain specification. For example, we want to include a <code>SharedModule</code> when generating a module.</p><p>ng-alain adds cool operations based on this.</p><h2 id="Command-format">Command format<a onclick="window.location.hash = \'Command-format\'" class="anchor">#</a></h2><pre class="hljs language-bash"><code>ng g ng-alain:[command name] [name] [options]</code></pre><blockquote><p>ng-alain has own file structure specification, which can cause exceptions when you break this file structure.</p></blockquote><h2 id="Module">Module<a onclick="window.location.hash = \'Module\'" class="anchor">#</a></h2><p>Generate a <code>trade</code> module:</p><pre class="hljs language-bash"><code>ng g ng-alain:module trade</code></pre><p>Will be generated <code>trade.module.ts</code>, <code>trade-routing.module.ts</code> in the <code>routes/trade</code> directory.</p><p>The module imports <code>SharedModule</code> and some import and export specifications, and you can\'t destroy these variable names (like this: <code>COMPONENTS</code>, <code>COMPONENTS_NOROUNT</code>, <code>routes</code>).</p><h2 id="Business-page">Business page<a onclick="window.location.hash = \'Business-page\'" class="anchor">#</a></h2><ul><li><p><code>empty</code> Blank page</p></li><li><p><code>list</code> List page</p></li><li><p><code>edit</code> Edit page</p></li><li><p><code>view</code> View page</p></li><li><p><code>curd</code> List, edit, view pages</p></li></ul><p>Generate a <code>list</code> list page in the <code>trade</code> directory:</p><pre class="hljs language-bash"><code>ng g ng-alain:list list -m=trade</code></pre><p><strong>Note:</strong> <code>-m</code> must be specified because ng-alain thinks the page should be in a specific module, not a ghost.</p><h3 id="Cool">Cool<a onclick="window.location.hash = \'Cool\'" class="anchor">#</a></h3><p>In general, a module might includes the same type of business page, and its file structure might like this:</p><pre class="hljs language-null"><code>sys\n log\n view\n view.component.ts\n edit\n edit.component.ts\n log.component.ts\n sys.module.ts</code></pre><p>So when you want to generate a view page that should be under the <code>log</code> directory (could be set like <code>log/list</code>):</p><pre class="hljs language-bash"><code>ng g ng-alain:view view -m=sys -t=log</code></pre><p><strong>Override the default template pages</strong></p><p>If the default pages generated by commands <code>list</code>, <code>edit</code>, <code>view</code>, and <code>empty</code> are not expected by the business, can be override.</p><p>For example, override the <code>list</code> command default template, create the directory name <code>_list</code> under the root directory <code>_cli-tpl</code>, and the directory structure must be equivalent to the <a target="_blank" href="https://github.com/ng-alain/delon/tree/master/packages/schematics/list/files" data-url="https://github.com/ng-alain/delon/tree/master/packages/schematics/list/files">original list directory</a>.</p><h3 id="edit-&-view-page">edit & view page<a onclick="window.location.hash = \'edit-&-view-page\'" class="anchor">#</a></h3><p>For <code>edit</code>, <code>view</code>, the default is modal render, you can use the page render:</p><pre class="hljs language-bash"><code>ng g ng-alain:edit [page name] --modal=false</code></pre><blockquote><p>If you receive <code>No provider for NzModalRef!</code> error, because of modal component must be opened with <code>nzModalService</code>, and does not need to register into route.</p></blockquote><h2 id="Custom-template-page">Custom template page<a onclick="window.location.hash = \'Custom-template-page\'" class="anchor">#</a></h2><p>In addition to the default, you can also customize the project-level business page.</p><p>For example, to create a custom edit page template, you only need to create the following directory structure in the project\'s root directory:</p><pre class="hljs language-null"><code>\u2514\u2500\u2500 _cli-tpl\n\u2502 \u2514\u2500\u2500 edit // Your template name\n\u2502 \u2514\u2500\u2500 __path__ // (name fixed value)\n\u2502 \u2514\u2500\u2500 __name@dasherize@if-flat__ // (name fixed value)\n\u2502 \u251c\u2500\u2500 __name@dasherize__.component.ts // Component class file (name fixed value)\n\u2502 \u251c\u2500\u2500 __name@dasherize__.component.html // Component html file (name fixed value)\n\u2502 \u2514\u2500\u2500 __name@dasherize__.component.spec.ts // Component spec file (name fixed value)\n\u2514\u2500\u2500 src</code></pre><p>After that, just run:</p><pre class="hljs language-bash"><code>ng g ng-alain:tpl [your template name] [name] -m=trade</code></pre><h3 id="How-to-write-a-template-file">How to write a template file<a onclick="window.location.hash = \'How-to-write-a-template-file\'" class="anchor">#</a></h3><p>In the directory structure of the custom page, the file name begins with the <code>__</code> prefix is a variable placeholder, Cli passes some parameters and methods:</p><table><thead><tr><th>Type</th><th>Name</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>Variable</td><td>project</td><td>-</td><td>Project name</td></tr><tr><td>Variable</td><td>name</td><td>-</td><td>Name, equivalent command line <code><name></code></td></tr><tr><td>Variable</td><td>path</td><td>-</td><td>Target path</td></tr><tr><td>Variable</td><td>flat</td><td><code>false</code></td><td>Whether file is flat</td></tr><tr><td>Variable</td><td>inlineTemplate</td><td><code>false</code></td><td>Whether inline template(Fixed value <code>false</code>)</td></tr><tr><td>Variable</td><td>selector</td><td>-</td><td>Component <code>selector</code></td></tr><tr><td>Variable</td><td>componentName</td><td>-</td><td>Component name</td></tr><tr><td>Variable</td><td>changeDetection</td><td><code>Default</code></td><td>Component <code>changeDetection</code> value</td></tr><tr><td>Variable</td><td>modal</td><td>-</td><td>Whether to use Modal to render</td></tr><tr><td>Method</td><td>decamelize</td><td>-</td><td>Converts a camelized string into all lower case separated by underscores</td></tr><tr><td>Method</td><td>dasherize</td><td>-</td><td>Replaces underscores, spaces, or camelCase with dashes</td></tr><tr><td>Method</td><td>camelize</td><td>-</td><td>Returns the lowerCamelCase form of a string</td></tr><tr><td>Method</td><td>classify</td><td>-</td><td>Returns the UpperCamelCase form of a string</td></tr><tr><td>Method</td><td>underscore</td><td>-</td><td>More general than decamelize. Returns the lower_case_and_underscored</td></tr><tr><td>form of a string.</td></tr><tr><td>Method</td><td>capitalize</td><td>-</td><td>Returns the Capitalized form of a string</td></tr></tbody></table><p>These variables or methods can be used in templates, for example: <code><%=componentName%></code> for component names, <code><% %></code> for JavaScript code. You can refer to:</p><ul><li><p><a target="_blank" href="https://github.com/ng-alain/delon/blob/master/packages/schematics/edit/files/__path__/__name%40dasherize%40if-flat__/__name%40dasherize__.component.html" data-url="https://github.com/ng-alain/delon/blob/master/packages/schematics/edit/files/__path__/__name%40dasherize%40if-flat__/__name%40dasherize__.component.html">delon</a></p></li><li><p><a target="_blank" href="https://github.com/angular/material2/blob/master/src/lib/schematics/dashboard/files/__path__/__name%40dasherize%40if-flat__/__name%40dasherize__.component.html" data-url="https://github.com/angular/material2/blob/master/src/lib/schematics/dashboard/files/__path__/__name%40dasherize%40if-flat__/__name%40dasherize__.component.html">material2</a></p></li></ul><h3 id="Custom-Data">Custom Data<a onclick="window.location.hash = \'Custom-Data\'" class="anchor">#</a></h3><p>The <code>tpl</code> command allows you to process the data further before generating the file, The command will check the <code>_cli-tpl/_fix.js</code> file during execution and call the <code>fix</code> method, which must return a <code>Promise</code> object, for example:</p><blockquote><p><strong>Note: </strong> CLI is a Node JS program, so the syntax is based on Node JS.</p></blockquote><pre class="hljs language-js"><code>function fix(options) {\n return new Promise((resolve) => {\n resolve();\n });\n}\n\nmodule.exports = {\n fix\n};</code></pre><p>The <code>fix</code> method has only an <code>options</code> parameter, which contains the CLI used to generate all parameter data, even if it is undefined, for example:</p><pre class="hljs language-bash"><code>ng g ng-alain:tpl list -m=setting --import-type=UserDto</code></pre><p><code>import-type</code> is not a defined parameter of the command itself, but <code>options</code> will convert these undefined parameters to an <code>extraArgs</code> object, so the <code>options</code> you receive will be:</p><pre class="hljs language-json"><code>{\n "tplName": "test",\n "modal": true,\n ...\n "extraArgs": {\n "import-type": "UserDto"\n }\n}</code></pre><p>The <code>options</code> object is passed to the template engine, so you can attach some processed data to <code>options</code> and use them in the template file, for example:</p><pre class="hljs language-json"><code>{\n "tplName": "test",\n "modal": true,\n ...\n "extraArgs": {\n "import-type": "UserDto",\n "newData": "asdf"\n }\n}</code></pre><p>You can apply <code>newData</code> to the template, for example <code>__name@dasherize__.component.html</code>:</p><pre class="hljs language-html"><code><page-header></page-header>\n<%= extraArgs.newData %></code></pre><p>The result is:</p><pre class="hljs language-html"><code><page-header></page-header>\nasdf</code></pre></article></section>',meta:{order:20,title:"ng g",subtitle:"Business page",type:"Documents"},toc:[{id:"Foreword",title:"Foreword",h:2},{id:"Command-format",title:"Command format",h:2},{id:"Module",title:"Module",h:2},{id:"Business-page",title:"Business page",h:2},{id:"Cool",title:"Cool",h:3},{id:"edit-&-view-page",title:"edit & view page",h:3},{id:"Custom-template-page",title:"Custom template page",h:2},{id:"How-to-write-a-template-file",title:"How to write a template file",h:3},{id:"Custom-Data",title:"Custom Data",h:3}]},"zh-CN":{content:'<section class="markdown"><article><h2 id="\u5199\u5728\u524d\u9762">\u5199\u5728\u524d\u9762<a onclick="window.location.hash = \'\u5199\u5728\u524d\u9762\'" class="anchor">#</a></h2><p><code>ng generate</code>\uff08\u7b80\u5199\uff1a<code>ng g</code>\uff09\u7528\u4e8e\u751f\u6210\u4e1a\u52a1\u7ec4\u4ef6\u9875\uff0c\u9ed8\u8ba4 Angular \u6240\u63d0\u4f9b\u7684\u6a21\u677f\u8ddf ng-alain \u6240\u9700\u8981\u7684\u4f1a\u6709\u4e00\u4e9b\u4e0d\u540c\uff0c\u4f8b\u5982\u6211\u4eec\u5e0c\u671b\u751f\u6210\u4e00\u4e2a\u6a21\u5757\u65f6\u5e94\u8be5\u5305\u62ec\u5bfc\u5165 <code>SharedModule</code>\u3002</p><p>ng-alain \u5728\u6b64\u57fa\u7840\u4e0a\u589e\u52a0\u4e86\u5f88\u591a\u5f88\u9177\u7684\u9a9a\u64cd\u4f5c\u3002</p><h2 id="\u547d\u4ee4\u683c\u5f0f">\u547d\u4ee4\u683c\u5f0f<a onclick="window.location.hash = \'\u547d\u4ee4\u683c\u5f0f\'" class="anchor">#</a></h2><pre class="hljs language-bash"><code>ng g ng-alain:[command name] [name] [options]</code></pre><blockquote><p>ng-alain \u6709\u81ea\u5df1\u7684\u4e00\u5957\u6587\u4ef6\u7ec4\u7ec7\u7ed3\u6784\uff0c\u5f53\u4f60\u7834\u574f\u8fd9\u4e9b\u7ed3\u6784\u65f6\uff0c\u53ef\u80fd\u4f1a\u5bfc\u81f4\u4e0b\u5217\u6307\u4ee4\u4ea7\u751f\u5f02\u5e38\u3002</p></blockquote><h2 id="Module-\u6a21\u5757">Module \u6a21\u5757<a onclick="window.location.hash = \'Module-\u6a21\u5757\'" class="anchor">#</a></h2><p>\u751f\u6210\u4e00\u4e2a <code>trade</code> \u6a21\u5757\uff1a</p><pre class="hljs language-bash"><code>ng g ng-alain:module trade</code></pre><p>\u4f1a\u5728 <code>routes/trade</code> \u751f\u6210\u4e24\u4e2a\u6587\u4ef6 <code>trade.module.ts</code>\u3001<code>trade-routing.module.ts</code>\uff0c\u4f60\u65e0\u6cd5\u6307\u5b9a\u4e0d\u751f\u6210 <code>*-routing.module.ts</code> \u56e0\u4e3a\u8fd9\u662f ng-alain \u7684\u4efb\u6027\u3002</p><p>\u6a21\u5757\u5185\u5bb9\u5305\u62ec\u4e86\u5bfc\u5165 <code>SharedModule</code> \u4ee5\u53ca\u4e00\u4e9b\u7edf\u4e00\u6027\u5bfc\u5165\u4e0e\u5bfc\u51fa\u7684\u65b9\u5f0f\uff0c\u5e76\u4e14\u4f60\u4e0d\u53ef\u80fd\u7834\u574f\u8fd9\u4e9b\u53d8\u91cf\u540d\uff08\u4f8b\u5982\uff1a<code>COMPONENTS</code>\u3001<code>COMPONENTS_NOROUNT</code>\u3001<code>routes</code>\uff09\u3002</p><h2 id="\u4e1a\u52a1\u9875">\u4e1a\u52a1\u9875<a onclick="window.location.hash = \'\u4e1a\u52a1\u9875\'" class="anchor">#</a></h2><p>\u76ee\u524d\u5305\u542b\u7684\u4e1a\u52a1\u7ec4\u4ef6\u9875\uff0c\u5305\u62ec\uff1a</p><ul><li><p><code>empty</code> \u7a7a\u767d\u9875</p></li><li><p><code>list</code> \u5217\u8868\u9875</p></li><li><p><code>edit</code> \u7f16\u8f91\u9875</p></li><li><p><code>view</code> \u67e5\u770b\u9875</p></li><li><p><code>curd</code> \u5217\u8868\u3001\u7f16\u8f91\u3001\u67e5\u770b</p></li></ul><p>\u5728 <code>trade</code> \u4e0b\u751f\u6210 <code>list</code> \u5217\u8868\u9875\uff1a</p><pre class="hljs language-bash"><code>ng g ng-alain:list list -m=trade</code></pre><p><strong>\u6ce8\u610f\uff1a</strong> <code>-m</code> \u662f\u5fc5\u987b\u6307\u5b9a\u7684\uff0c\u56e0\u4e3a ng-alain \u8ba4\u4e3a\u9875\u9762\u5e94\u8be5\u5728\u67d0\u4e2a\u5177\u4f53\u7684\u6a21\u5757\u91cc\uff0c\u800c\u4e0d\u662f\u5e7d\u7075\u3002</p><h3 id="\u9a9a\u64cd\u4f5c">\u9a9a\u64cd\u4f5c<a onclick="window.location.hash = \'\u9a9a\u64cd\u4f5c\'" class="anchor">#</a></h3><p>\u4e00\u822c\u800c\u8a00\uff0c\u4e00\u4e2a\u6a21\u5757\u53ef\u80fd\u4f1a\u5305\u542b\u76f8\u540c\u7c7b\u578b\u7684\u4e1a\u52a1\u9875\uff0c\u800c\u6211\u4eec\u4ea7\u751f\u7684\u6587\u4ef6\u7ed3\u6784\u53ef\u80fd\u5e0c\u671b\u662f\uff1a</p><pre class="hljs language-null"><code>sys\n log\n view\n view.component.ts\n log.component.ts\n sys.module.ts</code></pre><p>\u56e0\u6b64\uff0c\u5f53\u4f60\u5e0c\u671b\u751f\u6210\u7684\u67e5\u770b\u5e94\u8be5\u662f\u5728 <code>log</code> \u7ec4\u4ef6\uff08\u652f\u6301 <code>log/list</code> \u591a\u7ea7\u5199\u6cd5\uff09\u4e0b\u9762\u65f6\uff0c\u4f60\u53ef\u4ee5\u8fd9\u6837\u5b50\uff1a</p><pre class="hljs language-bash"><code>ng g ng-alain:view view -m=sys -t=log</code></pre><p><strong>\u8986\u76d6\u9ed8\u8ba4\u6a21\u677f\u9875</strong></p><p>\u82e5 <code>list</code>\u3001<code>edit</code>\u3001<code>view</code>\u3001<code>empty</code> \u56db\u4e2a\u6307\u4ee4\u6240\u4ea7\u751f\u9ed8\u8ba4\u9875\u5e76\u975e\u6240\u5728\u4e1a\u52a1\u671f\u671b\uff0c\u53ef\u4ee5\u8986\u76d6\u5b83\u4eec\u3002</p><p>\u4f8b\u5982\u8986\u76d6 <code>list</code> \u547d\u4ee4\u9ed8\u8ba4\u6a21\u677f\uff0c\u5728\u6839\u76ee\u5f55 <code>_cli-tpl</code> \u4e0b\u521b\u5efa\u76ee\u5f55\u540d <code>_list</code>\uff0c\u76ee\u5f55\u7ed3\u6784\u52a1\u5fc5\u7b49\u540c <a target="_blank" href="https://github.com/ng-alain/delon/tree/master/packages/schematics/list/files" data-url="https://github.com/ng-alain/delon/tree/master/packages/schematics/list/files">\u539f\u59cblist\u76ee\u5f55</a> \u7684\u7ed3\u6784\u3002</p><h3 id="edit-&-view-\u9875">edit & view \u9875<a onclick="window.location.hash = \'edit-&-view-\u9875\'" class="anchor">#</a></h3><p>\u5bf9\u4e8e <code>edit</code>\u3001<code>view</code> \u9ed8\u8ba4\u662f\u4ee5\u6a21\u6001\u6846\u5c55\u793a\u6765\u751f\u6210\uff0c\u4f60\u53ef\u4ee5\u6539\u7528\u9875\u9762\u5c55\u793a\u5219\uff1a</p><pre class="hljs language-bash"><code>ng g ng-alain:edit [page name] --modal=false</code></pre><blockquote><p>\u5982\u679c\u4f60\u4e0d\u5c0f\u5fc3\u5c06\u6536\u5230\u3010No provider for NzModalRef! \u3011\u8868\u660e\u4f60\u628a\u4e00\u4e2a\u9700\u8981\u4f7f\u7528 <code>nzModalService</code> \u6253\u5f00\u7684\u6a21\u6001\u6846\u7ec4\u4ef6\uff0c\u7528\u4e86\u8def\u7531\u6ce8\u518c\u7684\u65b9\u5f0f\u3002\u6253\u5f00\u6a21\u6001\u6846\u7ec4\u4ef6\u65e0\u987b\u6ce8\u518c\u8def\u7531\uff0c\u4f46\u9700\u8981\u6ce8\u518c\u81f3 <code>entryComponents</code>\u3002</p></blockquote><h2 id="\u81ea\u5b9a\u4e49\u9875">\u81ea\u5b9a\u4e49\u9875<a onclick="window.location.hash = \'\u81ea\u5b9a\u4e49\u9875\'" class="anchor">#</a></h2><p>\u9664\u4e0a\u8ff0\u9ed8\u8ba4\u4e1a\u52a1\u9875\u4ee5\u5916\uff0c\u4e5f\u53ef\u4ee5\u81ea\u5b9a\u4e49\u5c5e\u4e8e\u9879\u76ee\u7ea7\u522b\u4e1a\u52a1\u9875\uff0c\u4f8b\u5982\u6211\u4eec\u521b\u5efa\u4e00\u4e2a\u81ea\u5df1\u7684\u7f16\u8f91\u9875\u6a21\u677f\uff0c\u5219\u53ea\u9700\u8981\u5728\u9879\u76ee\u7684\u6839\u76ee\u5f55\u521b\u5efa\u4ee5\u4e0b\u76ee\u5f55\u7ed3\u6784\uff1a</p><pre class="hljs language-null"><code>\u2514\u2500\u2500 _cli-tpl\n\u2502 \u2514\u2500\u2500 edit // \u6a21\u677f\u540d\u79f0\n\u2502 \u2514\u2500\u2500 __path__ // \uff08\u540d\u79f0\u56fa\u5b9a\u503c\uff09\n\u2502 \u2514\u2500\u2500 __name@dasherize@if-flat__ // \uff08\u540d\u79f0\u56fa\u5b9a\u503c\uff09\n\u2502 \u251c\u2500\u2500 __name@dasherize__.component.ts // \u7ec4\u4ef6\u7c7b\u6587\u4ef6\uff08\u540d\u79f0\u56fa\u5b9a\u503c\uff09\n\u2502 \u251c\u2500\u2500 __name@dasherize__.component.html // \u7ec4\u4ef6\u6a21\u677f\u6587\u4ef6\uff08\u540d\u79f0\u56fa\u5b9a\u503c\uff09\n\u2502 \u2514\u2500\u2500 __name@dasherize__.component.spec.ts // \u7ec4\u4ef6\u6d4b\u8bd5\u6587\u4ef6\uff08\u540d\u79f0\u56fa\u5b9a\u503c\uff09\n\u2514\u2500\u2500 src</code></pre><p>\u4e4b\u540e\uff0c\u53ea\u9700\u8981\u8fd0\u884c\uff1a</p><pre class="hljs language-bash"><code>ng g ng-alain:tpl [your template name] [name] -m=trade</code></pre><blockquote><p>\u81ea\u5b9a\u4e49\u9875\u53c2\u6570\u540c\u4e1a\u52a1\u9875\u4e00\u81f4\u3002</p></blockquote><h3 id="\u5982\u4f55\u7f16\u5199\u6a21\u677f\u6587\u4ef6">\u5982\u4f55\u7f16\u5199\u6a21\u677f\u6587\u4ef6<a onclick="window.location.hash = \'\u5982\u4f55\u7f16\u5199\u6a21\u677f\u6587\u4ef6\'" class="anchor">#</a></h3><p>\u5728\u81ea\u5b9a\u4e49\u9875\u7684\u76ee\u5f55\u7ed3\u6784\u91cc\u6211\u4eec\u770b\u5230\u6587\u4ef6\u540d\u4ee5 <code>__</code> \u524d\u7f00\u5f00\u5934\uff0c\u4e8b\u5b9e\u4e0a\u4ed6\u4eec\u662f\u4e00\u4e9b\u53d8\u91cf\b\u5360\u4f4d\u7b26\uff0cCli \u9ed8\u8ba4\u4f20\u9012\u4e00\u4e9b\u53c2\u6570\u53ca\u65b9\u6cd5\uff1a</p><table><thead><tr><th>\u7c7b\u578b</th><th>\u53c2\u6570\u540d</th><th>\u9ed8\u8ba4</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td>\u53d8\u91cf</td><td>project</td><td>-</td><td>\u9879\u76ee\u540d</td></tr><tr><td>\u53d8\u91cf</td><td>name</td><td>-</td><td>\u540d\u79f0\uff0c\u76f8\u5f53\u4e8e\u547d\u4ee4\u884c\u7684 <code><name></code></td></tr><tr><td>\u53d8\u91cf</td><td>path</td><td>-</td><td>\u76ee\u6807\u8def\u5f84</td></tr><tr><td>\u53d8\u91cf</td><td>flat</td><td><code>false</code></td><td>\u6587\u4ef6\u662f\u5426\u6241\u5e73\u7ed3\u6784</td></tr><tr><td>\u53d8\u91cf</td><td>inlineTemplate</td><td><code>false</code></td><td>\u662f\u5426\u5185\u8054\u6a21\u677f\uff08\u56fa\u5b9a\u503c\uff1a<code>false</code>\uff09</td></tr><tr><td>\u53d8\u91cf</td><td>selector</td><td>-</td><td>\u7ec4\u4ef6 <code>selector</code></td></tr><tr><td>\u53d8\u91cf</td><td>componentName</td><td>-</td><td>\u7ec4\u4ef6\u540d\u79f0</td></tr><tr><td>\u53d8\u91cf</td><td>changeDetection</td><td><code>Default</code></td><td>\u7ec4\u4ef6 <code>changeDetection</code> \u503c</td></tr><tr><td>\u53d8\u91cf</td><td>modal</td><td>-</td><td>\u662f\u5426\u4f7f\u7528 Modal \u5c55\u793a</td></tr><tr><td>\u65b9\u6cd5</td><td>decamelize</td><td>-</td><td>\u5c06\u5b57\u6bcd\u4e32\u8f6c\u6362\u4e3a\u7531\u4e0b\u5212\u7ebf\u5206\u9694\u7684\u6240\u6709\u5c0f\u5199\u5b57\u6bcd</td></tr><tr><td>\u65b9\u6cd5</td><td>dasherize</td><td>-</td><td>\u5c06\u7a7a\u683c\u6216\u4e0b\u5212\u7ebf\u7528\u7834\u6298\u53f7\u66ff\u6362</td></tr><tr><td>\u65b9\u6cd5</td><td>camelize</td><td>-</td><td>\u8fd4\u56de\u5b57\u7b26\u4e32\u7684\u5c0f\u9a86\u9a7c\u62fc\u5199\u6cd5\u5f62\u5f0f</td></tr><tr><td>\u65b9\u6cd5</td><td>classify</td><td>-</td><td>\u8fd4\u56de\u5b57\u7b26\u4e32\u7684\u5927\u9a86\u9a7c\u62fc\u5199\u6cd5\u5f62\u5f0f</td></tr><tr><td>\u65b9\u6cd5</td><td>underscore</td><td>-</td><td>\u5c06\u5b57\u6bcd\u4e32\u8f6c\u6362\u4e3a\u7531\u4e0b\u5212\u7ebf\u5206\u9694\u7684\u6240\u6709\u5c0f\u5199\u5b57\u6bcd</td></tr><tr><td>\u65b9\u6cd5</td><td>capitalize</td><td>-</td><td>\u8fd4\u56de\u5b57\u7b26\u4e32\u9996\u5b57\u6bcd\u5927\u5199</td></tr></tbody></table><p>\u8fd9\u4e9b\u53d8\u91cf\u6216\u65b9\u6cd5\u53ef\u4ee5\u5728\u6a21\u677f\u4e2d\u4f7f\u7528\uff0c\u4f8b\u5982\uff1a<code><%=componentName%></code> \u8868\u793a\u7ec4\u4ef6\u540d\uff0c\u4efb\u4f55\u4f7f\u7528 <code><% %></code> \u5185\u53ef\u4ee5\u4f7f\u7528 JavaScript \u4ee3\u7801\u3002\u6709\u5173\u6a21\u677f\u7f16\u5199\u53ef\u4ee5\u53c2\u8003\uff1a</p><ul><li><p><a target="_blank" href="https://github.com/ng-alain/delon/blob/master/packages/schematics/edit/files/__path__/__name%40dasherize%40if-flat__/__name%40dasherize__.component.html" data-url="https://github.com/ng-alain/delon/blob/master/packages/schematics/edit/files/__path__/__name%40dasherize%40if-flat__/__name%40dasherize__.component.html">delon</a></p></li><li><p><a target="_blank" href="https://github.com/angular/material2/blob/master/src/lib/schematics/dashboard/files/__path__/__name%40dasherize%40if-flat__/__name%40dasherize__.component.html" data-url="https://github.com/angular/material2/blob/master/src/lib/schematics/dashboard/files/__path__/__name%40dasherize%40if-flat__/__name%40dasherize__.component.html">material2</a></p></li></ul><h3 id="\u81ea\u5b9a\u4e49\u6570\u636e">\u81ea\u5b9a\u4e49\u6570\u636e<a onclick="window.location.hash = \'\u81ea\u5b9a\u4e49\u6570\u636e\'" class="anchor">#</a></h3><p><code>tpl</code> \u547d\u4ee4\u5728\u751f\u6210\u6587\u4ef6\u4e4b\u524d\u5141\u8bb8\u4f60\u8fdb\u4e00\u6b65\u5904\u7406\u6570\u636e\uff0c\u547d\u4ee4\u5728\u6267\u884c\u8fc7\u7a0b\u4e2d\u4f1a\u68c0\u67e5\u662f\u5426\u5b58\u5728 <code>_cli-tpl/_fix.js</code> \u6587\u4ef6\uff0c\u5e76\u8c03\u7528 <code>fix</code> \u65b9\u6cd5\uff0c\u65b9\u6cd5\u5fc5\u987b\u8fd4\u56de\u4e00\u4e2a <code>Promise</code> \u5bf9\u8c61\uff0c\u4f8b\u5982\uff1a</p><blockquote><p><strong>\u6ce8\uff1a</strong> CLI \u662f\u4e00\u4e2a Node JS \u7a0b\u5e8f\uff0c\u56e0\u6b64\u8bed\u6cd5\u4ee5 Node JS \u4e3a\u51c6\u3002</p></blockquote><pre class="hljs language-js"><code>function fix(options) {\n return new Promise((resolve) => {\n resolve();\n });\n}\n\nmodule.exports = {\n fix\n};</code></pre><p><code>fix</code> \u53ea\u6709\u4e00\u4e2a <code>options</code> \u53c2\u6570\uff0c\u5b83\u5305\u542b CLI \u4ea7\u751f\u6240\u6709\u53c2\u6570\u6570\u636e\uff0c\u54ea\u6015\u662f\u4e00\u4e9b\u672a\u5b9a\u4e49\u53c2\u6570\uff0c\u4f8b\u5982\uff1a</p><pre class="hljs language-bash"><code>ng g ng-alain:tpl list -m=setting --import-type=UserDto</code></pre><p>\u5176\u4e2d <code>import-type</code> \u5e76\u4e0d\u662f\u547d\u4ee4\u81ea\u8eab\u7684\u5b9a\u4e49\u53c2\u6570\uff0c\u4f46 <code>options</code> \u4f1a\u5c06\u8fd9\u4e9b\u672a\u5b9a\u4e49\u53c2\u6570\u8f6c\u6362\u6210 <code>extraArgs</code> \u5bf9\u8c61\uff0c\u56e0\u6b64\u4f60\u63a5\u6536\u5230\u7684 <code>options</code> \u4f1a\u662f:</p><pre class="hljs language-json"><code>{\n "tplName": "test",\n "modal": true,\n ...\n "extraArgs": {\n "import-type": "UserDto"\n }\n}</code></pre><p><code>options</code> \u5bf9\u8c61\u4f1a\u4f20\u9012\u7ed9\u6a21\u677f\u5f15\u64ce\uff0c\u7531\u6b64\u4f60\u53ef\u4ee5\u9644\u52a0\u4e00\u4e9b\u5904\u7406\u540e\u7684\u6570\u636e\u7ed9 <code>options</code>\uff0c\u5e76\u5728\u6a21\u677f\u6587\u4ef6\u5185\u4f7f\u7528\u5b83\u4eec\uff0c\u4f8b\u5982\uff1a</p><pre class="hljs language-json"><code>{\n "tplName": "test",\n "modal": true,\n ...\n "extraArgs": {\n "import-type": "UserDto",\n "newData": "asdf"\n }\n}</code></pre><p>\u4f60\u53ef\u4ee5\u5c06 <code>newData</code> \u5e94\u7528\u5230\u6a21\u677f\u5f53\u4e2d\uff0c\u4f8b\u5982 <code>__name@dasherize__.component.html</code>\uff1a</p><pre class="hljs language-html"><code><page-header></page-header>\n<%= extraArgs.newData %></code></pre><p>\u7ed3\u679c\u4e3a\uff1a</p><pre class="hljs language-html"><code><page-header></page-header>\nasdf</code></pre></article></section>',meta:{order:20,title:"ng g",subtitle:"\u4e1a\u52a1\u9875",type:"Documents"},toc:[{id:"\u5199\u5728\u524d\u9762",title:"\u5199\u5728\u524d\u9762",h:2},{id:"\u547d\u4ee4\u683c\u5f0f",title:"\u547d\u4ee4\u683c\u5f0f",h:2},{id:"Module-\u6a21\u5757",title:"Module \u6a21\u5757",h:2},{id:"\u4e1a\u52a1\u9875",title:"\u4e1a\u52a1\u9875",h:2},{id:"\u9a9a\u64cd\u4f5c",title:"\u9a9a\u64cd\u4f5c",h:3},{id:"edit-&-view-\u9875",title:"edit & view \u9875",h:3},{id:"\u81ea\u5b9a\u4e49\u9875",title:"\u81ea\u5b9a\u4e49\u9875",h:2},{id:"\u5982\u4f55\u7f16\u5199\u6a21\u677f\u6587\u4ef6",title:"\u5982\u4f55\u7f16\u5199\u6a21\u677f\u6587\u4ef6",h:3},{id:"\u81ea\u5b9a\u4e49\u6570\u636e",title:"\u81ea\u5b9a\u4e49\u6570\u636e",h:3}]}},demo:!1},this.codes=[]}}class i{constructor(){this.item={cols:1,urls:{"en-US":"packages/schematics/docs/getting-started.en-US.md","zh-CN":"packages/schematics/docs/getting-started.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><h2 id="Foreword">Foreword<a onclick="window.location.hash = \'Foreword\'" class="anchor">#</a></h2><p>Using ng-alain scaffolding should as use as possible the <code>ng</code> command set provided by the Angular CLI to build, upgrade, etc., ng-alain also implemented some cool things:</p><ul><li><p>Build empty scaffolding with <a href="/cli/add" data-url="/cli/add">ng add</a></p></li><li><p>Use <a href="/cli/generate" data-url="/cli/generate">ng g</a> to build modules, business pages</p></li><li><p>Pluggable <a href="/cli/plugin" data-url="/cli/plugin">plugin</a></p></li></ul><h2 id="Installation">Installation<a onclick="window.location.hash = \'Installation\'" class="anchor">#</a></h2><p>We don\'t recommend directly cloning the git repository, but instead using <code>ng add</code> to build the ng-alain project, there are a few simple steps:</p><ol><li><p>Create an empty angular project</p></li></ol><pre class="hljs language-bash"><code># Make sure you are using the latest version of Angular cli\nng new demo --style less</code></pre><p>2, add ng-alain scaffolding</p><pre class="hljs language-bash"><code>ng add ng-alain --defaultLanguage=en</code></pre><blockquote><p>If you any querstion, please refer to <a href="/docs/faq" data-url="/docs/faq">FAQ</a></p></blockquote><p>3, running</p><pre class="hljs language-bash"><code>ng serve</code></pre><h2 id="How-to-upgrade">How to upgrade<a onclick="window.location.hash = \'How-to-upgrade\'" class="anchor">#</a></h2><p>Suggest Star or Watch <a target="_blank" href="https://github.com/ng-alain/ng-alain" data-url="https://github.com/ng-alain/ng-alain">source code</a> repository to help you better understand change log.</p><p>please refer to <a href="/docs/upgrade" data-url="/docs/upgrade">upgrade</a>.</p></article></section>',meta:{order:1,title:"Getting Started",type:"Documents"},toc:[{id:"Foreword",title:"Foreword",h:2},{id:"Installation",title:"Installation",h:2},{id:"How-to-upgrade",title:"How to upgrade",h:2}]},"zh-CN":{content:'<section class="markdown"><article><h2 id="\u5199\u5728\u524d\u9762">\u5199\u5728\u524d\u9762<a onclick="window.location.hash = \'\u5199\u5728\u524d\u9762\'" class="anchor">#</a></h2><p>\u4f7f\u7528 ng-alain \u811a\u624b\u67b6\u5e94\u5c3d\u53ef\u80fd\u7684\u4f7f\u7528 Angular CLI \u6240\u63d0\u4f9b\u7684 <code>ng</code> \u547d\u4ee4\u7ec4\uff0c\u6765\u6784\u5efa\u3001\u5347\u7ea7\u7b49\uff0cng-alain \u4e5f\u5b9e\u73b0\u4e86\u4e00\u4e9b\u6bd4\u8f83\u9177\u7684\u4e8b\uff1a</p><ul><li><p>\u4f7f\u7528 <a href="/cli/add" data-url="/cli/add">ng add</a> \u6784\u5efa\u7a7a\u811a\u624b\u67b6</p></li><li><p>\u4f7f\u7528 <a href="/cli/generate" data-url="/cli/generate">ng g</a> \u6765\u6784\u5efa\u6a21\u5757\u3001\u4e1a\u52a1\u9875</p></li><li><p>\u53ef\u63d2\u62d4 <a href="/cli/plugin" data-url="/cli/plugin">\u63d2\u4ef6</a></p></li></ul><h2 id="\u5982\u4f55\u4f7f\u7528">\u5982\u4f55\u4f7f\u7528<a onclick="window.location.hash = \'\u5982\u4f55\u4f7f\u7528\'" class="anchor">#</a></h2><p>\u6211\u4eec\u4e0d\u5efa\u8bae\u76f4\u63a5\u514b\u9686 Github \u6e90\u4ee3\u7801\uff0c\u800c\u5e94\u8be5\u4f7f\u7528 <code>ng add</code> \u6765\u6784\u5efa ng-alain \u9879\u76ee\uff0c\u800c\u6784\u5efa\u4e00\u4e2a\u7a7a ng-alain \u53ea\u9700\u8981\u7b80\u5355\u51e0\u4e2a\u52a8\u4f5c\uff1a</p><p>1\u3001\u521b\u5efa\u4e00\u4e2a\u7a7a angular \u9879\u76ee</p><pre class="hljs language-bash"><code># \u786e\u4fdd\u4f7f\u7528\u7684\u662f\u6700\u65b0\u7248\u672c Angular cli\nng new demo --style less</code></pre><p>2\u3001\u6dfb\u52a0 ng-alain \u811a\u624b\u67b6</p><pre class="hljs language-bash"><code>ng add ng-alain\n# \u5982\u679c\u4f60\u60f3\u521b\u5efa\u4e00\u4e2a\u82f1\u6587\u7248\u672c\uff0c\u5219\uff1a\nng add ng-alain --defaultLanguage=en</code></pre><blockquote><p>\u9047\u5230\u95ee\u9898\u8bf7\u9605\u8bfb <a href="/docs/faq" data-url="/docs/faq">\u5e38\u89c1\u95ee\u9898</a></p></blockquote><p>3\u3001\u8fd0\u884c\u9879\u76ee</p><pre class="hljs language-bash"><code>ng serve</code></pre><h2 id="\u5982\u4f55\u5347\u7ea7">\u5982\u4f55\u5347\u7ea7<a onclick="window.location.hash = \'\u5982\u4f55\u5347\u7ea7\'" class="anchor">#</a></h2><p>\u5efa\u8bae Star \u6216 Watch <a target="_blank" href="https://github.com/ng-alain/ng-alain" data-url="https://github.com/ng-alain/ng-alain">\u6e90\u4ee3\u7801</a>\u4ed3\u5e93\uff0c\u6709\u52a9\u4e8e\u4f60\u66f4\u597d\u7684\u5728\u7b2c\u4e00\u65f6\u95f4\u4e86\u89e3\u53d8\u66f4\u7ec6\u8282\u3002</p><p>\u9664DEMO\u793a\u4f8b\u9875\u4ee5\u5916\uff0c\u4f1a\u6709\u4e00\u4e9b\u5f71\u54cd\u5916\uff0c\u5bf9\u4e8e\u5927\u7248\u672c\u4f1a\u63d0\u4f9b <code>ng update</code> \u6765\u89e3\u51b3\u7834\u574f\u6027\u53d8\u66f4\uff0c\u5bf9\u4e8e\u5176\u4ed6\u60c5\u51b5\u7684\u5347\u7ea7\u8bf7\u53c2\u8003 <a href="/docs/upgrade" data-url="/docs/upgrade">\u5347\u7ea7\u811a\u624b\u67b6</a>\u3002</p></article></section>',meta:{order:1,title:"\u5f00\u59cb\u4f7f\u7528",type:"Documents"},toc:[{id:"\u5199\u5728\u524d\u9762",title:"\u5199\u5728\u524d\u9762",h:2},{id:"\u5982\u4f55\u4f7f\u7528",title:"\u5982\u4f55\u4f7f\u7528",h:2},{id:"\u5982\u4f55\u5347\u7ea7",title:"\u5982\u4f55\u5347\u7ea7",h:2}]}},demo:!1},this.codes=[]}}class s{constructor(){this.item={cols:1,urls:{"en-US":"packages/schematics/docs/plugin.en-US.md","zh-CN":"packages/schematics/docs/plugin.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><h2 id="Foreword">Foreword<a onclick="window.location.hash = \'Foreword\'" class="anchor">#</a></h2><p>Plugins are the add and remove of optional features, such as when you don\'t need code style (although I don\'t think so), only need to:</p><pre class="hljs language-bash"><code>ng g ng-alain:plugin codeStyle -t=remove</code></pre><p>Or add code style:</p><pre class="hljs language-bash"><code>ng g ng-alain:plugin codeStyle</code></pre><h2 id="Command-format">Command format<a onclick="window.location.hash = \'Command-format\'" class="anchor">#</a></h2><pre class="hljs language-bash"><code>ng g ng-alain:plugin [plugin name] -t=[add | remove]</code></pre><p>The <code>[plugin name]</code> is plugin name, <code>-t</code> supports two values <code>add</code> (default) and <code>remove</code>.</p><h2 id="List-of-plugins">List of plugins<a onclick="window.location.hash = \'List-of-plugins\'" class="anchor">#</a></h2><h3 id="g2">g2<a onclick="window.location.hash = \'g2\'" class="anchor">#</a></h3><pre class="hljs language-bash"><code># add\nng g ng-alain:plugin g2\n# remove\nng g ng-alain:plugin g2 -t=remove</code></pre><blockquote><p>For more details, please refer to G2 <a href="/chart" data-url="/chart">Development Documentation</a>.</p></blockquote><h3 id="codeStyle">codeStyle<a onclick="window.location.hash = \'codeStyle\'" class="anchor">#</a></h3><p>Code style rules:</p><ul><li><p>Verify typescript with <a target="_blank" href="https://github.com/palantir/tslint" data-url="https://github.com/palantir/tslint">tslint</a></p></li><li><p>Verify less with <a target="_blank" href="https://github.com/stylelint/stylelint" data-url="https://github.com/stylelint/stylelint">stylelint</a></p></li><li><p>Use <a target="_blank" href="https://github.com/prettier/prettier" data-url="https://github.com/prettier/prettier">prettier</a> code formatting</p></li><li><p>Use <a target="_blank" href="https://github.com/typicode/husky" data-url="https://github.com/typicode/husky">husky</a> and <a target="_blank" href="https://github.com/okonet/lint-staged" data-url="https://github.com/okonet/lint-staged">lint-staged</a> to code verify and code format when git add</p></li></ul><pre class="hljs language-bash"><code># add\nng g ng-alain:plugin codeStyle\n# remove\nng g ng-alain:plugin codeStyle -t=remove</code></pre><h3 id="hmr">hmr<a onclick="window.location.hash = \'hmr\'" class="anchor">#</a></h3><p>Support HMR.</p><pre class="hljs language-bash"><code># add\nng g ng-alain:plugin hmr\n# remove\nng g ng-alain:plugin hmr -t=remove</code></pre><p>After installation, you can start HMR in the development environment:</p><pre class="hljs language-bash"><code>npm run hmr</code></pre><h3 id="docker">docker<a onclick="window.location.hash = \'docker\'" class="anchor">#</a></h3><p>Support for Docker deployment.</p><pre class="hljs language-bash"><code># add\nng g ng-alain:plugin docker\n# remove\nng g ng-alain:plugin docker -t=remove</code></pre><h3 id="defaultLanguage">defaultLanguage<a onclick="window.location.hash = \'defaultLanguage\'" class="anchor">#</a></h3><p>Change the current default language, refer to: <a href="/docs/i18n#\u9ed8\u8ba4\u8bed\u8a00" data-url="/docs/i18n#\u9ed8\u8ba4\u8bed\u8a00">I18n - Default Language</a></p><pre class="hljs language-bash"><code># change to [en]\nng g ng-alain:plugin defaultLanguage --defaultLanguage=en\n# change to [zh]\nng g ng-alain:plugin defaultLanguage --defaultLanguage=zh\n# change to [zh-tw]\nng g ng-alain:plugin defaultLanguage --defaultLanguage=zh-tw</code></pre><h4 id="Supported-language-list">Supported language list<a onclick="window.location.hash = \'Supported-language-list\'" class="anchor">#</a></h4><table><thead><tr><th>Name</th><th>Language pack name</th><th><a target="_blank" href="https://github.com/angular/angular/tree/master/packages/common/locales" data-url="https://github.com/angular/angular/tree/master/packages/common/locales">Angular</a> pack</th><th><a target="_blank" href="http://ng.ant.design/docs/i18n/zh#%E6%94%AF%E6%8C%81%E8%AF%AD%E8%A8%80" data-url="http://ng.ant.design/docs/i18n/zh#%E6%94%AF%E6%8C%81%E8%AF%AD%E8%A8%80">Zorro</a> pack</th><th><a href="/theme/locale" data-url="/theme/locale">Delon</a> pack</th></tr></thead><tbody><tr><td>Simplified Chinese</td><td>zh-Hans,zh-cn,zh-Hans-CN,zh</td><td>zh-Hans,zh-cn,zh-Hans-CN,zh</td><td>zh_CN</td><td>zh_CN</td></tr><tr><td>Traditional Chinese</td><td>zh-Hant,zh-tw,zh-Hant-TW</td><td>zh-Hant,zh-tw,zh-Hant-TW</td><td>zh_TW</td><td>zh_TW</td></tr><tr><td>English (American)</td><td>en</td><td>en</td><td>en_US</td><td>en_US</td></tr><tr><td>Turkish</td><td>tr</td><td>tr</td><td>tr_TR</td><td>tr_TR</td></tr><tr><td>Polish</td><td>pl</td><td>pl</td><td>pl_PL</td><td>pl_PL</td></tr><tr><td>Greek</td><td>el</td><td>el</td><td>el_GR</td><td>el_GR</td></tr><tr><td>Korean</td><td>ko</td><td>ko</td><td>ko_KR</td><td>ko_KR</td></tr><tr><td>Croatian</td><td>hr</td><td>hr</td><td>hr_HR</td><td>hr_HR</td></tr></tbody></table><h3 id="networkEnv">networkEnv<a onclick="window.location.hash = \'networkEnv\'" class="anchor">#</a></h3><p>Allow chinese users to add a taobao mirror configuration file <code>.npmrc</code> or <code>.yarnrc</code> to solve network problems.</p><pre class="hljs language-bash"><code># add npm\nng g ng-alain:plugin networkEnv --packageManager=npm\n# add yarn\nng g ng-alain:plugin networkEnv --packageManager=yarn\n# remove npm\nng g ng-alain:plugin networkEnv --packageManager=npm -t=remove\n# remove yarn\nng g ng-alain:plugin networkEnv --packageManager=yarn -t=remove</code></pre><h3 id="sts">sts<a onclick="window.location.hash = \'sts\'" class="anchor">#</a></h3><p><a target="_blank" href="https://github.com/ng-alain/sts" data-url="https://github.com/ng-alain/sts">ng-alain-sts</a> Plugins, Build Swagger APIs to list, edit pages, You can finish some interesting things.</p><pre class="hljs language-bash"><code># add\nng g ng-alain:plugin sts\n# remove\nng g ng-alain:plugin sts -t=remove</code></pre><h3 id="icon">icon<a onclick="window.location.hash = \'icon\'" class="anchor">#</a></h3><p>From the project to analyze and generate static load Icon, The plugin will automatically generate two files in the <code>src</code> directory:</p><ul><li><p><code>src/style-icons.ts</code> Custom Icon (e.g: remote menu icon)</p></li><li><p><code>src/style-icons-auto.ts</code> command automatically generates files</p></li></ul><blockquote><p>Automatically exclude <a target="_blank" href="https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/icon/nz-icon.service.ts#L6" data-url="https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/icon/nz-icon.service.ts#L6">ng-zorro-antd</a> and <a target="_blank" href="https://github.com/ng-alain/delon/blob/master/packages/theme/src/theme.module.ts#L33" data-url="https://github.com/ng-alain/delon/blob/master/packages/theme/src/theme.module.ts#L33">@delon</a> already loaded icons.</p></blockquote><pre class="hljs language-bash"><code>ng g ng-alain:plugin icon</code></pre><p>Also, you need to manually import in <code>startup.service.ts</code>:</p><pre class="hljs language-ts"><code>import { ICONS_AUTO } from \'../../../style-icons-auto\';\nimport { ICONS } from \'../../../style-icons\';\n\n@Injectable()\nexport class StartupService {\n constructor(iconSrv: NzIconService) {\n iconSrv.addIcon(...ICONS_AUTO, ...ICONS);\n }\n}</code></pre><p><strong>Valid Grammar</strong></p><pre class="hljs language-html"><code><i class="anticon anticon-user"></i>\n<i class="anticon anticon-question-circle-o"></i>\n<i class="anticon anticon-spin anticon-loading"></i>\n<i nz-icon class="anticon anticon-user"></i>\n<i nz-icon nzType="align-{{type ? \'left\' : \'right\'}}"></i>\n<i nz-icon [type]="type ? \'menu-fold\' : \'menu-unfold\'" [theme]="theme ? \'outline\' : \'fill\'"></i>\n<i nz-icon [type]="type ? \'fullscreen\' : \'fullscreen-exit\'"></i>\n<i nz-icon nzType="{{ type ? \'arrow-left\' : \'arrow-right\' }}"></i>\n<i nz-icon nzType="filter" theme="outline"></i>\n<nz-input-group [nzAddOnBeforeIcon]="focus ? \'anticon anticon-arrow-down\' : \'anticon anticon-search\'"></nz-input-group></code></pre></article></section>',meta:{order:30,title:"Pluggable plugin",type:"Documents"},toc:[{id:"Foreword",title:"Foreword",h:2},{id:"Command-format",title:"Command format",h:2},{id:"List-of-plugins",title:"List of plugins",h:2},{id:"g2",title:"g2",h:3},{id:"codeStyle",title:"codeStyle",h:3},{id:"hmr",title:"hmr",h:3},{id:"docker",title:"docker",h:3},{id:"defaultLanguage",title:"defaultLanguage",h:3},{id:"networkEnv",title:"networkEnv",h:3},{id:"sts",title:"sts",h:3},{id:"icon",title:"icon",h:3}]},"zh-CN":{content:'<section class="markdown"><article><h2 id="\u5199\u5728\u524d\u9762">\u5199\u5728\u524d\u9762<a onclick="window.location.hash = \'\u5199\u5728\u524d\u9762\'" class="anchor">#</a></h2><p>\u63d2\u4ef6\u4e3b\u8981\u662f\u9488\u5bf9\u9879\u76ee\u4e00\u4e9b\u989d\u5916 <strong>\u53ef\u9009</strong> \u884c\u4e3a\u7684\u6dfb\u52a0\u6216\u79fb\u9664\uff0c\u4f8b\u5982\u5f53\u4f60\u89c9\u5f97\u4ee3\u7801\u98ce\u683c\u5bf9\u4f60\u6765\u8bf4\u610f\u4e49\u4e0d\u5927\uff08\u867d\u7136\u6211\u4e0d\u8fd9\u4e48\u770b\uff09\uff0c\u53ea\u9700\u8981\uff1a</p><pre class="hljs language-bash"><code>ng g ng-alain:plugin codeStyle -t=remove</code></pre><p>\u53c8\u6216\u8005\u5e0c\u671b\u9879\u76ee\u5e94\u8be5\u6709\u4e00\u4e2a\u7edf\u4e00\u98ce\u683c\u65f6\uff1a</p><pre class="hljs language-bash"><code>ng g ng-alain:plugin codeStyle</code></pre><h2 id="\u547d\u4ee4\u683c\u5f0f">\u547d\u4ee4\u683c\u5f0f<a onclick="window.location.hash = \'\u547d\u4ee4\u683c\u5f0f\'" class="anchor">#</a></h2><pre class="hljs language-bash"><code>ng g ng-alain:plugin [plugin name] -t=[add | remove]</code></pre><p>\u5176\u4e2d <code>[plugin name]</code> \u63d2\u4ef6\u540d\u79f0\uff0c\u4ece\u63d2\u4ef6\u5217\u8868\u4e2d\u83b7\u53d6\uff0c<code>-t</code> \u652f\u6301\u4e24\u79cd\u503c <code>add</code>\uff08\u9ed8\u8ba4\uff09 \u548c <code>remove</code>\u3002</p><h2 id="\u63d2\u4ef6\u5217\u8868">\u63d2\u4ef6\u5217\u8868<a onclick="window.location.hash = \'\u63d2\u4ef6\u5217\u8868\'" class="anchor">#</a></h2><h3 id="g2">g2<a onclick="window.location.hash = \'g2\'" class="anchor">#</a></h3><p>G2 \u56fe\u8868\u3002</p><pre class="hljs language-bash"><code># add\nng g ng-alain:plugin g2\n# remove\nng g ng-alain:plugin g2 -t=remove</code></pre><blockquote><p>\u66f4\u591a\u8bf7\u53c2\u8003G2<a href="/chart" data-url="/chart">\u5f00\u53d1\u6587\u6863</a>\u3002</p></blockquote><h3 id="codeStyle">codeStyle<a onclick="window.location.hash = \'codeStyle\'" class="anchor">#</a></h3><p>\u4ee3\u7801\u98ce\u683c\uff0c\u6709\u51e0\u4e2a\u89c4\u5219\uff1a</p><ul><li><p>\u4f7f\u7528 <a target="_blank" href="https://github.com/palantir/tslint" data-url="https://github.com/palantir/tslint">tslint</a> \u6821\u9a8c typescript \u90e8\u5206</p></li><li><p>\u4f7f\u7528 <a target="_blank" href="https://github.com/stylelint/stylelint" data-url="https://github.com/stylelint/stylelint">stylelint</a> \u6821\u9a8c less \u90e8\u5206</p></li><li><p>\u4f7f\u7528 <a target="_blank" href="https://github.com/prettier/prettier" data-url="https://github.com/prettier/prettier">prettier</a> \u4ee3\u7801\u683c\u5f0f\u5316</p></li><li><p>\u4f7f\u7528 <a target="_blank" href="https://github.com/typicode/husky" data-url="https://github.com/typicode/husky">husky</a> \u548c <a target="_blank" href="https://github.com/okonet/lint-staged" data-url="https://github.com/okonet/lint-staged">lint-staged</a> \u5728\u4f60\u63d0\u4ea4\u4ee3\u7801\u65f6\u8fdb\u884c\u4ee3\u7801\u6821\u9a8c\u548c\u683c\u5f0f\u5316</p></li></ul><p>ng-alain \u9ed8\u8ba4\u63d0\u4f9b\u4e86\u4e00\u90e8\u5206\u7684\u4ee3\u7801\u98ce\u683c\u914d\u7f6e\u65b9\u6848\uff0c\u4f60\u53ef\u4ee5\u5728\u9879\u76ee\u7684\u6839\u76ee\u5f55\u4e0b\u627e\u5230\u8fd9\u4e9b\u914d\u7f6e\u4fe1\u606f\uff0c\u4f9d\u7167\u4f60\u81ea\u5df1\u7684\u98ce\u683c\u8fdb\u884c\u4fee\u9970\u3002</p><pre class="hljs language-bash"><code># add\nng g ng-alain:plugin codeStyle\n# remove\nng g ng-alain:plugin codeStyle -t=remove</code></pre><h3 id="hmr">hmr<a onclick="window.location.hash = \'hmr\'" class="anchor">#</a></h3><p>\u652f\u6301 HMR \u70ed\u66ff\u6362\u3002</p><pre class="hljs language-bash"><code># add\nng g ng-alain:plugin hmr\n# remove\nng g ng-alain:plugin hmr -t=remove</code></pre><p>\u5b89\u88c5\u540e\u53ef\u4f7f\u7528\u542f\u7528 HMR \u6a21\u5f0f\u8fdb\u5165\u5f00\u53d1\u73af\u5883\uff1a</p><pre class="hljs language-bash"><code>npm run hmr</code></pre><h3 id="docker">docker<a onclick="window.location.hash = \'docker\'" class="anchor">#</a></h3><p>\u652f\u6301 Docker \u90e8\u7f72\u3002</p><pre class="hljs language-bash"><code># add\nng g ng-alain:plugin docker\n# remove\nng g ng-alain:plugin docker -t=remove</code></pre><h3 id="defaultLanguage">defaultLanguage<a onclick="window.location.hash = \'defaultLanguage\'" class="anchor">#</a></h3><p>\u53d8\u66f4\u5f53\u524d\u9ed8\u8ba4\u8bed\u8a00\uff0c\u53c2\u8003\uff1a<a href="/docs/i18n#\u9ed8\u8ba4\u8bed\u8a00" data-url="/docs/i18n#\u9ed8\u8ba4\u8bed\u8a00">\u56fd\u9645\u5316-\u9ed8\u8ba4\u8bed\u8a00</a></p><pre class="hljs language-bash"><code># change to [en]\nng g ng-alain:plugin defaultLanguage --defaultLanguage=en\n# change to [zh]\nng g ng-alain:plugin defaultLanguage --defaultLanguage=zh\n# change to [zh-tw]\nng g ng-alain:plugin defaultLanguage --defaultLanguage=zh-tw</code></pre><h4 id="\u652f\u6301\u8bed\u8a00\u5217\u8868">\u652f\u6301\u8bed\u8a00\u5217\u8868<a onclick="window.location.hash = \'\u652f\u6301\u8bed\u8a00\u5217\u8868\'" class="anchor">#</a></h4><table><thead><tr><th>\u540d\u79f0</th><th>\u8bed\u8a00\u5305\u540d\u79f0</th><th>\u5bf9\u5e94 <a target="_blank" href="https://github.com/angular/angular/tree/master/packages/common/locales" data-url="https://github.com/angular/angular/tree/master/packages/common/locales">Angular</a> \u8bed\u8a00\u5305</th><th>\u5bf9\u5e94 <a target="_blank" href="http://ng.ant.design/docs/i18n/zh#%E6%94%AF%E6%8C%81%E8%AF%AD%E8%A8%80" data-url="http://ng.ant.design/docs/i18n/zh#%E6%94%AF%E6%8C%81%E8%AF%AD%E8%A8%80">Zorro</a> \u8bed\u8a00\u5305</th><th>\u5bf9\u5e94 <a href="/theme/locale" data-url="/theme/locale">Delon</a> \u8bed\u8a00\u5305</th></tr></thead><tbody><tr><td>\u7b80\u4f53\u4e2d\u6587</td><td>zh-Hans,zh-cn,zh-Hans-CN,zh</td><td>zh-Hans,zh-cn,zh-Hans-CN,zh</td><td>zh_CN</td><td>zh_CN</td></tr><tr><td>\u7e41\u4f53\u4e2d\u6587</td><td>zh-Hant,zh-tw,zh-Hant-TW</td><td>zh-Hant,zh-tw,zh-Hant-TW</td><td>zh_TW</td><td>zh_TW</td></tr><tr><td>\u82f1\u8bed\uff08\u7f8e\u5f0f\uff09</td><td>en</td><td>en</td><td>en_US</td><td>en_US</td></tr><tr><td>\u571f\u8033\u5176\u8bed</td><td>tr</td><td>tr</td><td>tr_TR</td><td>tr_TR</td></tr><tr><td>\u6ce2\u5170\u8bed</td><td>pl</td><td>pl</td><td>pl_PL</td><td>pl_PL</td></tr><tr><td>\u5e0c\u814a\u8bed</td><td>el</td><td>el</td><td>el_GR</td><td>el_GR</td></tr><tr><td>\u671d\u9c9c\u8bed</td><td>ko</td><td>ko</td><td>ko_KR</td><td>ko_KR</td></tr><tr><td>\u514b\u7f57\u5730\u4e9a</td><td>hr</td><td>hr</td><td>hr_HR</td><td>hr_HR</td></tr></tbody></table><h3 id="networkEnv">networkEnv<a onclick="window.location.hash = \'networkEnv\'" class="anchor">#</a></h3><p>\u5728\u56fd\u5185\u4f7f\u7528 npm \u6216 yarn \u59cb\u7ec8\u662f\u4e00\u4e2a\u201c\u75db\u201d\uff0c\u56e0\u6b64\u4f60\u53ef\u4ee5\u589e\u52a0\u4e00\u4e2a\u4f7f\u7528\u6dd8\u5b9d\u955c\u50cf\u914d\u7f6e\u6587\u4ef6 <code>.npmrc</code> \u6216 <code>.yarnrc</code>\uff0c\u6765\u89e3\u51b3\u7f51\u7edc\u95ee\u9898\u3002</p><pre class="hljs language-bash"><code># add npm\nng g ng-alain:plugin networkEnv --packageManager=npm\n# add yarn\nng g ng-alain:plugin networkEnv --packageManager=yarn\n# remove npm\nng g ng-alain:plugin networkEnv --packageManager=npm -t=remove\n# remove yarn\nng g ng-alain:plugin networkEnv --packageManager=yarn -t=remove</code></pre><h3 id="sts">sts<a onclick="window.location.hash = \'sts\'" class="anchor">#</a></h3><p><a target="_blank" href="https://github.com/ng-alain/sts" data-url="https://github.com/ng-alain/sts">ng-alain-sts</a> \u63d2\u4ef6\uff0c\u6784\u5efa Swagger API \u8f6c\u6362\u4e3a\u5217\u8868\u3001\u7f16\u8f91\u9875\uff0c\u66f4\u591a\u6709\u8da3\u7684\u73a9\u6cd5\u8bf7\u81ea\u884c\u60f3\u8c61\u3002</p><pre class="hljs language-bash"><code># add\nng g ng-alain:plugin sts\n# remove\nng g ng-alain:plugin sts -t=remove</code></pre><h3 id="icon">icon<a onclick="window.location.hash = \'icon\'" class="anchor">#</a></h3><p><strong>\u5c3d\u53ef\u80fd</strong>\u4ece\u9879\u76ee\u4e2d\u5206\u6790\u5e76\u751f\u6210\u9759\u6001 Icon\uff0c\u63d2\u4ef6\u4f1a\u81ea\u52a8\u5728 <code>src</code> \u76ee\u5f55\u4e0b\u751f\u6210\u4e24\u4e2a\u6587\u4ef6\uff1a</p><ul><li><p><code>src/style-icons.ts</code> \u81ea\u5b9a\u4e49\u90e8\u5206\u65e0\u6cd5\u89e3\u6790\uff08\u4f8b\u5982\uff1a\u8fdc\u7a0b\u83dc\u5355\u56fe\u6807\uff09</p></li><li><p><code>src/style-icons-auto.ts</code> \u547d\u4ee4\u81ea\u52a8\u751f\u6210\u6587\u4ef6</p></li></ul><blockquote><p>\u81ea\u52a8\u6392\u9664 <a target="_blank" href="https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/icon/nz-icon.service.ts#L6" data-url="https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/icon/nz-icon.service.ts#L6">ng-zorro-antd</a> \u548c <a target="_blank" href="https://github.com/ng-alain/delon/blob/master/packages/theme/src/theme.module.ts#L33" data-url="https://github.com/ng-alain/delon/blob/master/packages/theme/src/theme.module.ts#L33">@delon</a> \u5df2\u7ecf\u52a0\u8f7d\u7684\u56fe\u6807\u3002</p></blockquote><pre class="hljs language-bash"><code>ng g ng-alain:plugin icon</code></pre><p>\u540c\u65f6\uff0c\u9700\u8981\u624b\u52a8\u5728 <code>startup.service.ts</code> \u4e2d\u5bfc\u5165\uff1a</p><pre class="hljs language-ts"><code>import { ICONS_AUTO } from \'../../../style-icons-auto\';\nimport { ICONS } from \'../../../style-icons\';\n\n@Injectable()\nexport class StartupService {\n constructor(iconSrv: NzIconService) {\n iconSrv.addIcon(...ICONS_AUTO, ...ICONS);\n }\n}</code></pre><p><strong>\u6709\u6548\u8bed\u6cd5</strong></p><pre class="hljs language-html"><code><i class="anticon anticon-user"></i>\n<i class="anticon anticon-question-circle-o"></i>\n<i class="anticon anticon-spin anticon-loading"></i>\n<i nz-icon class="anticon anticon-user"></i>\n<i nz-icon nzType="align-{{type ? \'left\' : \'right\'}}"></i>\n<i nz-icon [type]="type ? \'menu-fold\' : \'menu-unfold\'" [theme]="theme ? \'outline\' : \'fill\'"></i>\n<i nz-icon [type]="type ? \'fullscreen\' : \'fullscreen-exit\'"></i>\n<i nz-icon nzType="{{ type ? \'arrow-left\' : \'arrow-right\' }}"></i>\n<i nz-icon nzType="filter" theme="outline"></i>\n<nz-input-group [nzAddOnBeforeIcon]="focus ? \'anticon anticon-arrow-down\' : \'anticon anticon-search\'"></nz-input-group></code></pre></article></section>',meta:{order:30,title:"\u63d2\u4ef6",type:"Documents"},toc:[{id:"\u5199\u5728\u524d\u9762",title:"\u5199\u5728\u524d\u9762",h:2},{id:"\u547d\u4ee4\u683c\u5f0f",title:"\u547d\u4ee4\u683c\u5f0f",h:2},{id:"\u63d2\u4ef6\u5217\u8868",title:"\u63d2\u4ef6\u5217\u8868",h:2},{id:"g2",title:"g2",h:3},{id:"codeStyle",title:"codeStyle",h:3},{id:"hmr",title:"hmr",h:3},{id:"docker",title:"docker",h:3},{id:"defaultLanguage",title:"defaultLanguage",h:3},{id:"networkEnv",title:"networkEnv",h:3},{id:"sts",title:"sts",h:3},{id:"icon",title:"icon",h:3}]}},demo:!1},this.codes=[]}}class r{}var h=a("pMnS"),p=a("EdU/"),g=a("/Yna"),u=a("JRKe"),m=a("Ed4d"),b=a("8WaK"),f=a("QfCi"),w=a("CghO"),k=a("Sq/J"),_=a("GYi0"),y=a("EXx9"),G=a("R6D3"),v=a("WP5L"),z=a("71F0"),S=a("fE+l"),C=a("0RMT"),j=a("QcbP"),N=a("0D9X"),M=a("SpJI"),D=a("hBP+"),T=a("QPFe"),O=a("RdGh"),L=a("D9vs"),x=a("DyZ0"),A=a("TY3c"),R=a("u+Cy"),I=a("8+8K"),E=a("YVZs"),F=a("F/j7"),q=a("/EOF"),H=a("ZKYL"),U=a("SZk1"),P=a("5eO6"),W=a("9BMt"),V=a("kRch"),Y=a("QkPN"),B=a("vBNu"),J=a("Z7t+"),Z=a("II6v"),Q=a("MRB6"),K=a("uU7u"),X=a("iInd"),$=a("cUpR"),ee=n.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function te(e){return n.Sb(0,[(e()(),n.wb(0,0,null,null,1,"app-docs",[],null,null,null,J.b,J.a)),n.vb(1,245760,null,0,Z.a,[Q.a,K.a,X.p,$.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(e,t){var a=t.component;e(t,1,0,a.codes,a.item)}),null)}function ae(e){return n.Sb(0,[(e()(),n.wb(0,0,null,null,1,"app-cli-add",[],null,null,null,te,ee)),n.vb(1,49152,null,0,d,[],null,null)],null,null)}var ne=n.sb("app-cli-add",d,ae,{},{},[]),oe=n.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function de(e){return n.Sb(0,[(e()(),n.wb(0,0,null,null,1,"app-docs",[],null,null,null,J.b,J.a)),n.vb(1,245760,null,0,Z.a,[Q.a,K.a,X.p,$.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(e,t){var a=t.component;e(t,1,0,a.codes,a.item)}),null)}function le(e){return n.Sb(0,[(e()(),n.wb(0,0,null,null,1,"app-cli-default",[],null,null,null,de,oe)),n.vb(1,49152,null,0,l,[],null,null)],null,null)}var ce=n.sb("app-cli-default",l,le,{},{},[]),ie=n.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function se(e){return n.Sb(0,[(e()(),n.wb(0,0,null,null,1,"app-docs",[],null,null,null,J.b,J.a)),n.vb(1,245760,null,0,Z.a,[Q.a,K.a,X.p,$.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(e,t){var a=t.component;e(t,1,0,a.codes,a.item)}),null)}function re(e){return n.Sb(0,[(e()(),n.wb(0,0,null,null,1,"app-cli-generate",[],null,null,null,se,ie)),n.vb(1,49152,null,0,c,[],null,null)],null,null)}var he=n.sb("app-cli-generate",c,re,{},{},[]),pe=n.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function ge(e){return n.Sb(0,[(e()(),n.wb(0,0,null,null,1,"app-docs",[],null,null,null,J.b,J.a)),n.vb(1,245760,null,0,Z.a,[Q.a,K.a,X.p,$.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(e,t){var a=t.component;e(t,1,0,a.codes,a.item)}),null)}function ue(e){return n.Sb(0,[(e()(),n.wb(0,0,null,null,1,"app-cli-getting-started",[],null,null,null,ge,pe)),n.vb(1,49152,null,0,i,[],null,null)],null,null)}var me=n.sb("app-cli-getting-started",i,ue,{},{},[]),be=n.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function fe(e){return n.Sb(0,[(e()(),n.wb(0,0,null,null,1,"app-docs",[],null,null,null,J.b,J.a)),n.vb(1,245760,null,0,Z.a,[Q.a,K.a,X.p,$.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(e,t){var a=t.component;e(t,1,0,a.codes,a.item)}),null)}function we(e){return n.Sb(0,[(e()(),n.wb(0,0,null,null,1,"app-cli-plugin",[],null,null,null,fe,be)),n.vb(1,49152,null,0,s,[],null,null)],null,null)}var ke=n.sb("app-cli-plugin",s,we,{},{},[]),_e=a("SVse"),ye=a("s7LF"),Ge=a("5VGP"),ve=a("QQfA"),ze=a("IP0z"),Se=a("POq0"),Ce=a("sAdM"),je=a("ekcc"),Ne=a("pQl/"),Me=a("g+Fz"),De=a("Ybye"),Te=a("NFMk"),Oe=a("10Ig"),Le=a("iC8E"),xe=a("/HVE"),Ae=a("v1Dh"),Re=a("66zS"),Ie=a("5Izy"),Ee=a("yTpB"),Fe=a("zMNK"),qe=a("hOhj"),He=a("r19J"),Ue=a("anqq"),Pe=a("IYs4"),We=a("EcpC"),Ve=a("GaVp"),Ye=a("/L1H"),Be=a("phDe"),Je=a("rJp6"),Ze=a("Rgb0"),Qe=a("kS4m"),Ke=a("mW00"),Xe=a("jTf7"),$e=a("WPSl"),et=a("YdS3"),tt=a("wQFA"),at=a("px0D"),nt=a("3ZFI"),ot=a("CYS+"),dt=a("oBm0"),lt=a("A7zk"),ct=a("YRt3"),it=a("lAiz"),st=a("ce6n"),rt=a("SBNi"),ht=a("7QIX"),pt=a("tYkK"),gt=a("wf2+"),ut=a("eCGT"),mt=a("nHXS"),bt=a("fb/r"),ft=a("zTFG"),wt=a("JK0T"),kt=a("JXeA"),_t=a("0CZq"),yt=a("qU0y"),Gt=a("vZsH"),vt=a("W4B1"),zt=a("SHEi"),St=a("FPpa"),Ct=a("RVNi"),jt=a("NDed"),Nt=a("5A4h"),Mt=a("N2O2"),Dt=a("ozKM"),Tt=a("OvZZ"),Ot=a("z+yo"),Lt=a("DQmg"),xt=a("haRT"),At=a("1+nf"),Rt=a("XFzh"),It=a("p+Sl"),Et=a("HhpN"),Ft=a("SN7N"),qt=a("fwnu"),Ht=a("VbP7"),Ut=a("gaRz"),Pt=a("e15G"),Wt=a("+YBk"),Vt=a("9J0+"),Yt=a("vIiB"),Bt=a("CGSU"),Jt=a("5CFV"),Zt=a("GTZx"),Qt=a("hS58"),Kt=a("+ndR"),Xt=a("EWQH"),$t=a("aq9g"),ea=a("7Dpl"),ta=a("ekmu"),aa=a("vjj7"),na=a("l/Xz"),oa=a("sRo1"),da=a("BQzg"),la=a("YQXl"),ca=a("dZIx"),ia=a("9bzR"),sa=a("WNQ9"),ra=a("5Oon"),ha=a("lM9c"),pa=a("OSVY"),ga=a("MNSj"),ua=a("MZBU"),ma=a("ev4S"),ba=a("G1y0"),fa=a("5sGc"),wa=a("4/RT"),ka=a("Q1qs"),_a=a("k5cy"),ya=a("ceoF"),Ga=a("gQlp"),va=a("XYAa"),za=a("vrge"),Sa=a("nMAq"),Ca=a("5PV9"),ja=a("nIn3"),Na=a("xo13"),Ma=a("CnVV"),Da=a("5p8d"),Ta=a("qYUw"),Oa=a("JpOc"),La=a("VRoF"),xa=a("Uto7"),Aa=a("/p+U"),Ra=a("ye40"),Ia=a("qcxY"),Ea=a("T+Em"),Fa=a("ucmY"),qa=a("sbFH"),Ha=a("76lH"),Ua=a("TSSN"),Pa=a("Fg/6"),Wa=a("kzz5"),Va=a("SqF5"),Ya=a("Wl7g"),Ba=a("+TYD"),Ja=a("PCNd");a.d(t,"CliModuleNgFactory",(function(){return Za}));var Za=n.tb(r,[],(function(e){return n.Fb([n.Gb(512,n.j,n.db,[[8,[h.a,p.a,p.b,g.a,u.a,m.a,b.a,f.a,w.a,k.a,_.a,y.a,G.a,v.a,z.a,S.a,C.a,j.a,N.a,M.a,D.a,T.a,O.a,L.a,x.a,A.a,R.a,I.a,E.a,F.a,q.a,H.a,U.a,P.a,W.a,V.a,Y.a,B.a,ne,ce,he,me,ke]],[3,n.j],n.w]),n.Gb(4608,_e.p,_e.o,[n.t,[2,_e.K]]),n.Gb(4608,ye.x,ye.x,[]),n.Gb(4608,ye.e,ye.e,[]),n.Gb(5120,Ge.z,Ge.M,[_e.e,[3,Ge.z]]),n.Gb(4608,ve.d,ve.d,[ve.k,ve.f,n.j,ve.i,ve.g,n.q,n.y,_e.e,ze.b,[2,_e.j]]),n.Gb(5120,ve.l,ve.m,[ve.d]),n.Gb(4608,Se.c,Se.c,[]),n.Gb(5120,Ce.b,Ce.a,[[3,Ce.b],je.a]),n.Gb(4608,Ne.d,Ne.d,[n.y]),n.Gb(4608,Me.d,Me.d,[_e.e]),n.Gb(4608,De.a,De.a,[Te.g]),n.Gb(4608,Oe.a,Oe.a,[Le.d]),n.Gb(1073742336,_e.c,_e.c,[]),n.Gb(1073742336,ye.w,ye.w,[]),n.Gb(1073742336,ye.j,ye.j,[]),n.Gb(1073742336,X.t,X.t,[[2,X.y],[2,X.p]]),n.Gb(1073742336,ye.t,ye.t,[]),n.Gb(1073742336,xe.b,xe.b,[]),n.Gb(1073742336,Ae.b,Ae.b,[]),n.Gb(1073742336,Re.b,Re.b,[]),n.Gb(1073742336,Ge.j,Ge.j,[]),n.Gb(1073742336,Ie.b,Ie.b,[]),n.Gb(1073742336,Ee.a,Ee.a,[]),n.Gb(1073742336,ze.a,ze.a,[]),n.Gb(1073742336,Fe.e,Fe.e,[]),n.Gb(1073742336,qe.g,qe.g,[]),n.Gb(1073742336,ve.h,ve.h,[]),n.Gb(1073742336,Ge.w,Ge.w,[]),n.Gb(1073742336,He.b,He.b,[]),n.Gb(1073742336,Ue.b,Ue.b,[]),n.Gb(1073742336,Pe.b,Pe.b,[]),n.Gb(1073742336,Se.d,Se.d,[]),n.Gb(1073742336,We.b,We.b,[]),n.Gb(1073742336,Ge.J,Ge.J,[]),n.Gb(1073742336,Ve.c,Ve.c,[]),n.Gb(1073742336,Ge.x,Ge.x,[]),n.Gb(1073742336,Ye.e,Ye.e,[]),n.Gb(1073742336,Be.i,Be.i,[]),n.Gb(1073742336,Be.a,Be.a,[]),n.Gb(1073742336,Be.f,Be.f,[]),n.Gb(1073742336,Je.c,Je.c,[]),n.Gb(1073742336,Ze.b,Ze.b,[]),n.Gb(1073742336,Qe.d,Qe.d,[]),n.Gb(1073742336,Ke.c,Ke.c,[]),n.Gb(1073742336,Xe.h,Xe.h,[]),n.Gb(1073742336,$e.f,$e.f,[]),n.Gb(1073742336,et.d,et.d,[]),n.Gb(1073742336,tt.d,tt.d,[]),n.Gb(1073742336,Ge.s,Ge.s,[]),n.Gb(1073742336,at.d,at.d,[]),n.Gb(1073742336,nt.b,nt.b,[]),n.Gb(1073742336,ot.c,ot.c,[]),n.Gb(1073742336,dt.a,dt.a,[]),n.Gb(1073742336,lt.a,lt.a,[]),n.Gb(1073742336,ct.b,ct.b,[]),n.Gb(1073742336,it.g,it.g,[]),n.Gb(1073742336,it.b,it.b,[]),n.Gb(1073742336,st.a,st.a,[]),n.Gb(1073742336,rt.b,rt.b,[]),n.Gb(1073742336,Le.e,Le.e,[]),n.Gb(1073742336,Le.b,Le.b,[]),n.Gb(1073742336,ht.b,ht.b,[]),n.Gb(1073742336,pt.b,pt.b,[]),n.Gb(1073742336,gt.g,gt.g,[]),n.Gb(1073742336,ut.b,ut.b,[]),n.Gb(1073742336,mt.a,mt.a,[]),n.Gb(1073742336,bt.b,bt.b,[]),n.Gb(1073742336,ft.d,ft.d,[]),n.Gb(1073742336,wt.b,wt.b,[]),n.Gb(1073742336,kt.h,kt.h,[]),n.Gb(1073742336,kt.f,kt.f,[]),n.Gb(1073742336,Ge.y,Ge.y,[]),n.Gb(1073742336,Te.h,Te.h,[]),n.Gb(1073742336,Te.d,Te.d,[]),n.Gb(1073742336,Te.e,Te.e,[]),n.Gb(1073742336,_t.f,_t.f,[]),n.Gb(1073742336,_t.e,_t.e,[]),n.Gb(1073742336,yt.a,yt.a,[]),n.Gb(1073742336,Gt.b,Gt.b,[]),n.Gb(1073742336,vt.b,vt.b,[]),n.Gb(1073742336,zt.c,zt.c,[]),n.Gb(1073742336,St.c,St.c,[]),n.Gb(1073742336,Ct.b,Ct.b,[]),n.Gb(1073742336,jt.c,jt.c,[]),n.Gb(1073742336,Nt.a,Nt.a,[]),n.Gb(1073742336,Mt.b,Mt.b,[]),n.Gb(1073742336,Dt.d,Dt.d,[]),n.Gb(1073742336,Tt.a,Tt.a,[]),n.Gb(1073742336,Ot.c,Ot.c,[]),n.Gb(1073742336,Lt.b,Lt.b,[]),n.Gb(1073742336,xt.b,xt.b,[]),n.Gb(1073742336,At.f,At.f,[]),n.Gb(1073742336,Rt.b,Rt.b,[]),n.Gb(1073742336,It.a,It.a,[]),n.Gb(1073742336,Ge.D,Ge.D,[]),n.Gb(1073742336,Et.c,Et.c,[]),n.Gb(1073742336,Ft.b,Ft.b,[]),n.Gb(1073742336,qt.b,qt.b,[]),n.Gb(1073742336,Ge.o,Ge.o,[]),n.Gb(1073742336,Ht.a,Ht.a,[]),n.Gb(1073742336,Ut.d,Ut.d,[]),n.Gb(1073742336,Pt.a,Pt.a,[]),n.Gb(1073742336,Wt.a,Wt.a,[]),n.Gb(1073742336,Vt.a,Vt.a,[Re.c]),n.Gb(1073742336,Yt.a,Yt.a,[]),n.Gb(1073742336,Bt.a,Bt.a,[]),n.Gb(1073742336,Jt.a,Jt.a,[]),n.Gb(1073742336,Zt.a,Zt.a,[]),n.Gb(1073742336,Qt.a,Qt.a,[]),n.Gb(1073742336,Kt.a,Kt.a,[]),n.Gb(1073742336,Xt.a,Xt.a,[]),n.Gb(1073742336,$t.a,$t.a,[]),n.Gb(1073742336,ea.a,ea.a,[]),n.Gb(1073742336,ta.a,ta.a,[]),n.Gb(1073742336,aa.a,aa.a,[]),n.Gb(1073742336,na.a,na.a,[]),n.Gb(1073742336,oa.a,oa.a,[]),n.Gb(1073742336,da.a,da.a,[]),n.Gb(1073742336,Ne.c,Ne.c,[]),n.Gb(1073742336,la.a,la.a,[]),n.Gb(1073742336,ca.a,ca.a,[]),n.Gb(1073742336,ia.a,ia.a,[]),n.Gb(1073742336,sa.a,sa.a,[]),n.Gb(1073742336,ra.a,ra.a,[]),n.Gb(1073742336,ha.a,ha.a,[]),n.Gb(1073742336,pa.a,pa.a,[]),n.Gb(1073742336,ga.a,ga.a,[]),n.Gb(1073742336,ua.a,ua.a,[]),n.Gb(1073742336,ma.a,ma.a,[]),n.Gb(1073742336,ba.a,ba.a,[]),n.Gb(1073742336,fa.a,fa.a,[]),n.Gb(1073742336,wa.a,wa.a,[]),n.Gb(1073742336,ka.a,ka.a,[]),n.Gb(1073742336,_a.a,_a.a,[]),n.Gb(1073742336,ya.a,ya.a,[]),n.Gb(1073742336,Ga.a,Ga.a,[]),n.Gb(1073742336,va.a,va.a,[]),n.Gb(1073742336,za.a,za.a,[]),n.Gb(1073742336,Sa.a,Sa.a,[]),n.Gb(1073742336,Ca.a,Ca.a,[]),n.Gb(1073742336,ja.a,ja.a,[]),n.Gb(1073742336,Na.a,Na.a,[]),n.Gb(1073742336,Ma.a,Ma.a,[]),n.Gb(1073742336,Da.a,Da.a,[]),n.Gb(1073742336,Ta.a,Ta.a,[]),n.Gb(1073742336,Oa.a,Oa.a,[]),n.Gb(1073742336,La.a,La.a,[]),n.Gb(1073742336,xa.a,xa.a,[]),n.Gb(1073742336,Aa.a,Aa.a,[]),n.Gb(1073742336,Ra.a,Ra.a,[]),n.Gb(1073742336,Ia.a,Ia.a,[]),n.Gb(1073742336,Ea.a,Ea.a,[]),n.Gb(1073742336,Fa.a,Fa.a,[]),n.Gb(1073742336,qa.a,qa.a,[]),n.Gb(1073742336,Ha.a,Ha.a,[]),n.Gb(1073742336,Ua.h,Ua.h,[]),n.Gb(1073742336,Pa.b,Pa.b,[]),n.Gb(1073742336,Wa.a,Wa.a,[]),n.Gb(1073742336,Me.c,Me.c,[]),n.Gb(1073742336,Va.c,Va.c,[]),n.Gb(1073742336,Ya.d,Ya.d,[]),n.Gb(1073742336,Ya.h,Ya.h,[]),n.Gb(1073742336,Ya.b,Ya.b,[]),n.Gb(1073742336,Ya.j,Ya.j,[]),n.Gb(1073742336,Ya.l,Ya.l,[]),n.Gb(1073742336,Ya.p,Ya.p,[]),n.Gb(1073742336,Ya.t,Ya.t,[]),n.Gb(1073742336,Ba.a,Ba.a,[]),n.Gb(1073742336,Ja.a,Ja.a,[]),n.Gb(1073742336,r,r,[]),n.Gb(256,kt.b,{nzAnimate:!0,nzDuration:3e3,nzMaxStack:7,nzPauseOnHover:!0,nzTop:24},[]),n.Gb(256,_t.b,{nzTop:"24px",nzBottom:"24px",nzPlacement:"topRight",nzDuration:4500,nzMaxStack:7,nzPauseOnHover:!0,nzAnimate:!0},[]),n.Gb(256,je.a,Wt.b,[]),n.Gb(1024,X.n,(function(){return[[{path:"",component:o.a,children:[{path:"",redirectTo:"getting-started/zh",pathMatch:"full"},{path:"add",redirectTo:"add/zh",pathMatch:"full"},{path:"add/:lang",component:d},{path:"default",redirectTo:"default/zh",pathMatch:"full"},{path:"default/:lang",component:l},{path:"generate",redirectTo:"generate/zh",pathMatch:"full"},{path:"generate/:lang",component:c},{path:"getting-started",redirectTo:"getting-started/zh",pathMatch:"full"},{path:"getting-started/:lang",component:i},{path:"plugin",redirectTo:"plugin/zh",pathMatch:"full"},{path:"plugin/:lang",component:s}]}]]}),[])])}))}}]);