16-es5.539a118087b8dfff4a08.js

function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{"63qx":function(t,e,a){"use strict";a.r(e);var o=a("8Y7J"),n=a("0qEG"),l=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"zh-CN":"docs/acl.md"},content:{"zh-CN":{content:'<section class="markdown"><article></article></section>',meta:{order:50,title:"ACL",type:"Advance",url:"/acl/getting-started"},toc:[]}},demo:!1},this.codes=[]},i=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/architecture.en-US.md","zh-CN":"docs/architecture.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>NG-ALAIN scaffold is a front-end solution to support middleware and back-end application. It is based on <a target="_blank" href="https://angular.io/" data-url="https://angular.io/">Angular</a> and <a target="_blank" href="https://ng.ant.design/docs/introduce/en" data-url="https://ng.ant.design/docs/introduce/en">ng-zorro-antd</a>(Angular implementation of Ant Design). The scaffold includes a set of common functionalities and business component libraries. It reduces lots of infrastructure development overwhelmingly and let you focus on business logic development.</p><h2 id="Architecture-Diagram">Architecture Diagram<a onclick="window.location.hash = \'Architecture-Diagram\'" class="anchor">#</a></h2><p><img width=700 src="https://github.com/ng-alain/delon/raw/master/_screenshot/architecture.png" /></p><p><strong>@delon/theme</strong></p><p>Theme library of scaffold, we publish the theme library to NPM, which extremely simplifies upgrade effort.</p><p>Theme library includes not only essential styles(CSS tool like bootstrap) required by NG-ALAIN, but also a set of common data rendering(Pipe) and service tools(page title, scroll bar, etc..), which are needed during daily development.</p><p><strong>@delon/abc</strong></p><p>Scaffold provides a default set of <a href="/components/" data-url="/components/">business components</a>, which abstract commonly used block/area in console service. We will continue to maintain and iterate the components. Provide more advanced abstract components than Ant Design base components to middleware and back-end business.</p><p><strong>@delon/chart</strong></p><p><a href="/chart" data-url="/chart">@delon/chart</a> chart library is customised based on G2 (3.0). Providing commonly used chart suite in business development. It can be used alone or composed together to achieve more complex and fancy display effect.</p><p><strong>@delon/form</strong></p><p><a href="/form" data-url="/form">@delon/form</a> follows standard of <a target="_blank" href="http://json-schema.org/" data-url="http://json-schema.org/">JSON Schema</a> to build dynamic forms.</p><p><strong>@delon/auth</strong></p><p><a href="/auth" data-url="/auth">User Authentication</a> module is used for resolving steps to obtain, save and use authentication.</p><p><strong>@delon/acl</strong></p><p><a href="/acl" data-url="/acl">ACL</a> Access Control List is a very simple role based permission control. It can even reach the granularity of controlling the visibility of a button.</p><p><strong>@delon/cache</strong></p><p>Reduce the Http request by storing <a href="/cache" data-url="/cache">cache</a> of the dictionary, city data, etc. into memory or persistence storage.</p><p><strong>@delon/mock</strong></p><p><a href="/mock" data-url="/mock">Mock</a> will intercept Angular HTTP request and return testing data.</p><p><strong>@delon/util</strong></p><p><a href="/util" data-url="/util">Daily Utilities</a>\u3002</p><p><strong>@delon/testing</strong></p><p>Commonly used testing suite.</p><p><strong>CLI Schematics</strong></p><p><a href="/cli" data-url="/cli">CLI Tool</a></p><h2 id="Document-and-Feedback">Document and Feedback<a onclick="window.location.hash = \'Document-and-Feedback\'" class="anchor">#</a></h2><p>You can find all documents in <a href="https://ng-alain.com" data-url="https://ng-alain.com">ng-alain.com</a>.</p><p>The documents will be iteratively changed with scaffold\'s upgrade (<a target="_blank" href="https://github.com/ng-alain/ng-alain/releases" data-url="https://github.com/ng-alain/ng-alain/releases">Change log</a>). If you have any questions or requirements, please provide your feedback <a target="_blank" href="https://github.com/ng-alain/ng-alain/issues" data-url="https://github.com/ng-alain/ng-alain/issues">here</a>. </p></article></section>',meta:{order:20,title:{"en-US":"Architecture","zh-CN":"\u4f53\u7cfb\u7ed3\u6784"},type:"Basic"},toc:[{id:"Architecture-Diagram",title:"Architecture Diagram",h:2},{id:"Document-and-Feedback",title:"Document and Feedback",h:2}]},"zh-CN":{content:'<section class="markdown"><article><p>NG-ALAIN \u811a\u624b\u67b6\u662f\u57fa\u4e8e Angular \u548c NG-ZORRO\uff08Ant Design \u7684 Angular \u7248\u672c\uff09 \u57fa\u7840\u7ec4\u4ef6\u5e93\u7684\u4e2d\u540e\u53f0\u524d\u7aef\u89e3\u51b3\u65b9\u6848\u3002\u811a\u624b\u67b6\u5305\u542b\u7740\u4e00\u5957\u901a\u7528\u7684\u529f\u80fd\u548c\u4e1a\u52a1\u7ec4\u4ef6\u5e93\uff0c\u5b83\u4eec\u53ef\u4ee5\u6781\u5927\u5730\u51cf\u5c11\u4e00\u4e9b\u57fa\u7840\u5efa\u8bbe\u5f00\u53d1\u5de5\u4f5c\u3002</p><h2 id="\u7ed3\u6784\u56fe">\u7ed3\u6784\u56fe<a onclick="window.location.hash = \'\u7ed3\u6784\u56fe\'" class="anchor">#</a></h2><p><img width=700 src="https://github.com/ng-alain/delon/raw/master/_screenshot/architecture.png" /></p><p><strong>@delon/theme</strong></p><p>\u811a\u624b\u67b6\u4e3b\u9898\u7cfb\u7edf\u5e93\uff0c\u6211\u4eec\u5c06\u4e3b\u9898\u76f8\u5173\u53d1\u5e03\u81f3 Npm \u5f53\u4e2d\uff0c\u8fd9\u6781\u5927\u5730\u7b80\u5316\u4e86\u5347\u7ea7\u6210\u672c\u3002</p><p>\u4e3b\u9898\u7cfb\u7edf\u9664\u4e86\u5305\u542b NG-ALAIN \u57fa\u7840\u6846\u67b6\u6240\u9700\u8981\u7684\u6837\u5f0f\uff08\u5305\u542bCSS\u5de5\u5177\u96c6\uff0c\u4e00\u5957\u7c7b\u4f3cbootstrap\uff09\u4ee5\u5916\uff0c\u8fd8\u5305\u542b\u4e00\u4e9b\u901a\u7528\u7684\u6570\u636e\u6e32\u67d3\uff08Pipe\uff09\u3001\u670d\u52a1\u5de5\u5177\u7c7b\uff08\u9875\u9762\u6807\u9898\u3001\u6eda\u52a8\u6761\u7b49\uff09\u7684\u96c6\u5408\uff0c\u8fd9\u4e9b\u662f\u65e5\u5e38\u5fc5\u4e0d\u53ef\u5c11\u7684\u4e00\u4e9b\u7ec4\u6210\u3002</p><p><strong>@delon/abc</strong></p><p>\u811a\u624b\u67b6\u5185\u63d0\u4f9b\u4e86\u4e00\u5957\u9ed8\u8ba4<a href="/components/" data-url="/components/">\u4e1a\u52a1\u7ec4\u4ef6</a>\uff0c\u8fd9\u4e9b\u7ec4\u4ef6\u62bd\u8c61\u4e86\u63a7\u5236\u53f0\u4e1a\u52a1\u4e2d\u7684\u4e00\u4e9b\u5e38\u89c1\u533a\u5757\u3002\u6211\u4eec\u5c06\u6301\u7eed\u7ef4\u62a4\u548c\u8fed\u4ee3\u8fd9\u4e9b\u7ec4\u4ef6\uff0c\u4e3a\u4e2d\u540e\u53f0\u4e1a\u52a1\u63d0\u4f9b\u6bd4 Ant Design \u57fa\u7840\u7ec4\u4ef6\u66f4\u9ad8\u7ea7\u522b\u7684\u62bd\u8c61\u3002</p><p><strong>@delon/chart</strong></p><p><a href="/chart" data-url="/chart">@delon/chart</a> \u56fe\u8868\u662f\u57fa\u4e8e G2 (3.0) \u7684\u57fa\u7840\u4e0a\u4e8c\u6b21\u5c01\u88c5\uff0c\u63d0\u4f9b\u4e86\u4e1a\u52a1\u4e2d\u5e38\u7528\u7684\u56fe\u8868\u5957\u4ef6\uff0c\u53ef\u4ee5\u5355\u72ec\u4f7f\u7528\uff0c\u4e5f\u53ef\u4ee5\u7ec4\u5408\u8d77\u6765\u5b9e\u73b0\u590d\u6742\u7684\u5c55\u793a\u6548\u679c\u3002</p><p><strong>@delon/form</strong></p><p><a href="/form" data-url="/form">@delon/form</a> \u662f\u4e00\u4e2a\u57fa\u4e8e <a target="_blank" href="http://json-schema.org/" data-url="http://json-schema.org/">JSON Schema</a> \u6807\u51c6\u7684\u52a8\u6001\u6784\u5efa\u8868\u5355\u3002</p><p><strong>@delon/auth</strong></p><p><a href="/auth" data-url="/auth">\u7528\u6237\u8ba4\u8bc1</a>\u6a21\u5757\uff0c\u7528\u4e8e\u89e3\u51b3\u5982\u4f55\u83b7\u53d6\u3001\u5b58\u53d6\u3001\u4f7f\u7528\u8fd9\u4e09\u4e2a\u6b65\u9aa4\u7684\u7528\u6237\u8ba4\u8bc1\u73af\u8282\u3002</p><p><strong>@delon/acl</strong></p><p><a href="/acl" data-url="/acl">ACL</a>\u8bbf\u95ee\u63a7\u5236\u5217\u8868\uff0c\u662f\u4e00\u79cd\u975e\u5e38\u7b80\u5355\u7684\u57fa\u4e8e\u89d2\u8272\u6743\u9650\u63a7\u5236\uff0c\u751a\u81f3\u8fbe\u5230\u63a7\u5236\u67d0\u4e2a\u6309\u94ae\u663e\u9690\u7684\u7c92\u5ea6\u3002</p><p><strong>@delon/cache</strong></p><p>\u5c06\u5b57\u5178\u3001\u57ce\u5e02\u6570\u636e\u7b49<a href="/cache" data-url="/cache">\u7f13\u5b58</a>\u81f3\u5185\u5b58\u6216\u6301\u4e45\u5316\u5f53\u4e2d\uff0c\u6709\u6548\u51cf\u5c11 Http \u8bf7\u6c42\u3002</p><p><strong>@delon/mock</strong></p><p><a href="/mock" data-url="/mock">Mock</a>\u4f1a\u62e6\u622a Angular Http \u8bf7\u6c42\u5e76\u8fd4\u56de\u6d4b\u8bd5\u6570\u636e\u3002</p><p><strong>@delon/util</strong></p><p><a href="/util" data-url="/util">\u65e5\u5e38\u5de5\u5177\u96c6</a>\u3002</p><p><strong>@delon/testing</strong></p><p>\u5e38\u7528\u6d4b\u8bd5\u5957\u4ef6\u3002</p><p><strong>CLI Schematics</strong></p><p><a href="/cli" data-url="/cli">\u547d\u4ee4\u884c\u5de5\u5177</a>\u3002</p><h2 id="\u6587\u6863\u548c\u53cd\u9988">\u6587\u6863\u548c\u53cd\u9988<a onclick="window.location.hash = \'\u6587\u6863\u548c\u53cd\u9988\'" class="anchor">#</a></h2><p>\u4f60\u53ef\u4ee5\u5728 <a href="https://ng-alain.com" data-url="https://ng-alain.com">ng-alain.com</a> \u627e\u5230\u6240\u6709\u7684\u6587\u6863\u3002</p><p>\u968f\u7740\u811a\u624b\u67b6\u7684\u66f4\u65b0\u800c\u4e0d\u65ad\u8fed\u4ee3\uff08<a target="_blank" href="https://github.com/ng-alain/ng-alain/releases" data-url="https://github.com/ng-alain/ng-alain/releases">\u66f4\u65b0\u65e5\u5fd7</a>\uff09\uff0c\u6709\u4efb\u4f55\u95ee\u9898\u548c\u9700\u6c42\u53ef\u4ee5\u53cd\u9988\u5230 <a target="_blank" href="https://github.com/ng-alain/ng-alain/issues" data-url="https://github.com/ng-alain/ng-alain/issues">\u8fd9\u91cc</a>\u3002</p></article></section>',meta:{order:20,title:{"en-US":"Architecture","zh-CN":"\u4f53\u7cfb\u7ed3\u6784"},type:"Basic"},toc:[{id:"\u7ed3\u6784\u56fe",title:"\u7ed3\u6784\u56fe",h:2},{id:"\u6587\u6863\u548c\u53cd\u9988",title:"\u6587\u6863\u548c\u53cd\u9988",h:2}]}},demo:!1},this.codes=[]},d=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"zh-CN":"docs/auth.md"},content:{"zh-CN":{content:'<section class="markdown"><article></article></section>',meta:{order:40,title:{"en-US":"Auth","zh-CN":"\u7528\u6237\u8ba4\u8bc1"},type:"Advance",url:"/auth/getting-started"},toc:[]}},demo:!1},this.codes=[]},c=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"zh-CN":"docs/cache.md"},content:{"zh-CN":{content:'<section class="markdown"><article></article></section>',meta:{order:70,title:{"en-US":"Cache","zh-CN":"\u7f13\u5b58"},type:"Advance",url:"/cache/getting-started"},toc:[]}},demo:!1},this.codes=[]},s=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/changelog.en-US.md","zh-CN":"docs/changelog.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>NG-ALAIN strictly follows <a target="_blank" href="http://semver.org/lang/zh-CN/" data-url="http://semver.org/lang/zh-CN/">Semantic Versioning 2.0.0</a>.</p><h4 id="Release-Schedule">Release Schedule<a onclick="window.location.hash = \'Release-Schedule\'" class="anchor">#</a></h4><ul><li><p>Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).</p></li><li><p>Monthly release: minor version at the end of every month for new features.</p></li><li><p>Major version release is not included in this schedule for breaking change and new features.</p></li></ul><hr><h2 id="8.9.2-(2020-04-07)">8.9.2 (2020-04-07)<a onclick="window.location.hash = \'8.9.2-(2020-04-07)\'" class="anchor">#</a></h2><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:page-header:</strong> fix missing import of `@angular/cdk/observ\u2026 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/789" data-url="https://github.com/ng-alain/delon/issues/789">#789</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/d4566d71e31a3a8a3ce59627709ed86db2d2e5b1" data-url="https://github.com/ng-alain/delon/commit/d4566d71e31a3a8a3ce59627709ed86db2d2e5b1">d4566d7</a>)</p></li><li><p><strong>abc:st:</strong> fix unabled to render <code>yn</code> type (<a target="_blank" href="https://github.com/ng-alain/delon/issues/786" data-url="https://github.com/ng-alain/delon/issues/786">#786</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/e16e02f0175ac89c9a70a51a728ca8ce7ecc74d7" data-url="https://github.com/ng-alain/delon/commit/e16e02f0175ac89c9a70a51a728ca8ce7ecc74d7">e16e02f</a>)</p></li><li><p><strong>theme:title:</strong> fix can\'t set comment node as title (<a target="_blank" href="https://github.com/ng-alain/delon/issues/793" data-url="https://github.com/ng-alain/delon/issues/793">#793</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/8b34f60fa5b081f37f1a5a7db5a4db8d69f48964" data-url="https://github.com/ng-alain/delon/commit/8b34f60fa5b081f37f1a5a7db5a4db8d69f48964">8b34f60</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>form:string:</strong> add <code>change</code>, <code>focus</code>, <code>blur</code>, <code>enter</code> event (<a target="_blank" href="https://github.com/ng-alain/delon/issues/790" data-url="https://github.com/ng-alain/delon/issues/790">#790</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/29373c4d05d94d0ea4d07c504dbfdf28acf245cd" data-url="https://github.com/ng-alain/delon/commit/29373c4d05d94d0ea4d07c504dbfdf28acf245cd">29373c4</a>)</p></li><li><p><strong>theme:http:</strong> add <code>form</code> method (<a target="_blank" href="https://github.com/ng-alain/delon/issues/787" data-url="https://github.com/ng-alain/delon/issues/787">#787</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/2edfd5868135750e67c195669bafc2f741e2952e" data-url="https://github.com/ng-alain/delon/commit/2edfd5868135750e67c195669bafc2f741e2952e">2edfd58</a>)</p></li></ul><h2 id="8.9.1-(2020-04-03)">8.9.1 (2020-04-03)<a onclick="window.location.hash = \'8.9.1-(2020-04-03)\'" class="anchor">#</a></h2><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:st:</strong> fix text overflow in mobile screen (<a target="_blank" href="https://github.com/ng-alain/delon/issues/781" data-url="https://github.com/ng-alain/delon/issues/781">#781</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a055b93647d3aa7116162293947c6527643512e1" data-url="https://github.com/ng-alain/delon/commit/a055b93647d3aa7116162293947c6527643512e1">a055b93</a>)</p></li><li><p><strong>form:widget:upload:</strong> fix hide button when limit upload count (<a target="_blank" href="https://github.com/ng-alain/delon/issues/784" data-url="https://github.com/ng-alain/delon/issues/784">#784</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/acc234793760163d259ceb32f48383e082b72e3f" data-url="https://github.com/ng-alain/delon/commit/acc234793760163d259ceb32f48383e082b72e3f">acc2347</a>)</p></li><li><p><strong>sf:widget:number:</strong> specify widget width via <code>widgetWidth</code> property (<a target="_blank" href="https://github.com/ng-alain/delon/issues/782" data-url="https://github.com/ng-alain/delon/issues/782">#782</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/d2d3557dc8d3d226c8d1c566e272e1ddd9d47eb9" data-url="https://github.com/ng-alain/delon/commit/d2d3557dc8d3d226c8d1c566e272e1ddd9d47eb9">d2d3557</a>)</p></li><li><p><strong>theme:menu:</strong> fix can\'t hited when route include queryString (<a target="_blank" href="https://github.com/ng-alain/delon/issues/783" data-url="https://github.com/ng-alain/delon/issues/783">#783</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/9c9af73258f79c42be8ced9aca35699dc95b9e7c" data-url="https://github.com/ng-alain/delon/commit/9c9af73258f79c42be8ced9aca35699dc95b9e7c">9c9af73</a>)</p></li></ul><h1 id="8.9.0-(2020-02-19)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.8.0...8.9.0" data-url="https://github.com/ng-alain/delon/compare/8.8.0...8.9.0">8.9.0</a> (2020-02-19)<a onclick="window.location.hash = \'8.9.0-(2020-02-19)\'" class="anchor">#</a></h1><h2 id="8.9-as-the-last-minor-version-update-for-Angular-8"><code>8.9</code> as the last minor version update for Angular 8<a onclick="window.location.hash = \'8.9-as-the-last-minor-version-update-for-Angular-8\'" class="anchor">#</a></h2><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sidebar:</strong> fix badge overflow (<a target="_blank" href="https://github.com/ng-alain/delon/issues/769" data-url="https://github.com/ng-alain/delon/issues/769">#769</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/7dc834ede2dc0d0d43d84a7c1ebbc47ddfc94209" data-url="https://github.com/ng-alain/delon/commit/7dc834ede2dc0d0d43d84a7c1ebbc47ddfc94209">7dc834e</a>)</p></li><li><p><strong>abc:st:</strong> fix invalid default value of <code>date</code> type (<a target="_blank" href="https://github.com/ng-alain/delon/issues/765" data-url="https://github.com/ng-alain/delon/issues/765">#765</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a971ac0f5a7729ae8da2d2e6dffbb37e790a3f1e" data-url="https://github.com/ng-alain/delon/commit/a971ac0f5a7729ae8da2d2e6dffbb37e790a3f1e">a971ac0</a>)</p></li><li><p><strong>abc:st:</strong> fix lose <code>dblClick</code> in <code>STChange</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/763" data-url="https://github.com/ng-alain/delon/issues/763">#763</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/153558b3ed74aa335bd0690f2dd238aed259f544" data-url="https://github.com/ng-alain/delon/commit/153558b3ed74aa335bd0690f2dd238aed259f544">153558b</a>)</p></li><li><p><strong>cli:</strong> fix unknown options (<a target="_blank" href="https://github.com/ng-alain/delon/issues/762" data-url="https://github.com/ng-alain/delon/issues/762">#762</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/4dddcb075054e9674157578da09520766531c82f" data-url="https://github.com/ng-alain/delon/commit/4dddcb075054e9674157578da09520766531c82f">4dddcb0</a>)</p></li><li><p><strong>cli:</strong> only supports angular 8.x (<a target="_blank" href="https://github.com/ng-alain/delon/issues/773" data-url="https://github.com/ng-alain/delon/issues/773">#773</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/25684801cdd065688a205c4595dd1c1b6f21b23b" data-url="https://github.com/ng-alain/delon/commit/25684801cdd065688a205c4595dd1c1b6f21b23b">2568480</a>)</p></li><li><p><strong>form:array:</strong> fix invalid error when removed item (<a target="_blank" href="https://github.com/ng-alain/delon/issues/772" data-url="https://github.com/ng-alain/delon/issues/772">#772</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/ad2a3e663af16ffc91af590b71e18936087dfced" data-url="https://github.com/ng-alain/delon/commit/ad2a3e663af16ffc91af590b71e18936087dfced">ad2a3e6</a>)</p></li><li><p><strong>form:date:</strong> fix can\'t custom end format (<a target="_blank" href="https://github.com/ng-alain/delon/issues/770" data-url="https://github.com/ng-alain/delon/issues/770">#770</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/8d3fed1127ff82b579d2b2a2318610ab97bfdd9e" data-url="https://github.com/ng-alain/delon/commit/8d3fed1127ff82b579d2b2a2318610ab97bfdd9e">8d3fed1</a>)</p></li><li><p><strong>theme:_HtpClient:</strong> fix loading status invalid when not subsc\u2026 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/774" data-url="https://github.com/ng-alain/delon/issues/774">#774</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/770ec8b3b9d381cf229e8f1ffd5c8926cc18487c" data-url="https://github.com/ng-alain/delon/commit/770ec8b3b9d381cf229e8f1ffd5c8926cc18487c">770ec8b</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:down-file:</strong> add <code>http-body</code> property (<a target="_blank" href="https://github.com/ng-alain/delon/issues/768" data-url="https://github.com/ng-alain/delon/issues/768">#768</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/748f7e12dfd736f579340c9e777b9fe159080741" data-url="https://github.com/ng-alain/delon/commit/748f7e12dfd736f579340c9e777b9fe159080741">748f7e1</a>)</p></li><li><p><strong>abc:st:</strong> add <code>count</code>, <code>list</code> properites of component (<a target="_blank" href="https://github.com/ng-alain/delon/issues/767" data-url="https://github.com/ng-alain/delon/issues/767">#767</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/21eec5b1ace7dc88e5ba41e12a5d82fa0412be15" data-url="https://github.com/ng-alain/delon/commit/21eec5b1ace7dc88e5ba41e12a5d82fa0412be15">21eec5b</a>)</p></li><li><p><strong>theme:</strong> fix disabled & flex css class (<a target="_blank" href="https://github.com/ng-alain/delon/issues/764" data-url="https://github.com/ng-alain/delon/issues/764">#764</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/842e9d8b42169bf6cdb9409ecea6f8e3fe2d7b0e" data-url="https://github.com/ng-alain/delon/commit/842e9d8b42169bf6cdb9409ecea6f8e3fe2d7b0e">842e9d8</a>)</p></li></ul><h1 id="8.8.0-(2019-12-30)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.7.3...8.8.0" data-url="https://github.com/ng-alain/delon/compare/8.7.3...8.8.0">8.8.0</a> (2019-12-30)<a onclick="window.location.hash = \'8.8.0-(2019-12-30)\'" class="anchor">#</a></h1><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sidebar-nav:</strong> fix keeping expand when changed route in enabled <code>openStrictly</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/759" data-url="https://github.com/ng-alain/delon/issues/759">#759</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a7ab84a1b98a7e714afd6c44c5ef13c02a093d7e" data-url="https://github.com/ng-alain/delon/commit/a7ab84a1b98a7e714afd6c44c5ef13c02a093d7e">a7ab84a</a>)</p></li><li><p><strong>abc:st:</strong> fix filter misalignment (<a target="_blank" href="https://github.com/ng-alain/delon/issues/754" data-url="https://github.com/ng-alain/delon/issues/754">#754</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/7236e70ab73838cb69173ccb53ba992e54852d8e" data-url="https://github.com/ng-alain/delon/commit/7236e70ab73838cb69173ccb53ba992e54852d8e">7236e70</a>)</p></li><li><p><strong>cli:plugin:docker:</strong> fix lower version of node (<a target="_blank" href="https://github.com/ng-alain/delon/issues/753" data-url="https://github.com/ng-alain/delon/issues/753">#753</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/6ce6eb668af8bca0e2d591abf7b54f2e19ef6722" data-url="https://github.com/ng-alain/delon/commit/6ce6eb668af8bca0e2d591abf7b54f2e19ef6722">6ce6eb6</a>)</p></li><li><p><strong>cli:plugin:icon:</strong> fix multi-project pollution (<a target="_blank" href="https://github.com/ng-alain/delon/issues/752" data-url="https://github.com/ng-alain/delon/issues/752">#752</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/889d75af9b330a6deb6ebbe91b4873ec611f2cab" data-url="https://github.com/ng-alain/delon/commit/889d75af9b330a6deb6ebbe91b4873ec611f2cab">889d75a</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:down-file:</strong> support custom file name (<a target="_blank" href="https://github.com/ng-alain/delon/issues/757" data-url="https://github.com/ng-alain/delon/issues/757">#757</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/bafb44cbfdcad73eb9bfed6a155b089e7c77c3e6" data-url="https://github.com/ng-alain/delon/commit/bafb44cbfdcad73eb9bfed6a155b089e7c77c3e6">bafb44c</a>)</p></li><li><p><strong>abc:loading:</strong> add global loading indicator (<a target="_blank" href="https://github.com/ng-alain/delon/issues/755" data-url="https://github.com/ng-alain/delon/issues/755">#755</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/8c1a6d8cc3f041d82007ef4641fe5f641730df5d" data-url="https://github.com/ng-alain/delon/commit/8c1a6d8cc3f041d82007ef4641fe5f641730df5d">8c1a6d8</a>)</p></li></ul><h2 id="8.7.3-(2019-12-20)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.7.2...8.7.3" data-url="https://github.com/ng-alain/delon/compare/8.7.2...8.7.3">8.7.3</a> (2019-12-20)<a onclick="window.location.hash = \'8.7.3-(2019-12-20)\'" class="anchor">#</a></h2><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:se:</strong> fix misplaced labels on small screens (<a target="_blank" href="https://github.com/ng-alain/delon/issues/744" data-url="https://github.com/ng-alain/delon/issues/744">#744</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/1f141a5ded2b8727a0d505057cdc17e04899036c" data-url="https://github.com/ng-alain/delon/commit/1f141a5ded2b8727a0d505057cdc17e04899036c">1f141a5</a>)</p></li><li><p><strong>abc:sidebar-nav:</strong> fix can\'t click text in collapsed mode (<a target="_blank" href="https://github.com/ng-alain/delon/issues/749" data-url="https://github.com/ng-alain/delon/issues/749">#749</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/c5020175ab7e817dac41076a53e9da1cccb4995c" data-url="https://github.com/ng-alain/delon/commit/c5020175ab7e817dac41076a53e9da1cccb4995c">c502017</a>)</p></li><li><p><strong>form:</strong> fix shoule be inherit ui properites of array property (<a target="_blank" href="https://github.com/ng-alain/delon/issues/747" data-url="https://github.com/ng-alain/delon/issues/747">#747</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/0c02bb6846cc3f7e96c5aa30748177bfd8c5916e" data-url="https://github.com/ng-alain/delon/commit/0c02bb6846cc3f7e96c5aa30748177bfd8c5916e">0c02bb6</a>), closes <a target="_blank" href="https://github.com/ng-alain/delon/issues/745" data-url="https://github.com/ng-alain/delon/issues/745">#745</a></p></li><li><p><strong>theme:http.decorator:</strong> fix unable to send array response body (<a target="_blank" href="https://github.com/ng-alain/delon/issues/746" data-url="https://github.com/ng-alain/delon/issues/746">#746</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/3855838b8e8ab2c3468d77267c5643e8ce5fa32a" data-url="https://github.com/ng-alain/delon/commit/3855838b8e8ab2c3468d77267c5643e8ce5fa32a">3855838</a>)</p></li></ul><h2 id="8.7.2-(2019-12-16)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.7.1...8.7.2" data-url="https://github.com/ng-alain/delon/compare/8.7.1...8.7.2">8.7.2</a> (2019-12-16)<a onclick="window.location.hash = \'8.7.2-(2019-12-16)\'" class="anchor">#</a></h2><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sidebar-nav:</strong> fix invalide tooltip render (<a target="_blank" href="https://github.com/ng-alain/delon/issues/736" data-url="https://github.com/ng-alain/delon/issues/736">#736</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/7de70b2642cc063c0d1978df770cb16057f0b07b" data-url="https://github.com/ng-alain/delon/commit/7de70b2642cc063c0d1978df770cb16057f0b07b">7de70b2</a>)</p></li><li><p><strong>abc:sidebar-nav:</strong> fix not found <code>[@alain-default-aside](https://github.com/alain-default-aside)-*</code> var\u2026 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/740" data-url="https://github.com/ng-alain/delon/issues/740">#740</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/8bd3729107e67c2bc0239effb302e680ed5bdca1" data-url="https://github.com/ng-alain/delon/commit/8bd3729107e67c2bc0239effb302e680ed5bdca1">8bd3729</a>)</p></li><li><p><strong>abc:sv,se:</strong> fix spacing between option and Icon (<a target="_blank" href="https://github.com/ng-alain/delon/issues/741" data-url="https://github.com/ng-alain/delon/issues/741">#741</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/1ab2ca5b38614b9f4410c0b3095e926130e1feed" data-url="https://github.com/ng-alain/delon/commit/1ab2ca5b38614b9f4410c0b3095e926130e1feed">1ab2ca5</a>)</p></li></ul><h2 id="8.7.1-(2019-12-11)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.7.0...8.7.1" data-url="https://github.com/ng-alain/delon/compare/8.7.0...8.7.1">8.7.1</a> (2019-12-11)<a onclick="window.location.hash = \'8.7.1-(2019-12-11)\'" class="anchor">#</a></h2><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sidebar-nav:</strong> fix style in disabled (<a target="_blank" href="https://github.com/ng-alain/delon/issues/731" data-url="https://github.com/ng-alain/delon/issues/731">#731</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/7759299fa6822e98c2d1133134db74ae59dfa453" data-url="https://github.com/ng-alain/delon/commit/7759299fa6822e98c2d1133134db74ae59dfa453">7759299</a>)</p></li><li><p><strong>abc:st:</strong> fix duplcate title when <code>responsive</code> is <code>false</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/733" data-url="https://github.com/ng-alain/delon/issues/733">#733</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/baab4a7a00cf737c344342e085def4e01b54a27a" data-url="https://github.com/ng-alain/delon/commit/baab4a7a00cf737c344342e085def4e01b54a27a">baab4a7</a>)</p></li><li><p><strong>chart:water-wave:</strong> fix first time unable to render (<a target="_blank" href="https://github.com/ng-alain/delon/issues/734" data-url="https://github.com/ng-alain/delon/issues/734">#734</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/cbbd573a43e404098f23c28b8ff0fb5f3beb87b3" data-url="https://github.com/ng-alain/delon/commit/cbbd573a43e404098f23c28b8ff0fb5f3beb87b3">cbbd573</a>)</p></li></ul><h1 id="8.7.0-(2019-12-06)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.6.0...8.7.0" data-url="https://github.com/ng-alain/delon/compare/8.6.0...8.7.0">8.7.0</a> (2019-12-06)<a onclick="window.location.hash = \'8.7.0-(2019-12-06)\'" class="anchor">#</a></h1><h3 id="Scaffold">Scaffold<a onclick="window.location.hash = \'Scaffold\'" class="anchor">#</a></h3><ul><li><p>fix: should handle exceptions more friendly in <code>DefaultInterceptor</code> (<a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/1411" data-url="https://github.com/ng-alain/ng-alain/pull/1411">#1411</a>)</p></li></ul><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:st:</strong> fix expand width value in strict mode (<a target="_blank" href="https://github.com/ng-alain/delon/issues/720" data-url="https://github.com/ng-alain/delon/issues/720">#720</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/248c27d71891323975d48bfa2010805b4bab9072" data-url="https://github.com/ng-alain/delon/commit/248c27d71891323975d48bfa2010805b4bab9072">248c27d</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sidebar-nav:</strong> support html in <code>text</code> or <code>i18n</code> property (<a target="_blank" href="https://github.com/ng-alain/delon/issues/723" data-url="https://github.com/ng-alain/delon/issues/723">#723</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/d58f5b1edb4109d5d21a2e1d7b4c1aa6fed0dca4" data-url="https://github.com/ng-alain/delon/commit/d58f5b1edb4109d5d21a2e1d7b4c1aa6fed0dca4">d58f5b1</a>), closes <a target="_blank" href="https://github.com/ng-alain/delon/issues/716" data-url="https://github.com/ng-alain/delon/issues/716">#716</a></p></li><li><p><strong>abc:st:</strong> add <code>error</code> supports multiple types (<a target="_blank" href="https://github.com/ng-alain/delon/issues/721" data-url="https://github.com/ng-alain/delon/issues/721">#721</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/436a4e56346784e96ad2aaa4c268d3415d46f590" data-url="https://github.com/ng-alain/delon/commit/436a4e56346784e96ad2aaa4c268d3415d46f590">436a4e5</a>)</p></li><li><p><strong>abc:st:</strong> add <code>setRow</code> method in component (<a target="_blank" href="https://github.com/ng-alain/delon/issues/725" data-url="https://github.com/ng-alain/delon/issues/725">#725</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/170bab2a2ac9a7bbd2b92465183d711e03be8333" data-url="https://github.com/ng-alain/delon/commit/170bab2a2ac9a7bbd2b92465183d711e03be8333">170bab2</a>)</p></li><li><p><strong>auth:</strong> add <code>onlyToken</code> property in <code>clear</code> method (<a target="_blank" href="https://github.com/ng-alain/delon/issues/717" data-url="https://github.com/ng-alain/delon/issues/717">#717</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/f05ab21f9cac6d9db46af3689974be19693a8058" data-url="https://github.com/ng-alain/delon/commit/f05ab21f9cac6d9db46af3689974be19693a8058">f05ab21</a>)</p></li><li><p><strong>theme:MenuService:</strong> add <code>getItem</code>, <code>setItem</code> methods (<a target="_blank" href="https://github.com/ng-alain/delon/issues/722" data-url="https://github.com/ng-alain/delon/issues/722">#722</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/2c054935b94aa465dec4ef091994087fa32c053d" data-url="https://github.com/ng-alain/delon/commit/2c054935b94aa465dec4ef091994087fa32c053d">2c05493</a>)</p></li></ul><h1 id="8.6.0-(2019-11-15)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.5.1...8.6.0" data-url="https://github.com/ng-alain/delon/compare/8.5.1...8.6.0">8.6.0</a> (2019-11-15)<a onclick="window.location.hash = \'8.6.0-(2019-11-15)\'" class="anchor">#</a></h1><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:reuse-tab:</strong> fix duplicate render list (<a target="_blank" href="https://github.com/ng-alain/delon/issues/707" data-url="https://github.com/ng-alain/delon/issues/707">#707</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/2e697afd5ecea6f24bb281d56e653f9efd71a199" data-url="https://github.com/ng-alain/delon/commit/2e697afd5ecea6f24bb281d56e653f9efd71a199">2e697af</a>)</p></li><li><p><strong>abc:xlsx:</strong> fix duplicate loading xlsx.js when XLSX exists (<a target="_blank" href="https://github.com/ng-alain/delon/issues/705" data-url="https://github.com/ng-alain/delon/issues/705">#705</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/88e63a2941f5b9e6f6a26c15ed28162d90b4db4f" data-url="https://github.com/ng-alain/delon/commit/88e63a2941f5b9e6f6a26c15ed28162d90b4db4f">88e63a2</a>)</p></li><li><p><strong>form:array:</strong> fix losing <code>optionalHelp</code> property (<a target="_blank" href="https://github.com/ng-alain/delon/issues/713" data-url="https://github.com/ng-alain/delon/issues/713">#713</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/8c574efd5e7f31c7d5bf82c7c861ff5bc63f945d" data-url="https://github.com/ng-alain/delon/commit/8c574efd5e7f31c7d5bf82c7c861ff5bc63f945d">8c574ef</a>)</p></li><li><p><strong>form:checkbox:</strong> fix losing <code>optionalHelp</code> property (<a target="_blank" href="https://github.com/ng-alain/delon/issues/708" data-url="https://github.com/ng-alain/delon/issues/708">#708</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/e3585ea9034b2b02e9160ad3dc551fe6cc8291d2" data-url="https://github.com/ng-alain/delon/commit/e3585ea9034b2b02e9160ad3dc551fe6cc8291d2">e3585ea</a>)</p></li><li><p><strong>abc:table:</strong> fix invalid global <code>sortReName</code> property in mulitisort (<a target="_blank" href="https://github.com/ng-alain/delon/issues/714" data-url="https://github.com/ng-alain/delon/issues/714">#714</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/00f998d8939fde2ef2a60a54417e8ae7556e1dd4" data-url="https://github.com/ng-alain/delon/commit/00f998d8939fde2ef2a60a54417e8ae7556e1dd4">00f998d</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sv,se:</strong> <code>optional</code>, <code>optionalHelp</code> support `TemplateRef\u2026 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/710" data-url="https://github.com/ng-alain/delon/issues/710">#710</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a456201ba7a4ae3df68cc4c0470aa3ee6fab86ee" data-url="https://github.com/ng-alain/delon/commit/a456201ba7a4ae3df68cc4c0470aa3ee6fab86ee">a456201</a>)</p></li><li><p><strong>abc:table:</strong> add <code>keepEmptyKey</code> of mulitisort (<a target="_blank" href="https://github.com/ng-alain/delon/issues/714" data-url="https://github.com/ng-alain/delon/issues/714">#714</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/00f998d8939fde2ef2a60a54417e8ae7556e1dd4" data-url="https://github.com/ng-alain/delon/commit/00f998d8939fde2ef2a60a54417e8ae7556e1dd4">00f998d</a>)</p></li><li><p><strong>abc:table:</strong> add <code>loaded</code> type event of <code>change</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/709" data-url="https://github.com/ng-alain/delon/issues/709">#709</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/6d3f0171c97a7f8c45ea3c3f799079506df3ffbf" data-url="https://github.com/ng-alain/delon/commit/6d3f0171c97a7f8c45ea3c3f799079506df3ffbf">6d3f017</a>)</p></li><li><p><strong>cli:</strong> add cnpm reminder (<a target="_blank" href="https://github.com/ng-alain/delon/issues/704" data-url="https://github.com/ng-alain/delon/issues/704">#704</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/9e131d76276120725a574859f33b9130aa31c6a5" data-url="https://github.com/ng-alain/delon/commit/9e131d76276120725a574859f33b9130aa31c6a5">9e131d7</a>)</p></li><li><p><strong>form:</strong> add <code>cleanValue</code> property (<a target="_blank" href="https://github.com/ng-alain/delon/issues/711" data-url="https://github.com/ng-alain/delon/issues/711">#711</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/7e55136768578df5f054948df6ad2ca4c2a942e1" data-url="https://github.com/ng-alain/delon/commit/7e55136768578df5f054948df6ad2ca4c2a942e1">7e55136</a>)</p></li><li><p><strong>form:</strong> add <code>noColon</code> property (<a target="_blank" href="https://github.com/ng-alain/delon/issues/698" data-url="https://github.com/ng-alain/delon/issues/698">#698</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/2c34460226818d1bc78ad7e62790ff4a32eb2791" data-url="https://github.com/ng-alain/delon/commit/2c34460226818d1bc78ad7e62790ff4a32eb2791">2c34460</a>)</p></li></ul><h2 id="8.5.1-(2019-10-28)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.5.0...8.5.1" data-url="https://github.com/ng-alain/delon/compare/8.5.0...8.5.1">8.5.1</a> (2019-10-28)<a onclick="window.location.hash = \'8.5.1-(2019-10-28)\'" class="anchor">#</a></h2><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:reuse-tab:</strong> fix style in card type (<a target="_blank" href="https://github.com/ng-alain/delon/issues/701" data-url="https://github.com/ng-alain/delon/issues/701">#701</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/8eaa89d" data-url="https://github.com/ng-alain/delon/commit/8eaa89d">8eaa89d</a>)</p></li><li><p><strong>abc:st:</strong> shoule be auto 100% width when not specified (<a target="_blank" href="https://github.com/ng-alain/delon/issues/700" data-url="https://github.com/ng-alain/delon/issues/700">#700</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/36a95f6" data-url="https://github.com/ng-alain/delon/commit/36a95f6">36a95f6</a>)</p></li></ul><h1 id="8.5.0-(2019-09-25)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.4.0...8.5.0" data-url="https://github.com/ng-alain/delon/compare/8.4.0...8.5.0">8.5.0</a> (2019-09-25)<a onclick="window.location.hash = \'8.5.0-(2019-09-25)\'" class="anchor">#</a></h1><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sidebar-nav:</strong> fix repeat render item in external link (<a target="_blank" href="https://github.com/ng-alain/delon/issues/688" data-url="https://github.com/ng-alain/delon/issues/688">#688</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/fbf52c4" data-url="https://github.com/ng-alain/delon/commit/fbf52c4">fbf52c4</a>)</p></li><li><p><strong>abc:st:</strong> fix ingore invalid <code>tag</code> or <code>badge</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/687" data-url="https://github.com/ng-alain/delon/issues/687">#687</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/3752205" data-url="https://github.com/ng-alain/delon/commit/3752205">3752205</a>)</p></li><li><p><strong>abc:st:</strong> fix render null value in export to excel (<a target="_blank" href="https://github.com/ng-alain/delon/issues/689" data-url="https://github.com/ng-alain/delon/issues/689">#689</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/2aef5a9" data-url="https://github.com/ng-alain/delon/commit/2aef5a9">2aef5a9</a>)</p></li><li><p><strong>abc:st:</strong> should be stop propagation in button event when <code>expandRowByClick</code> is <code>true</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/692" data-url="https://github.com/ng-alain/delon/issues/692">#692</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/da8d99d" data-url="https://github.com/ng-alain/delon/commit/da8d99d">da8d99d</a>)</p></li><li><p><strong>sf:cascader:</strong> removed <code>select</code> event, muse be use <code>selectionChange</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/684" data-url="https://github.com/ng-alain/delon/issues/684">#684</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/1ed0ae1" data-url="https://github.com/ng-alain/delon/commit/1ed0ae1">1ed0ae1</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:reuse-tab:</strong> add <code>tabMaxWidth</code> property (<a target="_blank" href="https://github.com/ng-alain/delon/issues/690" data-url="https://github.com/ng-alain/delon/issues/690">#690</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/19cc818" data-url="https://github.com/ng-alain/delon/commit/19cc818">19cc818</a>)</p></li><li><p><strong>abc:st:</strong> add <code>divider</code> type in button (<a target="_blank" href="https://github.com/ng-alain/delon/issues/683" data-url="https://github.com/ng-alain/delon/issues/683">#683</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/d9f6014" data-url="https://github.com/ng-alain/delon/commit/d9f6014">d9f6014</a>)</p></li><li><p><strong>form:autocomplete:</strong> add <code>change</code> event (<a target="_blank" href="https://github.com/ng-alain/delon/issues/691" data-url="https://github.com/ng-alain/delon/issues/691">#691</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/f4215e4" data-url="https://github.com/ng-alain/delon/commit/f4215e4">f4215e4</a>)</p></li><li><p><strong>theme:http:</strong> add <code>@Payload</code> decorator (<a target="_blank" href="https://github.com/ng-alain/delon/issues/686" data-url="https://github.com/ng-alain/delon/issues/686">#686</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/123c29e" data-url="https://github.com/ng-alain/delon/commit/123c29e">123c29e</a>)</p></li><li><p><strong>theme:http:</strong> use <code>::id</code> to indicate escaping (<a target="_blank" href="https://github.com/ng-alain/delon/issues/686" data-url="https://github.com/ng-alain/delon/issues/686">#686</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/123c29e" data-url="https://github.com/ng-alain/delon/commit/123c29e">123c29e</a>)</p></li></ul><h3 id="BREAKING-CHANGES">BREAKING CHANGES<a onclick="window.location.hash = \'BREAKING-CHANGES\'" class="anchor">#</a></h3><ul><li><p><strong>abc:count-down</strong> Upgrade to <code>8.x</code>, its version has <a target="_blank" href="https://github.com/cipchk/ngx-countdown/releases/tag/8.0.0" data-url="https://github.com/cipchk/ngx-countdown/releases/tag/8.0.0">breaking changes</a></p></li></ul><h1 id="8.4.0-(2019-09-01)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.3.0...8.4.0" data-url="https://github.com/ng-alain/delon/compare/8.3.0...8.4.0">8.4.0</a> (2019-09-01)<a onclick="window.location.hash = \'8.4.0-(2019-09-01)\'" class="anchor">#</a></h1><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sidebar-nav:</strong> fix invalid click children title in collapsed (<a target="_blank" href="https://github.com/ng-alain/delon/issues/673" data-url="https://github.com/ng-alain/delon/issues/673">#673</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/b6c1fc6" data-url="https://github.com/ng-alain/delon/commit/b6c1fc6">b6c1fc6</a>)</p></li><li><p><strong>abc:sidebar-nav:</strong> fix style misplacement (<a target="_blank" href="https://github.com/ng-alain/delon/issues/677" data-url="https://github.com/ng-alain/delon/issues/677">#677</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/efd9bb1" data-url="https://github.com/ng-alain/delon/commit/efd9bb1">efd9bb1</a>)</p></li><li><p><strong>abc:st:</strong> fix ingored incomplete request when has new request (<a target="_blank" href="https://github.com/ng-alain/delon/issues/674" data-url="https://github.com/ng-alain/delon/issues/674">#674</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/c98ae19" data-url="https://github.com/ng-alain/delon/commit/c98ae19">c98ae19</a>)</p></li><li><p><strong>abc:st:</strong> fix invalid title in export (<a target="_blank" href="https://github.com/ng-alain/delon/issues/672" data-url="https://github.com/ng-alain/delon/issues/672">#672</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/48ca08f" data-url="https://github.com/ng-alain/delon/commit/48ca08f">48ca08f</a>)</p></li><li><p><strong>abc:sv:</strong> fix <code>labelWidth</code> type in <code>SVConfig</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/668" data-url="https://github.com/ng-alain/delon/issues/668">#668</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/43cf770" data-url="https://github.com/ng-alain/delon/commit/43cf770">43cf770</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:st:</strong> add <code>pop</code> property (<a target="_blank" href="https://github.com/ng-alain/delon/issues/676" data-url="https://github.com/ng-alain/delon/issues/676">#676</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a078f02" data-url="https://github.com/ng-alain/delon/commit/a078f02">a078f02</a>)</p></li><li><p><strong>cache:</strong> add <code>type</code>, <code>expire</code> in <code>DelonCacheConfig</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/669" data-url="https://github.com/ng-alain/delon/issues/669">#669</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/9d393fb" data-url="https://github.com/ng-alain/delon/commit/9d393fb">9d393fb</a>)</p></li></ul><h1 id="8.3.0-(2019-08-03)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.2.0...8.3.0" data-url="https://github.com/ng-alain/delon/compare/8.2.0...8.3.0">8.3.0</a> (2019-08-03)<a onclick="window.location.hash = \'8.3.0-(2019-08-03)\'" class="anchor">#</a></h1><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:reuse-tab:</strong> should be always get title from menu data (<a target="_blank" href="https://github.com/ng-alain/delon/issues/661" data-url="https://github.com/ng-alain/delon/issues/661">#661</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/6e63418" data-url="https://github.com/ng-alain/delon/commit/6e63418">6e63418</a>)</p></li><li><p><strong>abc:sidebar:</strong> fix invalid subnode when include badge value in collapsed mode (<a target="_blank" href="https://github.com/ng-alain/delon/issues/665" data-url="https://github.com/ng-alain/delon/issues/665">#665</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/763a27e" data-url="https://github.com/ng-alain/delon/commit/763a27e">763a27e</a>)</p></li><li><p><strong>abc:st:</strong> fix ignore catch error of http request when component is destroyed (<a target="_blank" href="https://github.com/ng-alain/delon/issues/658" data-url="https://github.com/ng-alain/delon/issues/658">#658</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/6bd97eb" data-url="https://github.com/ng-alain/delon/commit/6bd97eb">6bd97eb</a>)</p></li><li><p><strong>theme:title:</strong> should be avoid can\'t get title when rendered componet in <code>NavigationEnd</code> event (<a target="_blank" href="https://github.com/ng-alain/delon/issues/660" data-url="https://github.com/ng-alain/delon/issues/660">#660</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/0db451d" data-url="https://github.com/ng-alain/delon/commit/0db451d">0db451d</a>)</p></li><li><p><strong>abc:st:</strong> fix ingore truncate of <code>img</code> column when <code>strictBehavior</code> is <code>truncate</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/656" data-url="https://github.com/ng-alain/delon/issues/656">#656</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/4ae8f13" data-url="https://github.com/ng-alain/delon/commit/4ae8f13">4ae8f13</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:st:</strong> add <code>lazyLoad</code> property in <code>req</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/656" data-url="https://github.com/ng-alain/delon/issues/656">#656</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/4ae8f13" data-url="https://github.com/ng-alain/delon/commit/4ae8f13">4ae8f13</a>)</p></li><li><p><strong>abc:st:</strong> add <code>STColumnTitle</code> type of <code>title</code> property` (<a target="_blank" href="https://github.com/ng-alain/delon/issues/657" data-url="https://github.com/ng-alain/delon/issues/657">#657</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/9408ccc" data-url="https://github.com/ng-alain/delon/commit/9408ccc">9408ccc</a>)</p></li><li><p><strong>acl:</strong> support specify guard fail url in router data (<a target="_blank" href="https://github.com/ng-alain/delon/issues/666" data-url="https://github.com/ng-alain/delon/issues/666">#666</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/bee66fd" data-url="https://github.com/ng-alain/delon/commit/bee66fd">bee66fd</a>)</p></li><li><p><strong>form:*:</strong> support date-fns format in <code>date</code>, <code>time</code> widgets (<a target="_blank" href="https://github.com/ng-alain/delon/issues/663" data-url="https://github.com/ng-alain/delon/issues/663">#663</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/ba91193" data-url="https://github.com/ng-alain/delon/commit/ba91193">ba91193</a>)</p></li></ul><h1 id="8.2.0-(2019-07-20)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.1.0...8.2.0" data-url="https://github.com/ng-alain/delon/compare/8.1.0...8.2.0">8.2.0</a> (2019-07-20)<a onclick="window.location.hash = \'8.2.0-(2019-07-20)\'" class="anchor">#</a></h1><h3 id="Scaffold">Scaffold<a onclick="window.location.hash = \'Scaffold\'" class="anchor">#</a></h3><ul><li><p>fix: fix <code>alain-default.less</code> file write always append mode (<a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/1248" data-url="https://github.com/ng-alain/ng-alain/pull/1248">#1248</a>)</p></li></ul><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:*:</strong> fix element as a block element in <code>sv-title</code>, <code>se-title</code> components (<a target="_blank" href="https://github.com/ng-alain/delon/issues/651" data-url="https://github.com/ng-alain/delon/issues/651">#651</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/d92a21d" data-url="https://github.com/ng-alain/delon/commit/d92a21d">d92a21d</a>)</p></li><li><p><strong>auth:</strong> fix <code>referrer.url</code> should be always latest router url (<a target="_blank" href="https://github.com/ng-alain/delon/issues/654" data-url="https://github.com/ng-alain/delon/issues/654">#654</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/89098e1" data-url="https://github.com/ng-alain/delon/commit/89098e1">89098e1</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:reuse-tab:</strong> add <code>tabType</code> property, support <code>card</code> style (<a target="_blank" href="https://github.com/ng-alain/delon/issues/652" data-url="https://github.com/ng-alain/delon/issues/652">#652</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/9da990f" data-url="https://github.com/ng-alain/delon/commit/9da990f">9da990f</a>)</p></li><li><p><strong>abc:*:</strong> add ellipsis of long label text in <code>sv</code> and <code>se</code> components (<a target="_blank" href="https://github.com/ng-alain/delon/issues/651" data-url="https://github.com/ng-alain/delon/issues/651">#651</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/d92a21d" data-url="https://github.com/ng-alain/delon/commit/d92a21d">d92a21d</a>)</p></li></ul><h1 id="8.1.0-(2019-07-12)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.0.0...8.1.0" data-url="https://github.com/ng-alain/delon/compare/8.0.0...8.1.0">8.1.0</a> (2019-07-12)<a onclick="window.location.hash = \'8.1.0-(2019-07-12)\'" class="anchor">#</a></h1><h3 id="Scaffold">Scaffold<a onclick="window.location.hash = \'Scaffold\'" class="anchor">#</a></h3><ul><li><p>feat: add proxying to a backend server (<a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/1237" data-url="https://github.com/ng-alain/ng-alain/pull/1237">#1237</a>)</p></li></ul><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:st:</strong> fix losing default <code>page</code> config (<a target="_blank" href="https://github.com/ng-alain/delon/issues/649" data-url="https://github.com/ng-alain/delon/issues/649">#649</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/8f59ea2" data-url="https://github.com/ng-alain/delon/commit/8f59ea2">8f59ea2</a>)</p></li><li><p><strong>form:</strong> fix losing inherit of <code>ui</code> property value (<a target="_blank" href="https://github.com/ng-alain/delon/issues/647" data-url="https://github.com/ng-alain/delon/issues/647">#647</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/f2df673" data-url="https://github.com/ng-alain/delon/commit/f2df673">f2df673</a>)</p></li><li><p><strong>form:</strong> fix missing style of widget item (<a target="_blank" href="https://github.com/ng-alain/delon/issues/646" data-url="https://github.com/ng-alain/delon/issues/646">#646</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/fe2f0fe" data-url="https://github.com/ng-alain/delon/commit/fe2f0fe">fe2f0fe</a>)</p></li><li><p><strong>theme:menu:</strong> fix can be choose one of <code>text</code> or <code>i18n</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/648" data-url="https://github.com/ng-alain/delon/issues/648">#648</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/3200998" data-url="https://github.com/ng-alain/delon/commit/3200998">3200998</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:st:</strong> add <code>index</code> argument of <code>format</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/644" data-url="https://github.com/ng-alain/delon/issues/644">#644</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/498d0b7" data-url="https://github.com/ng-alain/delon/commit/498d0b7">498d0b7</a>)</p></li><li><p><strong>cli:</strong> add proxying to a backend server (<a target="_blank" href="https://github.com/ng-alain/delon/issues/645" data-url="https://github.com/ng-alain/delon/issues/645">#645</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/10c91d8" data-url="https://github.com/ng-alain/delon/commit/10c91d8">10c91d8</a>)</p></li></ul><h1 id="8.0.0-(2019-07-03)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.0.0-rc.1...8.0.0" data-url="https://github.com/ng-alain/delon/compare/8.0.0-rc.1...8.0.0">8.0.0</a> (2019-07-03)<a onclick="window.location.hash = \'8.0.0-(2019-07-03)\'" class="anchor">#</a></h1><p><strong><code>8.0.0</code> version has some breaking changes. pls read more <a href="https://ng-alain.com/docs/upgrade-v8/en" data-url="https://ng-alain.com/docs/upgrade-v8/en">Upgrade Guide</a>.</strong></p><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>theme:style:</strong> fix aside user style (<a target="_blank" href="https://github.com/ng-alain/delon/issues/639" data-url="https://github.com/ng-alain/delon/issues/639">#639</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/ede1d15" data-url="https://github.com/ng-alain/delon/commit/ede1d15">ede1d15</a>)</p></li><li><p><strong>abc:st:</strong> ingore <code>title</code> required in <code>STColumn</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/632" data-url="https://github.com/ng-alain/delon/issues/632">#632</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/69608c5" data-url="https://github.com/ng-alain/delon/commit/69608c5">69608c5</a>)</p></li><li><p><strong>cli:plugin:icon:</strong> fix unidentified <code>nzType</code> property (<a target="_blank" href="https://github.com/ng-alain/delon/issues/637" data-url="https://github.com/ng-alain/delon/issues/637">#637</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/2784a5a" data-url="https://github.com/ng-alain/delon/commit/2784a5a">2784a5a</a>)</p></li><li><p><strong>form:array:</strong> fix disabled add & remove buttons when <code>readOnly</code> is <code>true</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/633" data-url="https://github.com/ng-alain/delon/issues/633">#633</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/15194cc" data-url="https://github.com/ng-alain/delon/commit/15194cc">15194cc</a>)</p></li><li><p><strong>form:array:</strong> fix invalid value subscript of path value (<a target="_blank" href="https://github.com/ng-alain/delon/issues/628" data-url="https://github.com/ng-alain/delon/issues/628">#628</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/09807f7" data-url="https://github.com/ng-alain/delon/commit/09807f7">09807f7</a>)</p></li><li><p><strong>form:upload:</strong> fix invalid <code>showUploadList</code> property (<a target="_blank" href="https://github.com/ng-alain/delon/issues/634" data-url="https://github.com/ng-alain/delon/issues/634">#634</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/54c3b90" data-url="https://github.com/ng-alain/delon/commit/54c3b90">54c3b90</a>)</p></li><li><p><strong>form:*:</strong> fix invalid render value when call <code>setValue</code> method (<a target="_blank" href="https://github.com/ng-alain/delon/issues/622" data-url="https://github.com/ng-alain/delon/issues/622">#622</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/4cea3b7" data-url="https://github.com/ng-alain/delon/commit/4cea3b7">4cea3b7</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:st:</strong> add <code>tooltip</code> property in button (<a target="_blank" href="https://github.com/ng-alain/delon/issues/640" data-url="https://github.com/ng-alain/delon/issues/640">#640</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/181e3a1" data-url="https://github.com/ng-alain/delon/commit/181e3a1">181e3a1</a>)</p></li><li><p><strong>abc:st:</strong> add <code>emitReload</code> of <code>resetColumns</code> method (<a target="_blank" href="https://github.com/ng-alain/delon/issues/635" data-url="https://github.com/ng-alain/delon/issues/635">#635</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a96123e" data-url="https://github.com/ng-alain/delon/commit/a96123e">a96123e</a>)</p></li><li><p><strong>abc:down-file:</strong> add <code>down-file_not-support</code> & <code>down-file__disabled</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/624" data-url="https://github.com/ng-alain/delon/issues/624">#624</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/2369153" data-url="https://github.com/ng-alain/delon/commit/2369153">2369153</a>)</p></li><li><p><strong>abc:st:</strong> <code>confirmText</code>, <code>clearText</code> support i18n text (<a target="_blank" href="https://github.com/ng-alain/delon/issues/618" data-url="https://github.com/ng-alain/delon/issues/618">#618</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a8cd300" data-url="https://github.com/ng-alain/delon/commit/a8cd300">a8cd300</a>)</p></li><li><p><strong>abc:st:</strong> add keyword in filter (<a target="_blank" href="https://github.com/ng-alain/delon/issues/612" data-url="https://github.com/ng-alain/delon/issues/612">#612</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/543236d" data-url="https://github.com/ng-alain/delon/commit/543236d">543236d</a>)</p></li><li><p><strong>form:</strong> <code>optionalHelp</code> support complex attributes (<a target="_blank" href="https://github.com/ng-alain/delon/issues/621" data-url="https://github.com/ng-alain/delon/issues/621">#621</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/d45fddf" data-url="https://github.com/ng-alain/delon/commit/d45fddf">d45fddf</a>)</p></li><li><p><strong>form:</strong> support i18n (<a target="_blank" href="https://github.com/ng-alain/delon/issues/625" data-url="https://github.com/ng-alain/delon/issues/625">#625</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/e1bbbdb" data-url="https://github.com/ng-alain/delon/commit/e1bbbdb">e1bbbdb</a>)</p></li><li><p><strong>util:deepMergeKey:</strong> support <code>null</code> & <code>undefined</code> of objects parament (<a target="_blank" href="https://github.com/ng-alain/delon/issues/620" data-url="https://github.com/ng-alain/delon/issues/620">#620</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a8ddbb8" data-url="https://github.com/ng-alain/delon/commit/a8ddbb8">a8ddbb8</a>)</p></li></ul><h3 id="Performance-Improvements">Performance Improvements<a onclick="window.location.hash = \'Performance-Improvements\'" class="anchor">#</a></h3><ul><li><p><strong>cli:</strong> optimize to provide more detailed errors (<a target="_blank" href="https://github.com/ng-alain/delon/issues/619" data-url="https://github.com/ng-alain/delon/issues/619">#619</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/7ebef13" data-url="https://github.com/ng-alain/delon/commit/7ebef13">7ebef13</a>)</p></li></ul><h3 id="BREAKING-CHANGES">BREAKING CHANGES<a onclick="window.location.hash = \'BREAKING-CHANGES\'" class="anchor">#</a></h3><ul><li><p><code>DelonACLModule</code> muse be using <code>forRoot()</code></p></li></ul><h2 id="Old-Version">Old Version<a onclick="window.location.hash = \'Old-Version\'" class="anchor">#</a></h2><p>All releases notes can be found <a target="_blank" href="https://github.com/ng-alain/ng-alain/releases" data-url="https://github.com/ng-alain/ng-alain/releases">here</a></p></article></section>',meta:{order:100,title:"Change Log",type:"Other"},toc:[{id:"8.9.2-(2020-04-07)",title:"8.9.2 (2020-04-07)",h:2},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.9.1-(2020-04-03)",title:"8.9.1 (2020-04-03)",h:2},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"8.9.0-(2020-02-19)",title:"8.9.0 (2020-02-19)",h:1},{id:"8.9-as-the-last-minor-version-update-for-Angular-8",title:"8.9 as the last minor version update for Angular 8",h:2},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.8.0-(2019-12-30)",title:"8.8.0 (2019-12-30)",h:1},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.7.3-(2019-12-20)",title:"8.7.3 (2019-12-20)",h:2},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"8.7.2-(2019-12-16)",title:"8.7.2 (2019-12-16)",h:2},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"8.7.1-(2019-12-11)",title:"8.7.1 (2019-12-11)",h:2},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"8.7.0-(2019-12-06)",title:"8.7.0 (2019-12-06)",h:1},{id:"Scaffold",title:"Scaffold",h:3},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.6.0-(2019-11-15)",title:"8.6.0 (2019-11-15)",h:1},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.5.1-(2019-10-28)",title:"8.5.1 (2019-10-28)",h:2},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"8.5.0-(2019-09-25)",title:"8.5.0 (2019-09-25)",h:1},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"BREAKING-CHANGES",title:"BREAKING CHANGES",h:3},{id:"8.4.0-(2019-09-01)",title:"8.4.0 (2019-09-01)",h:1},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.3.0-(2019-08-03)",title:"8.3.0 (2019-08-03)",h:1},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.2.0-(2019-07-20)",title:"8.2.0 (2019-07-20)",h:1},{id:"Scaffold",title:"Scaffold",h:3},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.1.0-(2019-07-12)",title:"8.1.0 (2019-07-12)",h:1},{id:"Scaffold",title:"Scaffold",h:3},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.0.0-(2019-07-03)",title:"8.0.0 (2019-07-03)",h:1},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"Performance-Improvements",title:"Performance Improvements",h:3},{id:"BREAKING-CHANGES",title:"BREAKING CHANGES",h:3},{id:"Old-Version",title:"Old Version",h:2}]},"zh-CN":{content:'<section class="markdown"><article><p>NG-ALAIN \u4e25\u683c\u9075\u5faa <a target="_blank" href="http://semver.org/lang/zh-CN/" data-url="http://semver.org/lang/zh-CN/">Semantic Versioning 2.0.0</a> \u8bed\u4e49\u5316\u7248\u672c\u89c4\u8303\u3002</p><h4 id="\u53d1\u5e03\u5468\u671f">\u53d1\u5e03\u5468\u671f<a onclick="window.location.hash = \'\u53d1\u5e03\u5468\u671f\'" class="anchor">#</a></h4><ul><li><p>\u4fee\u8ba2\u7248\u672c\u53f7\uff1a\u6bcf\u5468\u672b\u4f1a\u8fdb\u884c\u65e5\u5e38 bugfix \u66f4\u65b0\u3002\uff08\u5982\u679c\u6709\u7d27\u6025\u7684 bugfix\uff0c\u5219\u4efb\u4f55\u65f6\u5019\u90fd\u53ef\u53d1\u5e03\uff09</p></li><li><p>\u6b21\u7248\u672c\u53f7\uff1a\u6bcf\u6708\u53d1\u5e03\u4e00\u4e2a\u5e26\u6709\u65b0\u7279\u6027\u7684\u5411\u4e0b\u517c\u5bb9\u7684\u7248\u672c\u3002</p></li><li><p>\u4e3b\u7248\u672c\u53f7\uff1a\u542b\u6709\u7834\u574f\u6027\u66f4\u65b0\u548c\u65b0\u7279\u6027\uff0c\u4e0d\u5728\u53d1\u5e03\u5468\u671f\u5185\u3002</p></li></ul><hr><h2 id="8.9.2-(2020-04-07)">8.9.2 (2020-04-07)<a onclick="window.location.hash = \'8.9.2-(2020-04-07)\'" class="anchor">#</a></h2><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:page-header:</strong> \u4fee\u590d\u7f3a\u5c11\u5bfc\u5165\u6a21\u5757 <code>@angular/cdk/observers</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/789" data-url="https://github.com/ng-alain/delon/issues/789">#789</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/d4566d71e31a3a8a3ce59627709ed86db2d2e5b1" data-url="https://github.com/ng-alain/delon/commit/d4566d71e31a3a8a3ce59627709ed86db2d2e5b1">d4566d7</a>)</p></li><li><p><strong>abc:st:</strong> \u4fee\u590d\u65e0\u6cd5\u6e32\u67d3 <code>yn</code> \u7c7b\u578b (<a target="_blank" href="https://github.com/ng-alain/delon/issues/786" data-url="https://github.com/ng-alain/delon/issues/786">#786</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/e16e02f0175ac89c9a70a51a728ca8ce7ecc74d7" data-url="https://github.com/ng-alain/delon/commit/e16e02f0175ac89c9a70a51a728ca8ce7ecc74d7">e16e02f</a>)</p></li><li><p><strong>theme:title:</strong> \u4fee\u590d\u4e0d\u53ef\u4ee5\u628a\u6ce8\u91ca\u8282\u70b9\u8bbe\u7f6e\u4e3a\u6807\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/793" data-url="https://github.com/ng-alain/delon/issues/793">#793</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/8b34f60fa5b081f37f1a5a7db5a4db8d69f48964" data-url="https://github.com/ng-alain/delon/commit/8b34f60fa5b081f37f1a5a7db5a4db8d69f48964">8b34f60</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>form:string:</strong> \u65b0\u589e <code>change</code>, <code>focus</code>, <code>blur</code>, <code>enter</code> \u4e8b\u4ef6 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/790" data-url="https://github.com/ng-alain/delon/issues/790">#790</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/29373c4d05d94d0ea4d07c504dbfdf28acf245cd" data-url="https://github.com/ng-alain/delon/commit/29373c4d05d94d0ea4d07c504dbfdf28acf245cd">29373c4</a>)</p></li><li><p><strong>theme:http:</strong> \u65b0\u589e <code>form</code> \u65b9\u6cd5\u7528\u4e8e\u4f20\u7edf\u8868\u5355 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/787" data-url="https://github.com/ng-alain/delon/issues/787">#787</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/2edfd5868135750e67c195669bafc2f741e2952e" data-url="https://github.com/ng-alain/delon/commit/2edfd5868135750e67c195669bafc2f741e2952e">2edfd58</a>)</p></li></ul><h2 id="8.9.1-(2020-04-03)">8.9.1 (2020-04-03)<a onclick="window.location.hash = \'8.9.1-(2020-04-03)\'" class="anchor">#</a></h2><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:st:</strong> \u4fee\u590d\u5c0f\u5c4f\u5e55\u6587\u672c\u6ea2\u51fa (<a target="_blank" href="https://github.com/ng-alain/delon/issues/781" data-url="https://github.com/ng-alain/delon/issues/781">#781</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a055b93647d3aa7116162293947c6527643512e1" data-url="https://github.com/ng-alain/delon/commit/a055b93647d3aa7116162293947c6527643512e1">a055b93</a>)</p></li><li><p><strong>form:widget:upload:</strong> \u4fee\u590d\u901a\u8fc7 <code>limitFileCount</code> \u9650\u5236\u4e0a\u4f20\u6570\u636e\u5c06\u4e0d\u518d\u663e\u793a\u4e0a\u4f20\u6309\u94ae (<a target="_blank" href="https://github.com/ng-alain/delon/issues/784" data-url="https://github.com/ng-alain/delon/issues/784">#784</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/acc234793760163d259ceb32f48383e082b72e3f" data-url="https://github.com/ng-alain/delon/commit/acc234793760163d259ceb32f48383e082b72e3f">acc2347</a>)</p></li><li><p><strong>sf:widget:number:</strong> \u4fee\u590d\u901a\u8fc7 <code>widgetWidth</code> \u5c5e\u6027\u6765\u6307\u5b9a <code>nz-number</code> \u7684\u5bbd\u5ea6 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/782" data-url="https://github.com/ng-alain/delon/issues/782">#782</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/d2d3557dc8d3d226c8d1c566e272e1ddd9d47eb9" data-url="https://github.com/ng-alain/delon/commit/d2d3557dc8d3d226c8d1c566e272e1ddd9d47eb9">d2d3557</a>)</p></li><li><p><strong>theme:menu:</strong> \u4fee\u590d\u5f53 QueryString \u5b58\u5728\u65f6\u65e0\u6cd5\u9ad8\u4eae (<a target="_blank" href="https://github.com/ng-alain/delon/issues/783" data-url="https://github.com/ng-alain/delon/issues/783">#783</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/9c9af73258f79c42be8ced9aca35699dc95b9e7c" data-url="https://github.com/ng-alain/delon/commit/9c9af73258f79c42be8ced9aca35699dc95b9e7c">9c9af73</a>)</p></li></ul><h1 id="8.9.0-(2020-02-19)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.8.0...8.9.0" data-url="https://github.com/ng-alain/delon/compare/8.8.0...8.9.0">8.9.0</a> (2020-02-19)<a onclick="window.location.hash = \'8.9.0-(2020-02-19)\'" class="anchor">#</a></h1><h2 id="8.9-\u4f5c\u4e3a-Angular-8-\u7684\u6700\u540e\u4e00\u4e2a\u6b21\u7248\u672c\u66f4\u65b0"><code>8.9</code> \u4f5c\u4e3a Angular 8 \u7684\u6700\u540e\u4e00\u4e2a\u6b21\u7248\u672c\u66f4\u65b0<a onclick="window.location.hash = \'8.9-\u4f5c\u4e3a-Angular-8-\u7684\u6700\u540e\u4e00\u4e2a\u6b21\u7248\u672c\u66f4\u65b0\'" class="anchor">#</a></h2><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sidebar:</strong> \u4fee\u590d\u5fae\u6807\u5927\u4e8e99\u65f6\u6ea2\u51fa (<a target="_blank" href="https://github.com/ng-alain/delon/issues/769" data-url="https://github.com/ng-alain/delon/issues/769">#769</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/7dc834ede2dc0d0d43d84a7c1ebbc47ddfc94209" data-url="https://github.com/ng-alain/delon/commit/7dc834ede2dc0d0d43d84a7c1ebbc47ddfc94209">7dc834e</a>)</p></li><li><p><strong>abc:st:</strong> \u4fee\u590d <code>data</code> \u7c7b\u578b\u65f6\u9ed8\u8ba4\u503c\u65e0\u6548 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/765" data-url="https://github.com/ng-alain/delon/issues/765">#765</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a971ac0f5a7729ae8da2d2e6dffbb37e790a3f1e" data-url="https://github.com/ng-alain/delon/commit/a971ac0f5a7729ae8da2d2e6dffbb37e790a3f1e">a971ac0</a>)</p></li><li><p><strong>abc:st:</strong> \u4fee\u590d <code>STChange</code> \u7f3a\u5c11 <code>dblClick</code> \u7c7b\u578b (<a target="_blank" href="https://github.com/ng-alain/delon/issues/763" data-url="https://github.com/ng-alain/delon/issues/763">#763</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/153558b3ed74aa335bd0690f2dd238aed259f544" data-url="https://github.com/ng-alain/delon/commit/153558b3ed74aa335bd0690f2dd238aed259f544">153558b</a>)</p></li><li><p><strong>cli:</strong> \u4fee\u590d <code>ng-alain:tpl</code> \u521b\u5efa\u6a21\u677f\u65f6\u65e0\u6cd5\u81ea\u5b9a\u4e49\u4f20\u5165\u53c2\u6570 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/762" data-url="https://github.com/ng-alain/delon/issues/762">#762</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/4dddcb075054e9674157578da09520766531c82f" data-url="https://github.com/ng-alain/delon/commit/4dddcb075054e9674157578da09520766531c82f">4dddcb0</a>)</p></li><li><p><strong>cli:</strong> \u9650\u5b9a <code>ng add ng-alain</code> \u53ea\u652f\u6301 Angular 8.x \u7248\u672c (<a target="_blank" href="https://github.com/ng-alain/delon/issues/773" data-url="https://github.com/ng-alain/delon/issues/773">#773</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/25684801cdd065688a205c4595dd1c1b6f21b23b" data-url="https://github.com/ng-alain/delon/commit/25684801cdd065688a205c4595dd1c1b6f21b23b">2568480</a>)</p></li><li><p><strong>form:array:</strong> \u4fee\u590d\u79fb\u9664\u9879\u5e94\u91cd\u65b0\u6821\u9a8c (<a target="_blank" href="https://github.com/ng-alain/delon/issues/772" data-url="https://github.com/ng-alain/delon/issues/772">#772</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/ad2a3e663af16ffc91af590b71e18936087dfced" data-url="https://github.com/ng-alain/delon/commit/ad2a3e663af16ffc91af590b71e18936087dfced">ad2a3e6</a>)</p></li><li><p><strong>form:date:</strong> \u4fee\u590d\u65e0\u6cd5\u81ea\u5b9a\u4e49 <code>end</code> \u683c\u5f0f (<a target="_blank" href="https://github.com/ng-alain/delon/issues/770" data-url="https://github.com/ng-alain/delon/issues/770">#770</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/8d3fed1127ff82b579d2b2a2318610ab97bfdd9e" data-url="https://github.com/ng-alain/delon/commit/8d3fed1127ff82b579d2b2a2318610ab97bfdd9e">8d3fed1</a>)</p></li><li><p><strong>theme:_HtpClient:</strong> \u4fee\u590d\u672a\u8ba2\u9605\u65f6\u5bfc\u81f4 <code>loading</code> \u72b6\u6001\u503c\u4e0d\u6b63\u786e (<a target="_blank" href="https://github.com/ng-alain/delon/issues/774" data-url="https://github.com/ng-alain/delon/issues/774">#774</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/770ec8b3b9d381cf229e8f1ffd5c8926cc18487c" data-url="https://github.com/ng-alain/delon/commit/770ec8b3b9d381cf229e8f1ffd5c8926cc18487c">770ec8b</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:down-file:</strong> \u65b0\u589e <code>http-body</code> \u5c5e\u6027 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/768" data-url="https://github.com/ng-alain/delon/issues/768">#768</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/748f7e12dfd736f579340c9e777b9fe159080741" data-url="https://github.com/ng-alain/delon/commit/748f7e12dfd736f579340c9e777b9fe159080741">748f7e1</a>)</p></li><li><p><strong>abc:st:</strong> \u65b0\u589e <code>count</code>, <code>list</code> \u5c5e\u6027\u53c2\u6570\u7528\u4e8e\u83b7\u53d6\u5f53\u7136\u8868\u683c\u6761\u76ee\u53ca\u5217\u8868 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/767" data-url="https://github.com/ng-alain/delon/issues/767">#767</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/21eec5b1ace7dc88e5ba41e12a5d82fa0412be15" data-url="https://github.com/ng-alain/delon/commit/21eec5b1ace7dc88e5ba41e12a5d82fa0412be15">21eec5b</a>)</p></li><li><p><strong>theme:</strong> \u65b0\u589e <code>disabled</code> \u548c <code>flex</code> \u5de5\u5177\u7c7b (<a target="_blank" href="https://github.com/ng-alain/delon/issues/764" data-url="https://github.com/ng-alain/delon/issues/764">#764</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/842e9d8b42169bf6cdb9409ecea6f8e3fe2d7b0e" data-url="https://github.com/ng-alain/delon/commit/842e9d8b42169bf6cdb9409ecea6f8e3fe2d7b0e">842e9d8</a>)</p></li></ul><h1 id="8.8.0-(2019-12-30)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.7.3...8.8.0" data-url="https://github.com/ng-alain/delon/compare/8.7.3...8.8.0">8.8.0</a> (2019-12-30)<a onclick="window.location.hash = \'8.8.0-(2019-12-30)\'" class="anchor">#</a></h1><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sidebar-nav:</strong> \u4fee\u590d\u542f\u7528 <code>openStrictly</code> \u4e0b\u5207\u6362\u8def\u7531\u540e\u4fdd\u6301\u5c55\u5f00\u72b6\u6001 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/759" data-url="https://github.com/ng-alain/delon/issues/759">#759</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a7ab84a1b98a7e714afd6c44c5ef13c02a093d7e" data-url="https://github.com/ng-alain/delon/commit/a7ab84a1b98a7e714afd6c44c5ef13c02a093d7e">a7ab84a</a>)</p></li><li><p><strong>abc:st:</strong> \u4fee\u590d\u8fc7\u6ee4\u64cd\u4f5c\u7b26\u9519\u4f4d (<a target="_blank" href="https://github.com/ng-alain/delon/issues/754" data-url="https://github.com/ng-alain/delon/issues/754">#754</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/7236e70ab73838cb69173ccb53ba992e54852d8e" data-url="https://github.com/ng-alain/delon/commit/7236e70ab73838cb69173ccb53ba992e54852d8e">7236e70</a>)</p></li><li><p><strong>cli:plugin:docker:</strong> \u4fee\u590d node \u7248\u672c\u8fc7\u4f4e\u5bfc\u81f4\u7f16\u8bd1\u5931\u8d25 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/753" data-url="https://github.com/ng-alain/delon/issues/753">#753</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/6ce6eb668af8bca0e2d591abf7b54f2e19ef6722" data-url="https://github.com/ng-alain/delon/commit/6ce6eb668af8bca0e2d591abf7b54f2e19ef6722">6ce6eb6</a>)</p></li><li><p><strong>cli:plugin:icon:</strong> \u4fee\u590d\u591a\u9879\u76ee\u65f6\u4f1a\u6c61\u67d3 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/752" data-url="https://github.com/ng-alain/delon/issues/752">#752</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/889d75af9b330a6deb6ebbe91b4873ec611f2cab" data-url="https://github.com/ng-alain/delon/commit/889d75af9b330a6deb6ebbe91b4873ec611f2cab">889d75a</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:down-file:</strong> \u65b0\u589e\u652f\u4ed8\u81ea\u5b9a\u4e49\u6587\u4ef6\u540d (<a target="_blank" href="https://github.com/ng-alain/delon/issues/757" data-url="https://github.com/ng-alain/delon/issues/757">#757</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/bafb44cbfdcad73eb9bfed6a155b089e7c77c3e6" data-url="https://github.com/ng-alain/delon/commit/bafb44cbfdcad73eb9bfed6a155b089e7c77c3e6">bafb44c</a>)</p></li><li><p><strong>abc:loading:</strong> \u65b0\u589e\u5168\u5c40\u52a0\u8f7d\u6307\u793a\u7b26\u7ec4\u4ef6 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/755" data-url="https://github.com/ng-alain/delon/issues/755">#755</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/8c1a6d8cc3f041d82007ef4641fe5f641730df5d" data-url="https://github.com/ng-alain/delon/commit/8c1a6d8cc3f041d82007ef4641fe5f641730df5d">8c1a6d8</a>)</p></li></ul><h2 id="8.7.3-(2019-12-20)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.7.2...8.7.3" data-url="https://github.com/ng-alain/delon/compare/8.7.2...8.7.3">8.7.3</a> (2019-12-20)<a onclick="window.location.hash = \'8.7.3-(2019-12-20)\'" class="anchor">#</a></h2><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:se:</strong> \u4fee\u590d\u5c0f\u5c4f\u5e55\u6807\u7b7e\u9519\u4f4d (<a target="_blank" href="https://github.com/ng-alain/delon/issues/744" data-url="https://github.com/ng-alain/delon/issues/744">#744</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/1f141a5ded2b8727a0d505057cdc17e04899036c" data-url="https://github.com/ng-alain/delon/commit/1f141a5ded2b8727a0d505057cdc17e04899036c">1f141a5</a>)</p></li><li><p><strong>abc:sidebar-nav:</strong> \u4fee\u590d\u6536\u7f29\u4e0b\u70b9\u51fb\u6587\u672c\u65e0\u6cd5\u8def\u7531\u8df3\u8f6c (<a target="_blank" href="https://github.com/ng-alain/delon/issues/749" data-url="https://github.com/ng-alain/delon/issues/749">#749</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/c5020175ab7e817dac41076a53e9da1cccb4995c" data-url="https://github.com/ng-alain/delon/commit/c5020175ab7e817dac41076a53e9da1cccb4995c">c502017</a>)</p></li><li><p><strong>form:</strong> \u4fee\u590d\u6570\u7ec4\u6ca1\u6709\u7ee7\u627f UI \u9009\u9879 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/747" data-url="https://github.com/ng-alain/delon/issues/747">#747</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/0c02bb6846cc3f7e96c5aa30748177bfd8c5916e" data-url="https://github.com/ng-alain/delon/commit/0c02bb6846cc3f7e96c5aa30748177bfd8c5916e">0c02bb6</a>), closes <a target="_blank" href="https://github.com/ng-alain/delon/issues/745" data-url="https://github.com/ng-alain/delon/issues/745">#745</a></p></li><li><p><strong>theme:http.decorator:</strong> \u4fee\u590d\u54cd\u5e94\u4f53\u65e0\u6cd5\u53d1\u9001\u6570\u7ec4 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/746" data-url="https://github.com/ng-alain/delon/issues/746">#746</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/3855838b8e8ab2c3468d77267c5643e8ce5fa32a" data-url="https://github.com/ng-alain/delon/commit/3855838b8e8ab2c3468d77267c5643e8ce5fa32a">3855838</a>)</p></li></ul><h2 id="8.7.2-(2019-12-16)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.7.1...8.7.2" data-url="https://github.com/ng-alain/delon/compare/8.7.1...8.7.2">8.7.2</a> (2019-12-16)<a onclick="window.location.hash = \'8.7.2-(2019-12-16)\'" class="anchor">#</a></h2><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sidebar-nav:</strong> \u4fee\u590d <code>tooltip</code> \u65e0\u6548\u6e32\u67d3 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/736" data-url="https://github.com/ng-alain/delon/issues/736">#736</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/7de70b2642cc063c0d1978df770cb16057f0b07b" data-url="https://github.com/ng-alain/delon/commit/7de70b2642cc063c0d1978df770cb16057f0b07b">7de70b2</a>)</p></li><li><p><strong>abc:sidebar-nav:</strong> \u4fee\u590d\u5546\u4e1a\u4e3b\u9898\u672a\u627e\u5230 <code>[@alain-default-aside](https://github.com/alain-default-aside)-*</code> var\u2026 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/740" data-url="https://github.com/ng-alain/delon/issues/740">#740</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/8bd3729107e67c2bc0239effb302e680ed5bdca1" data-url="https://github.com/ng-alain/delon/commit/8bd3729107e67c2bc0239effb302e680ed5bdca1">8bd3729</a>)</p></li><li><p><strong>abc:sv,se:</strong> \u4fee\u590d\u53ef\u9009\u6587\u672c\u4e0eIcon\u56fe\u6807\u95f4\u8ddd\u95ee\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/741" data-url="https://github.com/ng-alain/delon/issues/741">#741</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/1ab2ca5b38614b9f4410c0b3095e926130e1feed" data-url="https://github.com/ng-alain/delon/commit/1ab2ca5b38614b9f4410c0b3095e926130e1feed">1ab2ca5</a>)</p></li></ul><h2 id="8.7.1-(2019-12-11)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.7.0...8.7.1" data-url="https://github.com/ng-alain/delon/compare/8.7.0...8.7.1">8.7.1</a> (2019-12-11)<a onclick="window.location.hash = \'8.7.1-(2019-12-11)\'" class="anchor">#</a></h2><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sidebar-nav:</strong> \u4fee\u590d\u7981\u7528\u83dc\u5355\u9879\u6837\u5f0f\u95ee\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/731" data-url="https://github.com/ng-alain/delon/issues/731">#731</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/7759299fa6822e98c2d1133134db74ae59dfa453" data-url="https://github.com/ng-alain/delon/commit/7759299fa6822e98c2d1133134db74ae59dfa453">7759299</a>)</p></li><li><p><strong>abc:st:</strong> \u4fee\u590d <code>responsive</code> \u4e3a <code>false</code> \u65f6\u4f9d\u7136\u663e\u793a\u575a\u6807\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/733" data-url="https://github.com/ng-alain/delon/issues/733">#733</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/baab4a7a00cf737c344342e085def4e01b54a27a" data-url="https://github.com/ng-alain/delon/commit/baab4a7a00cf737c344342e085def4e01b54a27a">baab4a7</a>)</p></li><li><p><strong>chart:water-wave:</strong> \u4fee\u590d\u9996\u6b21\u52a0\u8f7d\u65e0\u6cd5\u6e32\u67d3\u95ee\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/734" data-url="https://github.com/ng-alain/delon/issues/734">#734</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/cbbd573a43e404098f23c28b8ff0fb5f3beb87b3" data-url="https://github.com/ng-alain/delon/commit/cbbd573a43e404098f23c28b8ff0fb5f3beb87b3">cbbd573</a>)</p></li></ul><h1 id="8.7.0-(2019-12-06)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.6.0...8.7.0" data-url="https://github.com/ng-alain/delon/compare/8.6.0...8.7.0">8.7.0</a> (2019-12-06)<a onclick="window.location.hash = \'8.7.0-(2019-12-06)\'" class="anchor">#</a></h1><h3 id="Scaffold">Scaffold<a onclick="window.location.hash = \'Scaffold\'" class="anchor">#</a></h3><ul><li><p>fix: \u4fee\u590d <code>DefaultInterceptor.handleData()</code> \u5e94\u66f4\u53cb\u597d\u7684\u5904\u7406\u5f02\u5e38\u9519\u8bef (<a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/1411" data-url="https://github.com/ng-alain/ng-alain/pull/1411">#1411</a>)</p></li></ul><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:st:</strong> \u4fee\u590d strict \u5bbd\u5ea6\u6a21\u5f0f\u4e0b\u6269\u5c55\u64cd\u4f5c\u7b26\u5217\u5bbd\u95ee\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/720" data-url="https://github.com/ng-alain/delon/issues/720">#720</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/248c27d71891323975d48bfa2010805b4bab9072" data-url="https://github.com/ng-alain/delon/commit/248c27d71891323975d48bfa2010805b4bab9072">248c27d</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sidebar-nav:</strong> \u65b0\u589e <code>text</code>\u3001<code>i18n</code> \u5c5e\u6027\u652f\u6301HTML (<a target="_blank" href="https://github.com/ng-alain/delon/issues/723" data-url="https://github.com/ng-alain/delon/issues/723">#723</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/d58f5b1edb4109d5d21a2e1d7b4c1aa6fed0dca4" data-url="https://github.com/ng-alain/delon/commit/d58f5b1edb4109d5d21a2e1d7b4c1aa6fed0dca4">d58f5b1</a>), closes <a target="_blank" href="https://github.com/ng-alain/delon/issues/716" data-url="https://github.com/ng-alain/delon/issues/716">#716</a></p></li><li><p><strong>abc:st:</strong> \u65b0\u589e <code>error</code> \u652f\u6301\u591a\u79cd\u9519\u8bef\u7c7b\u578b (<a target="_blank" href="https://github.com/ng-alain/delon/issues/721" data-url="https://github.com/ng-alain/delon/issues/721">#721</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/436a4e56346784e96ad2aaa4c268d3415d46f590" data-url="https://github.com/ng-alain/delon/commit/436a4e56346784e96ad2aaa4c268d3415d46f590">436a4e5</a>)</p></li><li><p><strong>abc:st:</strong> \u65b0\u589e <code>setRow</code> \u65b9\u6cd5\u7528\u4e8e\u66f4\u65b0\u67d0\u5217\u7684\u90e8\u5206\u6570\u636e (<a target="_blank" href="https://github.com/ng-alain/delon/issues/725" data-url="https://github.com/ng-alain/delon/issues/725">#725</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/170bab2a2ac9a7bbd2b92465183d711e03be8333" data-url="https://github.com/ng-alain/delon/commit/170bab2a2ac9a7bbd2b92465183d711e03be8333">170bab2</a>)</p></li><li><p><strong>auth:</strong> \u65b0\u589e <code>clear</code> \u65b9\u6cd5\u5141\u8bb8\u53ea\u6e05\u7a7a Token \u5c5e\u6027 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/717" data-url="https://github.com/ng-alain/delon/issues/717">#717</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/f05ab21f9cac6d9db46af3689974be19693a8058" data-url="https://github.com/ng-alain/delon/commit/f05ab21f9cac6d9db46af3689974be19693a8058">f05ab21</a>)</p></li><li><p><strong>theme:MenuService:</strong> \u65b0\u589e <code>getItem</code>\u3001<code>setItem</code> \u65b9\u6cd5\uff0c\u7528\u4e8e\u66f4\u65b0\u67d0\u4e2a\u83dc\u5355\u9879 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/722" data-url="https://github.com/ng-alain/delon/issues/722">#722</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/2c054935b94aa465dec4ef091994087fa32c053d" data-url="https://github.com/ng-alain/delon/commit/2c054935b94aa465dec4ef091994087fa32c053d">2c05493</a>)</p></li></ul><h1 id="8.6.0-(2019-11-15)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.5.1...8.6.0" data-url="https://github.com/ng-alain/delon/compare/8.5.1...8.6.0">8.6.0</a> (2019-11-15)<a onclick="window.location.hash = \'8.6.0-(2019-11-15)\'" class="anchor">#</a></h1><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:reuse-tab:</strong> \u4fee\u590d\u91cd\u590d\u6027\u6807\u7b7e\u6e32\u67d3\uff0c\u5bfc\u81f4\u5feb\u901f\u5207\u6362 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/707" data-url="https://github.com/ng-alain/delon/issues/707">#707</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/2e697afd5ecea6f24bb281d56e653f9efd71a199" data-url="https://github.com/ng-alain/delon/commit/2e697afd5ecea6f24bb281d56e653f9efd71a199">2e697af</a>)</p></li><li><p><strong>abc:xlsx:</strong> \u4fee\u590d\u5f53 <code>XLSX</code> \u5bf9\u8c61\u5b58\u5728\u65f6\u5e94\u5ffd\u7565\u52a0\u8f7d xlsx.js (<a target="_blank" href="https://github.com/ng-alain/delon/issues/705" data-url="https://github.com/ng-alain/delon/issues/705">#705</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/88e63a2941f5b9e6f6a26c15ed28162d90b4db4f" data-url="https://github.com/ng-alain/delon/commit/88e63a2941f5b9e6f6a26c15ed28162d90b4db4f">88e63a2</a>)</p></li><li><p><strong>form:array:</strong> \u4fee\u590d <code>optionalHelp</code> \u5c5e\u6027\u4e0d\u751f\u6548 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/713" data-url="https://github.com/ng-alain/delon/issues/713">#713</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/8c574efd5e7f31c7d5bf82c7c861ff5bc63f945d" data-url="https://github.com/ng-alain/delon/commit/8c574efd5e7f31c7d5bf82c7c861ff5bc63f945d">8c574ef</a>)</p></li><li><p><strong>form:checkbox:</strong> \u4fee\u590d <code>optionalHelp</code> \u5c5e\u6027\u4e0d\u751f\u6548 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/708" data-url="https://github.com/ng-alain/delon/issues/708">#708</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/e3585ea9034b2b02e9160ad3dc551fe6cc8291d2" data-url="https://github.com/ng-alain/delon/commit/e3585ea9034b2b02e9160ad3dc551fe6cc8291d2">e3585ea</a>)</p></li><li><p><strong>abc:table:</strong> \u4fee\u590d\u65e0\u6548\u5168\u5c40 <code>sortReName</code> \u5c5e\u6027\u4e0d\u751f\u6548 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/714" data-url="https://github.com/ng-alain/delon/issues/714">#714</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/00f998d8939fde2ef2a60a54417e8ae7556e1dd4" data-url="https://github.com/ng-alain/delon/commit/00f998d8939fde2ef2a60a54417e8ae7556e1dd4">00f998d</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sv,se:</strong> \u65b0\u589e <code>optional</code>, <code>optionalHelp</code> \u652f\u6301 <code>TemplateRef</code> \u81ea\u5b9a\u4e49\u6a21\u677f (<a target="_blank" href="https://github.com/ng-alain/delon/issues/710" data-url="https://github.com/ng-alain/delon/issues/710">#710</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a456201ba7a4ae3df68cc4c0470aa3ee6fab86ee" data-url="https://github.com/ng-alain/delon/commit/a456201ba7a4ae3df68cc4c0470aa3ee6fab86ee">a456201</a>)</p></li><li><p><strong>abc:table:</strong> \u65b0\u589e <code>keepEmptyKey</code> \u5c5e\u6027\u6307\u5b9a\u591a\u6392\u5e8f\u65f6\u662f\u5426\u59cb\u7ec8\u53d1\u9001\u952e\u540d (<a target="_blank" href="https://github.com/ng-alain/delon/issues/714" data-url="https://github.com/ng-alain/delon/issues/714">#714</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/00f998d8939fde2ef2a60a54417e8ae7556e1dd4" data-url="https://github.com/ng-alain/delon/commit/00f998d8939fde2ef2a60a54417e8ae7556e1dd4">00f998d</a>)</p></li><li><p><strong>abc:table:</strong> \u65b0\u589e <code>change</code> \u4e8b\u4ef6\u7c7b\u578b <code>loaded</code> \u5f53\u6570\u636e\u52a0\u8f7d\u5b8c\u6210\u540e\u89e6\u53d1 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/709" data-url="https://github.com/ng-alain/delon/issues/709">#709</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/6d3f0171c97a7f8c45ea3c3f799079506df3ffbf" data-url="https://github.com/ng-alain/delon/commit/6d3f0171c97a7f8c45ea3c3f799079506df3ffbf">6d3f017</a>)</p></li><li><p><strong>cli:</strong> \u65b0\u589e\u7981\u6b62\u4f7f\u7528 <code>cnpm</code> \u63d0\u9192\u6587\u672c (<a target="_blank" href="https://github.com/ng-alain/delon/issues/704" data-url="https://github.com/ng-alain/delon/issues/704">#704</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/9e131d76276120725a574859f33b9130aa31c6a5" data-url="https://github.com/ng-alain/delon/commit/9e131d76276120725a574859f33b9130aa31c6a5">9e131d7</a>)</p></li><li><p><strong>form:</strong> \u65b0\u589e <code>cleanValue</code> \u5c5e\u6027\uff0c\u662f\u5426\u6e05\u7a7a\u672a\u5b9a\u4e49Schema\u503c (<a target="_blank" href="https://github.com/ng-alain/delon/issues/711" data-url="https://github.com/ng-alain/delon/issues/711">#711</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/7e55136768578df5f054948df6ad2ca4c2a942e1" data-url="https://github.com/ng-alain/delon/commit/7e55136768578df5f054948df6ad2ca4c2a942e1">7e55136</a>)</p></li><li><p><strong>form:</strong> \u65b0\u589e <code>noColon</code> \u5c5e\u6027 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/698" data-url="https://github.com/ng-alain/delon/issues/698">#698</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/2c34460226818d1bc78ad7e62790ff4a32eb2791" data-url="https://github.com/ng-alain/delon/commit/2c34460226818d1bc78ad7e62790ff4a32eb2791">2c34460</a>)</p></li></ul><h2 id="8.5.1-(2019-10-28)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.5.0...8.5.1" data-url="https://github.com/ng-alain/delon/compare/8.5.0...8.5.1">8.5.1</a> (2019-10-28)<a onclick="window.location.hash = \'8.5.1-(2019-10-28)\'" class="anchor">#</a></h2><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:reuse-tab:</strong> \u4fee\u590d\u5361\u7247\u5f0f\u6837\u5f0f\u95ee\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/701" data-url="https://github.com/ng-alain/delon/issues/701">#701</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/8eaa89d" data-url="https://github.com/ng-alain/delon/commit/8eaa89d">8eaa89d</a>)</p></li><li><p><strong>abc:st:</strong> \u4fee\u590d\u5f53\u6307\u5b9a <code>width</code> \u65f6\u5e94\u81ea\u52a8\u586b\u5145\u672a\u6307\u5b9a\u7684\u5217\u4e3a <code>100%</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/700" data-url="https://github.com/ng-alain/delon/issues/700">#700</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/36a95f6" data-url="https://github.com/ng-alain/delon/commit/36a95f6">36a95f6</a>)</p></li></ul><h1 id="8.5.0-(2019-09-25)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.4.0...8.5.0" data-url="https://github.com/ng-alain/delon/compare/8.4.0...8.5.0">8.5.0</a> (2019-09-25)<a onclick="window.location.hash = \'8.5.0-(2019-09-25)\'" class="anchor">#</a></h1><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sidebar-nav:</strong> \u4fee\u590d\u91cd\u590d\u6e32\u67d3\u5916\u90e8\u94fe\u63a5 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/688" data-url="https://github.com/ng-alain/delon/issues/688">#688</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/fbf52c4" data-url="https://github.com/ng-alain/delon/commit/fbf52c4">fbf52c4</a>)</p></li><li><p><strong>abc:st:</strong> \u4fee\u590d <code>tag</code> \u6216 <code>badge</code> \u7a7a\u503c\u629b\u9519 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/687" data-url="https://github.com/ng-alain/delon/issues/687">#687</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/3752205" data-url="https://github.com/ng-alain/delon/commit/3752205">3752205</a>)</p></li><li><p><strong>abc:st:</strong> \u4fee\u590d\u5bfc\u51fa Excel \u65f6\u7a7a\u503c\u663e\u793a null \u5b57\u7b26\u95ee\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/689" data-url="https://github.com/ng-alain/delon/issues/689">#689</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/2aef5a9" data-url="https://github.com/ng-alain/delon/commit/2aef5a9">2aef5a9</a>)</p></li><li><p><strong>abc:st:</strong> \u4fee\u590d\u5f53\u8bbe\u7f6e <code>expandRowByClick: true</code> \u65f6\u6309\u94ae\u70b9\u51fb\u4f1a\u89e6\u53d1\u5c55\u5f00\u95ee\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/692" data-url="https://github.com/ng-alain/delon/issues/692">#692</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/da8d99d" data-url="https://github.com/ng-alain/delon/commit/da8d99d">da8d99d</a>)</p></li><li><p><strong>sf:cascader:</strong> \u4fee\u590d <code>select</code> \u65e0\u6548\u4e8b\u4ef6\uff0c\u5e94\u4f7f\u7528 <code>selectionChange</code> \u66ff\u4ee3 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/684" data-url="https://github.com/ng-alain/delon/issues/684">#684</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/1ed0ae1" data-url="https://github.com/ng-alain/delon/commit/1ed0ae1">1ed0ae1</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:reuse-tab:</strong> \u65b0\u589e <code>tabMaxWidth</code> \u5c5e\u6027 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/690" data-url="https://github.com/ng-alain/delon/issues/690">#690</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/19cc818" data-url="https://github.com/ng-alain/delon/commit/19cc818">19cc818</a>)</p></li><li><p><strong>abc:st:</strong> \u65b0\u589e <code>divider</code> \u6309\u94ae\u7c7b\u578b (<a target="_blank" href="https://github.com/ng-alain/delon/issues/683" data-url="https://github.com/ng-alain/delon/issues/683">#683</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/d9f6014" data-url="https://github.com/ng-alain/delon/commit/d9f6014">d9f6014</a>)</p></li><li><p><strong>form:autocomplete:</strong> \u65b0\u589e <code>change</code> \u4e8b\u4ef6 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/691" data-url="https://github.com/ng-alain/delon/issues/691">#691</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/f4215e4" data-url="https://github.com/ng-alain/delon/commit/f4215e4">f4215e4</a>)</p></li><li><p><strong>theme:http:</strong> \u65b0\u589e <code>@Payload</code> \u88c5\u9970 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/686" data-url="https://github.com/ng-alain/delon/issues/686">#686</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/123c29e" data-url="https://github.com/ng-alain/delon/commit/123c29e">123c29e</a>)</p></li><li><p><strong>theme:http:</strong> \u65b0\u589e <code>::id</code> \u8868\u793a\u8f6c\u4e49\u5b57\u7b26 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/686" data-url="https://github.com/ng-alain/delon/issues/686">#686</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/123c29e" data-url="https://github.com/ng-alain/delon/commit/123c29e">123c29e</a>)</p></li></ul><h3 id="BREAKING-CHANGES">BREAKING CHANGES<a onclick="window.location.hash = \'BREAKING-CHANGES\'" class="anchor">#</a></h3><ul><li><p><strong>abc:count-down</strong> \u5347\u7ea7\u81f3 <code>8.x</code>\uff0c\u5176\u7248\u672c\u6709\u7834\u574f\u6027\u53d8\u66f4<a target="_blank" href="https://github.com/cipchk/ngx-countdown/releases/tag/8.0.0" data-url="https://github.com/cipchk/ngx-countdown/releases/tag/8.0.0">\u7ec6\u8282</a></p></li></ul><h1 id="8.4.0-(2019-09-01)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.3.0...8.4.0" data-url="https://github.com/ng-alain/delon/compare/8.3.0...8.4.0">8.4.0</a> (2019-09-01)<a onclick="window.location.hash = \'8.4.0-(2019-09-01)\'" class="anchor">#</a></h1><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:sidebar-nav:</strong> \u4fee\u590d\u6536\u7f29\u4e0b\u70b9\u51fb\u7236\u7ea7\u6807\u51c6\u629b\u51fa\u9519\u8bef (<a target="_blank" href="https://github.com/ng-alain/delon/issues/673" data-url="https://github.com/ng-alain/delon/issues/673">#673</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/b6c1fc6" data-url="https://github.com/ng-alain/delon/commit/b6c1fc6">b6c1fc6</a>)</p></li><li><p><strong>abc:sidebar-nav:</strong> \u4fee\u590d\u957f\u540d\u79f0\u6837\u5f0f\u9519\u4f4d (<a target="_blank" href="https://github.com/ng-alain/delon/issues/677" data-url="https://github.com/ng-alain/delon/issues/677">#677</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/efd9bb1" data-url="https://github.com/ng-alain/delon/commit/efd9bb1">efd9bb1</a>)</p></li><li><p><strong>abc:st:</strong> \u4fee\u590d\u65b0\u8bf7\u6c42\u65f6\u5e94\u5148\u4e2d\u65ad\u65e7\u8bf7\u6c42 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/674" data-url="https://github.com/ng-alain/delon/issues/674">#674</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/c98ae19" data-url="https://github.com/ng-alain/delon/commit/c98ae19">c98ae19</a>)</p></li><li><p><strong>abc:st:</strong> \u4fee\u590d\u5bfc\u51faExcel\u65f6\u4ea7\u751f\u65e0\u6548\u6807\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/672" data-url="https://github.com/ng-alain/delon/issues/672">#672</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/48ca08f" data-url="https://github.com/ng-alain/delon/commit/48ca08f">48ca08f</a>)</p></li><li><p><strong>abc:sv:</strong> \u4fee\u590d <code>SVConfig</code> \u7684 <code>labelWidth</code> \u65e0\u6548\u7c7b\u578b (<a target="_blank" href="https://github.com/ng-alain/delon/issues/668" data-url="https://github.com/ng-alain/delon/issues/668">#668</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/43cf770" data-url="https://github.com/ng-alain/delon/commit/43cf770">43cf770</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:st:</strong> \u589e\u52a0 <code>pop</code> \u76f8\u5173\u7684\u82e5\u5e72\u5c5e\u6027 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/676" data-url="https://github.com/ng-alain/delon/issues/676">#676</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a078f02" data-url="https://github.com/ng-alain/delon/commit/a078f02">a078f02</a>)</p></li><li><p><strong>cache:</strong> \u589e\u52a0\u5168\u5c40 <code>DelonCacheConfig</code> \u914d\u7f6e\u652f\u6301 <code>type</code>, <code>expire</code> \u7c7b\u578b (<a target="_blank" href="https://github.com/ng-alain/delon/issues/669" data-url="https://github.com/ng-alain/delon/issues/669">#669</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/9d393fb" data-url="https://github.com/ng-alain/delon/commit/9d393fb">9d393fb</a>)</p></li></ul><h1 id="8.3.0-(2019-08-03)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.2.0...8.3.0" data-url="https://github.com/ng-alain/delon/compare/8.2.0...8.3.0">8.3.0</a> (2019-08-03)<a onclick="window.location.hash = \'8.3.0-(2019-08-03)\'" class="anchor">#</a></h1><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:reuse-tab:</strong> \u4fee\u590d URL \u6a21\u5f0f\u4e5f\u5e94\u8be5\u4ece\u83dc\u5355\u6570\u636e\u4e2d\u83b7\u53d6\u6807\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/661" data-url="https://github.com/ng-alain/delon/issues/661">#661</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/6e63418" data-url="https://github.com/ng-alain/delon/commit/6e63418">6e63418</a>)</p></li><li><p><strong>abc:sidebar:</strong> \u4fee\u590d\u5f53\u5305\u542b\u5fbd\u7ae0\u65f6\u65e0\u6cd5\u5c55\u5f00\u5b50\u83dc\u5355\u95ee\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/665" data-url="https://github.com/ng-alain/delon/issues/665">#665</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/763a27e" data-url="https://github.com/ng-alain/delon/commit/763a27e">763a27e</a>)</p></li><li><p><strong>abc:st:</strong> \u4fee\u590d\u5f53\u7ec4\u4ef6\u88ab\u9500\u6bc1\u65f6\u5e94\u8be5\u4e2d\u65ad HTTP \u8bf7\u6c42 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/658" data-url="https://github.com/ng-alain/delon/issues/658">#658</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/6bd97eb" data-url="https://github.com/ng-alain/delon/commit/6bd97eb">6bd97eb</a>)</p></li><li><p><strong>theme:title:</strong> \u4fee\u590d\u8def\u7531\u8df3\u8f6c\u540e\u5728 <code>NavigationEnd</code> \u4e8b\u4ef6\u91cc\u8c03\u7528\u91cd\u7f6e\u5f53\u524d\u9875\u65e0\u6548\u95ee\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/660" data-url="https://github.com/ng-alain/delon/issues/660">#660</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/0db451d" data-url="https://github.com/ng-alain/delon/commit/0db451d">0db451d</a>)</p></li><li><p><strong>abc:st:</strong> \u4fee\u590d\u5f53 <code>strictBehavior</code> \u4e3a <code>truncate</code> \u65f6 <code>img</code> \u5217\u4e0d\u5e94\u8be5\u622a\u65ad (<a target="_blank" href="https://github.com/ng-alain/delon/issues/656" data-url="https://github.com/ng-alain/delon/issues/656">#656</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/4ae8f13" data-url="https://github.com/ng-alain/delon/commit/4ae8f13">4ae8f13</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:st:</strong> \u65b0\u589e <code>req.lazyLoad</code> \u5c5e\u6027\u9996\u6b21\u4e0d\u53d1\u9001\u8bf7\u6c42 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/656" data-url="https://github.com/ng-alain/delon/issues/656">#656</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/4ae8f13" data-url="https://github.com/ng-alain/delon/commit/4ae8f13">4ae8f13</a>)</p></li><li><p><strong>abc:st:</strong> \u65b0\u589e <code>STColumnTitle.title</code> \u652f\u6301\u53ef\u9009\u548c\u5e2e\u52a9\u4fe1\u606f\u63cf\u8ff0 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/657" data-url="https://github.com/ng-alain/delon/issues/657">#657</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/9408ccc" data-url="https://github.com/ng-alain/delon/commit/9408ccc">9408ccc</a>)</p></li><li><p><strong>acl:</strong> \u65b0\u589e\u652f\u6301\u5728\u8def\u7531 <code>data</code> \u5c5e\u6027\u91cc\u6307\u5b9a\u672a\u6388\u6743\u8df3\u8f6cURL (<a target="_blank" href="https://github.com/ng-alain/delon/issues/666" data-url="https://github.com/ng-alain/delon/issues/666">#666</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/bee66fd" data-url="https://github.com/ng-alain/delon/commit/bee66fd">bee66fd</a>)</p></li><li><p><strong>form:*:</strong> \u65b0\u589e <code>date</code> <code>time</code> \u5c0f\u90e8\u4ef6\u5bf9 date-fns \u683c\u5f0f\u5316\u7684\u652f\u6301 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/663" data-url="https://github.com/ng-alain/delon/issues/663">#663</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/ba91193" data-url="https://github.com/ng-alain/delon/commit/ba91193">ba91193</a>)</p></li></ul><h1 id="8.2.0-(2019-07-20)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.1.0...8.2.0" data-url="https://github.com/ng-alain/delon/compare/8.1.0...8.2.0">8.2.0</a> (2019-07-20)<a onclick="window.location.hash = \'8.2.0-(2019-07-20)\'" class="anchor">#</a></h1><h3 id="Scaffold">Scaffold<a onclick="window.location.hash = \'Scaffold\'" class="anchor">#</a></h3><ul><li><p>\u4fee\u590d\u6bcf\u6b21\u6267\u884c <code>npm run color-less</code> \u751f\u6210\u7684 <code>alain-default.less</code> \u6587\u4ef6\u603b\u662f\u5305\u542b\u4e0a\u4e00\u6b21\u7ed3\u679c (<a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/1248" data-url="https://github.com/ng-alain/ng-alain/pull/1248">#1248</a>)</p></li></ul><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:*:</strong> \u4fee\u590d <code>sv-title</code>, <code>se-title</code> \u6837\u5f0f\u65e0\u6cd5\u72ec\u7acb\u4e00\u884c\u95ee\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/651" data-url="https://github.com/ng-alain/delon/issues/651">#651</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/d92a21d" data-url="https://github.com/ng-alain/delon/commit/d92a21d">d92a21d</a>)</p></li><li><p><strong>auth:</strong> \u4fee\u590d <code>referrer.url</code> \u5e94\u8be5\u603b\u662f\u6700\u65b0\u8def\u7531\u5730\u5740 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/654" data-url="https://github.com/ng-alain/delon/issues/654">#654</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/89098e1" data-url="https://github.com/ng-alain/delon/commit/89098e1">89098e1</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:reuse-tab:</strong> \u65b0\u589e <code>tabType</code> \u5c5e\u6027\uff0c\u652f\u6301 <code>card</code> \u98ce\u683c (<a target="_blank" href="https://github.com/ng-alain/delon/issues/652" data-url="https://github.com/ng-alain/delon/issues/652">#652</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/9da990f" data-url="https://github.com/ng-alain/delon/commit/9da990f">9da990f</a>)</p></li><li><p><strong>abc:*:</strong> \u65b0\u589e <code>sv</code> \u548c <code>se</code> \u7ec4\u4ef6\u82e5\u957f\u6807\u7b7e\u81ea\u52a8\u589e\u52a0\u7701\u7565\u53f7 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/651" data-url="https://github.com/ng-alain/delon/issues/651">#651</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/d92a21d" data-url="https://github.com/ng-alain/delon/commit/d92a21d">d92a21d</a>)</p></li></ul><h1 id="8.1.0-(2019-07-12)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.0.0...8.1.0" data-url="https://github.com/ng-alain/delon/compare/8.0.0...8.1.0">8.1.0</a> (2019-07-12)<a onclick="window.location.hash = \'8.1.0-(2019-07-12)\'" class="anchor">#</a></h1><h3 id="Scaffold">Scaffold<a onclick="window.location.hash = \'Scaffold\'" class="anchor">#</a></h3><ul><li><p>\u65b0\u589e\u4f7f\u7528 <code>proxyConfig</code> \u9009\u9879\u6765\u4ee3\u7406\u540e\u7aef\u670d\u52a1\u5668\u914d\u7f6e (<a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/1237" data-url="https://github.com/ng-alain/ng-alain/pull/1237">#1237</a>)</p></li></ul><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>abc:st:</strong> \u4fee\u590d <code>page</code> \u4e22\u5931\u9ed8\u8ba4\u914d\u7f6e\u9879 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/649" data-url="https://github.com/ng-alain/delon/issues/649">#649</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/8f59ea2" data-url="https://github.com/ng-alain/delon/commit/8f59ea2">8f59ea2</a>)</p></li><li><p><strong>form:</strong> \u4fee\u590d <code>ui</code> \u5c5e\u6027\u65e0\u6cd5\u7ee7\u627f\u95ee\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/647" data-url="https://github.com/ng-alain/delon/issues/647">#647</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/f2df673" data-url="https://github.com/ng-alain/delon/commit/f2df673">f2df673</a>)</p></li><li><p><strong>form:</strong> \u4fee\u590d\u5c0f\u90e8\u4ef6\u6837\u5f0f (<a target="_blank" href="https://github.com/ng-alain/delon/issues/646" data-url="https://github.com/ng-alain/delon/issues/646">#646</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/fe2f0fe" data-url="https://github.com/ng-alain/delon/commit/fe2f0fe">fe2f0fe</a>)</p></li><li><p><strong>theme:menu:</strong> \u4fee\u590d <code>text</code> \u6216 <code>i18n</code> \u4e8c\u9009\u4e00 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/648" data-url="https://github.com/ng-alain/delon/issues/648">#648</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/3200998" data-url="https://github.com/ng-alain/delon/commit/3200998">3200998</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:st:</strong> \u65b0\u589e <code>format</code> \u7684 <code>index</code> \u53c2\u6570 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/644" data-url="https://github.com/ng-alain/delon/issues/644">#644</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/498d0b7" data-url="https://github.com/ng-alain/delon/commit/498d0b7">498d0b7</a>)</p></li><li><p><strong>cli:</strong> \u65b0\u589e\u4f7f\u7528 <code>proxyConfig</code> \u9009\u9879\u6765\u4ee3\u7406\u540e\u7aef\u670d\u52a1\u5668\u914d\u7f6e (<a target="_blank" href="https://github.com/ng-alain/delon/issues/645" data-url="https://github.com/ng-alain/delon/issues/645">#645</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/10c91d8" data-url="https://github.com/ng-alain/delon/commit/10c91d8">10c91d8</a>)</p></li></ul><h1 id="8.0.0-(2019-07-03)"><a target="_blank" href="https://github.com/ng-alain/delon/compare/8.0.0-rc.1...8.0.0" data-url="https://github.com/ng-alain/delon/compare/8.0.0-rc.1...8.0.0">8.0.0</a> (2019-07-03)<a onclick="window.location.hash = \'8.0.0-(2019-07-03)\'" class="anchor">#</a></h1><p><strong><code>8.0.0</code> \u7248\u672c\u6709\u4e00\u4e9b\u7834\u574f\u6027\u53d8\u66f4\uff0c\u66f4\u591a\u8bf7\u9605\u8bfb<a href="https://ng-alain.com/docs/upgrade-v8/zh" data-url="https://ng-alain.com/docs/upgrade-v8/zh">\u5347\u7ea7\u6307\u5357</a>\u3002</strong></p><h3 id="Bug-Fixes">Bug Fixes<a onclick="window.location.hash = \'Bug-Fixes\'" class="anchor">#</a></h3><ul><li><p><strong>theme:style:</strong> \u4fee\u590d\u4fa7\u8fb9\u680f\u7528\u6237\u6a21\u5757\u6837\u5f0f (<a target="_blank" href="https://github.com/ng-alain/delon/issues/639" data-url="https://github.com/ng-alain/delon/issues/639">#639</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/ede1d15" data-url="https://github.com/ng-alain/delon/commit/ede1d15">ede1d15</a>)</p></li><li><p><strong>abc:st:</strong> \u4fee\u590d\u5ffd\u7565 <code>STColumn</code> \u91cc <code>title</code> \u4e3a\u975e\u5fc5\u586b\u6027 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/632" data-url="https://github.com/ng-alain/delon/issues/632">#632</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/69608c5" data-url="https://github.com/ng-alain/delon/commit/69608c5">69608c5</a>)</p></li><li><p><strong>cli:plugin:icon:</strong> \u4fee\u590d\u672a\u8bc6\u522b <code>nzType</code> \u5c5e\u6027 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/637" data-url="https://github.com/ng-alain/delon/issues/637">#637</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/2784a5a" data-url="https://github.com/ng-alain/delon/commit/2784a5a">2784a5a</a>)</p></li><li><p><strong>form:array:</strong> \u4fee\u590d <code>readOnly: true</code> \u65f6\u5e94\u7981\u7528\u6dfb\u52a0\u3001\u79fb\u9664\u6309\u94ae (<a target="_blank" href="https://github.com/ng-alain/delon/issues/633" data-url="https://github.com/ng-alain/delon/issues/633">#633</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/15194cc" data-url="https://github.com/ng-alain/delon/commit/15194cc">15194cc</a>)</p></li><li><p><strong>form:array:</strong> \u4fee\u590d\u6570\u7ec4\u4e0b\u6807\u503c\u7ecf\u8fc7\u589e\u5220\u540e\u6df7\u4e71\u95ee\u9898 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/628" data-url="https://github.com/ng-alain/delon/issues/628">#628</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/09807f7" data-url="https://github.com/ng-alain/delon/commit/09807f7">09807f7</a>)</p></li><li><p><strong>form:upload:</strong> \u4fee\u590d <code>showUploadList</code> \u65e0\u6cd5\u8bbe\u7f6e\u590d\u5408\u53c2\u6570 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/634" data-url="https://github.com/ng-alain/delon/issues/634">#634</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/54c3b90" data-url="https://github.com/ng-alain/delon/commit/54c3b90">54c3b90</a>)</p></li><li><p><strong>form:*:</strong> \u4fee\u590d\u90e8\u5206\u5c0f\u90e8\u4ef6\u8c03\u7528 <code>setValue</code> \u65b9\u6cd5\u65e0\u6cd5\u6e32\u67d3 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/622" data-url="https://github.com/ng-alain/delon/issues/622">#622</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/4cea3b7" data-url="https://github.com/ng-alain/delon/commit/4cea3b7">4cea3b7</a>)</p></li></ul><h3 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h3><ul><li><p><strong>abc:st:</strong> \u65b0\u589e\u6309\u94ae\u7684 <code>tooltip</code> \u5c5e\u6027 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/640" data-url="https://github.com/ng-alain/delon/issues/640">#640</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/181e3a1" data-url="https://github.com/ng-alain/delon/commit/181e3a1">181e3a1</a>)</p></li><li><p><strong>abc:st:</strong> \u65b0\u589e\u8c03\u7528 <code>resetColumns</code> \u65f6\u5141\u8bb8\u6307\u5b9a\u662f\u5426\u9700\u8981\u5237\u65b0\u6570\u636e (<a target="_blank" href="https://github.com/ng-alain/delon/issues/635" data-url="https://github.com/ng-alain/delon/issues/635">#635</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a96123e" data-url="https://github.com/ng-alain/delon/commit/a96123e">a96123e</a>)</p></li><li><p><strong>abc:down-file:</strong> \u65b0\u589e <code>down-file_not-support</code> & <code>down-file__disabled</code> \u6837\u5f0f (<a target="_blank" href="https://github.com/ng-alain/delon/issues/624" data-url="https://github.com/ng-alain/delon/issues/624">#624</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/2369153" data-url="https://github.com/ng-alain/delon/commit/2369153">2369153</a>)</p></li><li><p><strong>abc:st:</strong> \u65b0\u589e <code>confirmText</code>, <code>clearText</code> \u56fd\u9645\u5316 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/618" data-url="https://github.com/ng-alain/delon/issues/618">#618</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a8cd300" data-url="https://github.com/ng-alain/delon/commit/a8cd300">a8cd300</a>)</p></li><li><p><strong>abc:st:</strong> \u65b0\u589e\u5173\u952e\u8bcd\u8fc7\u6ee4\u5668 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/612" data-url="https://github.com/ng-alain/delon/issues/612">#612</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/543236d" data-url="https://github.com/ng-alain/delon/commit/543236d">543236d</a>)</p></li><li><p><strong>form:</strong> \u65b0\u589e <code>optionalHelp</code> \u652f\u6301\u66f4\u590d\u6742\u7684\u5c5e\u6027 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/621" data-url="https://github.com/ng-alain/delon/issues/621">#621</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/d45fddf" data-url="https://github.com/ng-alain/delon/commit/d45fddf">d45fddf</a>)</p></li><li><p><strong>form:</strong> \u65b0\u589e\u56fd\u9645\u5316 (<a target="_blank" href="https://github.com/ng-alain/delon/issues/625" data-url="https://github.com/ng-alain/delon/issues/625">#625</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/e1bbbdb" data-url="https://github.com/ng-alain/delon/commit/e1bbbdb">e1bbbdb</a>)</p></li><li><p><strong>util:deepMergeKey:</strong> \u65b0\u589e\u652f\u6301\u4f20\u9012 <code>null</code> & <code>undefined</code> (<a target="_blank" href="https://github.com/ng-alain/delon/issues/620" data-url="https://github.com/ng-alain/delon/issues/620">#620</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/a8ddbb8" data-url="https://github.com/ng-alain/delon/commit/a8ddbb8">a8ddbb8</a>)</p></li></ul><h3 id="Performance-Improvements">Performance Improvements<a onclick="window.location.hash = \'Performance-Improvements\'" class="anchor">#</a></h3><ul><li><p><strong>cli:</strong> \u4f18\u5316\u6240\u6709\u6307\u4ee4\u63d0\u4f9b\u66f4\u8be6\u7ec6\u7684\u9519\u8bef\u4fe1\u606f (<a target="_blank" href="https://github.com/ng-alain/delon/issues/619" data-url="https://github.com/ng-alain/delon/issues/619">#619</a>) (<a target="_blank" href="https://github.com/ng-alain/delon/commit/7ebef13" data-url="https://github.com/ng-alain/delon/commit/7ebef13">7ebef13</a>)</p></li></ul><h3 id="BREAKING-CHANGES">BREAKING CHANGES<a onclick="window.location.hash = \'BREAKING-CHANGES\'" class="anchor">#</a></h3><ul><li><p><code>DelonACLModule</code> \u5fc5\u987b\u4f7f\u7528 <code>forRoot()</code> \u6765\u5bfc\u5165\u8be5\u6a21\u5757</p></li></ul><h2 id="8.0.0-\u4e4b\u524d\u7248\u672c">8.0.0 \u4e4b\u524d\u7248\u672c<a onclick="window.location.hash = \'8.0.0-\u4e4b\u524d\u7248\u672c\'" class="anchor">#</a></h2><p>8.0.0 \u4e4b\u524d\u7248\u672c\u7684\u66f4\u65b0\u8bb0\u5f55\u53ef\u4ee5\u5728 <a target="_blank" href="https://github.com/ng-alain/ng-alain/releases" data-url="https://github.com/ng-alain/ng-alain/releases">Github</a> \u67e5\u770b</p></article></section>',meta:{order:100,title:"\u66f4\u65b0\u65e5\u5fd7",type:"Other"},toc:[{id:"8.9.2-(2020-04-07)",title:"8.9.2 (2020-04-07)",h:2},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.9.1-(2020-04-03)",title:"8.9.1 (2020-04-03)",h:2},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"8.9.0-(2020-02-19)",title:"8.9.0 (2020-02-19)",h:1},{id:"8.9-\u4f5c\u4e3a-Angular-8-\u7684\u6700\u540e\u4e00\u4e2a\u6b21\u7248\u672c\u66f4\u65b0",title:"8.9 \u4f5c\u4e3a Angular 8 \u7684\u6700\u540e\u4e00\u4e2a\u6b21\u7248\u672c\u66f4\u65b0",h:2},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.8.0-(2019-12-30)",title:"8.8.0 (2019-12-30)",h:1},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.7.3-(2019-12-20)",title:"8.7.3 (2019-12-20)",h:2},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"8.7.2-(2019-12-16)",title:"8.7.2 (2019-12-16)",h:2},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"8.7.1-(2019-12-11)",title:"8.7.1 (2019-12-11)",h:2},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"8.7.0-(2019-12-06)",title:"8.7.0 (2019-12-06)",h:1},{id:"Scaffold",title:"Scaffold",h:3},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.6.0-(2019-11-15)",title:"8.6.0 (2019-11-15)",h:1},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.5.1-(2019-10-28)",title:"8.5.1 (2019-10-28)",h:2},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"8.5.0-(2019-09-25)",title:"8.5.0 (2019-09-25)",h:1},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"BREAKING-CHANGES",title:"BREAKING CHANGES",h:3},{id:"8.4.0-(2019-09-01)",title:"8.4.0 (2019-09-01)",h:1},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.3.0-(2019-08-03)",title:"8.3.0 (2019-08-03)",h:1},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.2.0-(2019-07-20)",title:"8.2.0 (2019-07-20)",h:1},{id:"Scaffold",title:"Scaffold",h:3},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.1.0-(2019-07-12)",title:"8.1.0 (2019-07-12)",h:1},{id:"Scaffold",title:"Scaffold",h:3},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"8.0.0-(2019-07-03)",title:"8.0.0 (2019-07-03)",h:1},{id:"Bug-Fixes",title:"Bug Fixes",h:3},{id:"Features",title:"Features",h:3},{id:"Performance-Improvements",title:"Performance Improvements",h:3},{id:"BREAKING-CHANGES",title:"BREAKING CHANGES",h:3},{id:"8.0.0-\u4e4b\u524d\u7248\u672c",title:"8.0.0 \u4e4b\u524d\u7248\u672c",h:2}]}},demo:!1},this.codes=[]},r=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"zh-CN":"docs/cli.md"},content:{"zh-CN":{content:'<section class="markdown"><article></article></section>',meta:{order:10,title:{"en-US":"Cli","zh-CN":"\u547d\u4ee4\u884c\u5de5\u5177"},type:"Other",url:"/cli/getting-started"},toc:[]}},demo:!1},this.codes=[]},h=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/contributing.en-US.md","zh-CN":"docs/contributing.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>The following is a set of guidelines for contributing to ng-alain. Please spend several minutes in reading these guidelines before you create an issue or pull request.</p><h2 id="Code-of-Conduct">Code of Conduct<a onclick="window.location.hash = \'Code-of-Conduct\'" class="anchor">#</a></h2><p>We have adopted a <a target="_blank" href="https://github.com/ng-alain/delon/blob/master/CODE_OF_CONDUCT.md" data-url="https://github.com/ng-alain/delon/blob/master/CODE_OF_CONDUCT.md">Code of Conduct</a> that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.</p><h2 id="Open-Development">Open Development<a onclick="window.location.hash = \'Open-Development\'" class="anchor">#</a></h2><p>All work on <a target="_blank" href="https://github.com/ng-alain/ng-alain" data-url="https://github.com/ng-alain/ng-alain">ng-alain</a>\u3001<a target="_blank" href="https://github.com/ng-alain/delon" data-url="https://github.com/ng-alain/delon">delon</a> happens directly. Both core team members and external contributors send pull requests which go through the same review process.</p><h2 id="Bugs">Bugs<a onclick="window.location.hash = \'Bugs\'" class="anchor">#</a></h2><p>We are using <a target="_blank" href="https://github.com/ng-alain/ng-alain/issues" data-url="https://github.com/ng-alain/ng-alain/issues">GitHub Issues</a> for bug tracing. The best way to get your bug fixed via <a target="_blank" href="https://github.com/ng-alain/ng-alain/issues" data-url="https://github.com/ng-alain/ng-alain/issues">GitHub Issues</a> and provide a reprduction with this <a target="_blank" href="https://stackblitz.com/edit/ng-alain-setup" data-url="https://stackblitz.com/edit/ng-alain-setup">template</a>.</p><p>Before you reporting a bug, please make sure you\'ve searched exists issues, and read our <a href="https://ng-alain.com/" data-url="https://ng-alain.com/">FAQ</a>.</p><h2 id="Proposing-a-Change">Proposing a Change<a onclick="window.location.hash = \'Proposing-a-Change\'" class="anchor">#</a></h2><p>If you intend to change the public API or introduce new feature that via <a target="_blank" href="https://github.com/ng-alain/ng-alain/issues" data-url="https://github.com/ng-alain/ng-alain/issues">GitHub Issues</a>.</p><h2 id="Your-First-Pull-Request">Your First Pull Request<a onclick="window.location.hash = \'Your-First-Pull-Request\'" class="anchor">#</a></h2><p>Working on your first Pull Request? You can learn how from this free video series:</p><p><a target="_blank" href="https://opensource.guide/how-to-contribute/" data-url="https://opensource.guide/how-to-contribute/">How to Contribute to Open Source</a></p><p>To help you get your feet wet and get you familiar with our contribution process, we have a list of <a target="_blank" href="https://github.com/ng-alain/ng-alain/labels/good%20first%20issues" data-url="https://github.com/ng-alain/ng-alain/labels/good%20first%20issues">good first issues</a> that contain bugs or small features that have a relatively limited scope. This is a great place to get started.</p><p>If you decide to fix an issue, please be sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you intend to work on it so other people don\u2019t accidentally duplicate your effort.</p><p>If somebody claims an issue but doesn\u2019t follow up for more than two weeks, it\u2019s fine to take over it but you should still leave a comment.</p><h2 id="Sending-a-Pull-Request">Sending a Pull Request<a onclick="window.location.hash = \'Sending-a-Pull-Request\'" class="anchor">#</a></h2><p>The core team is monitoring for pull requests. We will review your pull request and either merge it, request changes to it, or close it with an explanation.</p><p><strong>Before submitting a pull request</strong>, please make sure the following is done:</p><ol><li><p>Run <code>yarn</code> in the repository root.</p></li><li><p>If you\u2019ve fixed a bug or added code that should be tested, add tests!</p></li><li><p>Ensure the test suite passes (<code>npm run test</code>).</p></li><li><p>Make sure your code lints (<code>npm run lint</code>). Tip: Lint runs automatically when you <code>git commit</code>.</p></li><li><p>Make sure rebase your code to keep the history clean.</p></li><li><p>Make sure your commit message meet the <a target="_blank" href="https://github.com/ng-alain/delon/blob/master/CONTRIBUTING.md#-commit-message-guidelines" data-url="https://github.com/ng-alain/delon/blob/master/CONTRIBUTING.md#-commit-message-guidelines">guidelines</a></p></li></ol><h2 id="Development-Workflow">Development Workflow<a onclick="window.location.hash = \'Development-Workflow\'" class="anchor">#</a></h2><p>After cloning <code>ng-alain</code> or <code>delon</code>, run <code>yarn</code> to fetch its dependencies. Then, you can run several commands:</p><h3 id="delon">delon<a onclick="window.location.hash = \'delon\'" class="anchor">#</a></h3><ol><li><p><code>npm run site</code> runs ng-alain.com website locally</p></li><li><p><code>npm run lint</code> checks the code style</p></li><li><p><code>npm run test</code> runs the complete test suite</p></li><li><p><code>npm run release</code> build packages relases</p></li></ol><h3 id="ng-alain">ng-alain<a onclick="window.location.hash = \'ng-alain\'" class="anchor">#</a></h3><ol><li><p><code>npm run site</code> runs <a target="_blank" href="https://ng-alain.github.io/ng-alain/" data-url="https://ng-alain.github.io/ng-alain/">demo site</a> website locally</p></li><li><p><code>npm run lint</code> checks the code style</p></li><li><p><code>npm test</code> runs test suite</p></li><li><p><code>npm run build</code> creates build of <a target="_blank" href="https://ng-alain.github.io/ng-alain/" data-url="https://ng-alain.github.io/ng-alain/">demo site</a></p></li></ol></article></section>',meta:{order:40,title:"Contributing",type:"Other"},toc:[{id:"Code-of-Conduct",title:"Code of Conduct",h:2},{id:"Open-Development",title:"Open Development",h:2},{id:"Bugs",title:"Bugs",h:2},{id:"Proposing-a-Change",title:"Proposing a Change",h:2},{id:"Your-First-Pull-Request",title:"Your First Pull Request",h:2},{id:"Sending-a-Pull-Request",title:"Sending a Pull Request",h:2},{id:"Development-Workflow",title:"Development Workflow",h:2},{id:"delon",title:"delon",h:3},{id:"ng-alain",title:"ng-alain",h:3}]},"zh-CN":{content:'<section class="markdown"><article><p>\u8fd9\u7bc7\u6307\u5357\u4f1a\u6307\u5bfc\u4f60\u5982\u4f55\u4e3a NG-ALAIN \u8d21\u732e\u4e00\u4efd\u81ea\u5df1\u7684\u529b\u91cf\uff0c\u8bf7\u5728\u4f60\u8981\u63d0 issue \u6216\u8005 pull request \u4e4b\u524d\u82b1\u51e0\u5206\u949f\u6765\u9605\u8bfb\u4e00\u904d\u8fd9\u7bc7\u6307\u5357\u3002</p><h2 id="\u884c\u4e3a\u51c6\u5219">\u884c\u4e3a\u51c6\u5219<a onclick="window.location.hash = \'\u884c\u4e3a\u51c6\u5219\'" class="anchor">#</a></h2><p>\u6211\u4eec\u6709\u4e00\u4efd <a target="_blank" href="https://github.com/ng-alain/delon/blob/master/CODE_OF_CONDUCT.md" data-url="https://github.com/ng-alain/delon/blob/master/CODE_OF_CONDUCT.md">\u884c\u4e3a\u51c6\u5219</a>\uff0c\u5e0c\u671b\u6240\u6709\u7684\u8d21\u732e\u8005\u90fd\u80fd\u9075\u5b88\uff0c\u8bf7\u82b1\u65f6\u95f4\u9605\u8bfb\u4e00\u904d\u5168\u6587\u4ee5\u786e\u4fdd\u4f60\u80fd\u660e\u767d\u54ea\u4e9b\u662f\u53ef\u4ee5\u505a\u7684\uff0c\u54ea\u4e9b\u662f\u4e0d\u53ef\u4ee5\u505a\u7684\u3002</p><h2 id="\u900f\u660e\u7684\u5f00\u53d1">\u900f\u660e\u7684\u5f00\u53d1<a onclick="window.location.hash = \'\u900f\u660e\u7684\u5f00\u53d1\'" class="anchor">#</a></h2><p>\u6211\u4eec\u6240\u6709\u7684\u5de5\u4f5c\u90fd\u4f1a\u653e\u5728 <a target="_blank" href="https://github.com/ng-alain/ng-alain" data-url="https://github.com/ng-alain/ng-alain">ng-alain</a>\u3001<a target="_blank" href="https://github.com/ng-alain/delon" data-url="https://github.com/ng-alain/delon">delon</a> \u4e0a\u3002\u4e0d\u7ba1\u662f\u6838\u5fc3\u56e2\u961f\u7684\u6210\u5458\u8fd8\u662f\u5916\u90e8\u8d21\u732e\u8005\u7684 pull request \u90fd\u9700\u8981\u7ecf\u8fc7\u540c\u6837\u6d41\u7a0b\u7684 review\u3002</p><h2 id="Bugs">Bugs<a onclick="window.location.hash = \'Bugs\'" class="anchor">#</a></h2><p>\u6211\u4eec\u4f7f\u7528 <a target="_blank" href="https://github.com/ng-alain/ng-alain/issues" data-url="https://github.com/ng-alain/ng-alain/issues">GitHub Issues</a> \u6765\u505a bug \u8ffd\u8e2a\u3002\u5982\u679c\u4f60\u60f3\u8981\u4f60\u53d1\u73b0\u7684 bug \u88ab\u5feb\u901f\u89e3\u51b3\uff0c\u6700\u597d\u7684\u529e\u6cd5\u5c31\u662f\u6309\u7167 issues \u5448\u73b0\u7684\u6a21\u677f\u8ba4\u771f\u586b\u5199\u6bcf\u4e00\u9879\uff1b\u5e76\u4e14\u80fd\u4f7f\u7528\u8fd9\u4e2a <a target="_blank" href="https://stackblitz.com/edit/ng-alain-setup" data-url="https://stackblitz.com/edit/ng-alain-setup">\u6a21\u677f</a> \u6765\u63d0\u4f9b\u91cd\u73b0\u3002</p><p>\u5728\u4f60\u62a5\u544a\u4e00\u4e2a bug \u4e4b\u524d\uff0c\u8bf7\u5148\u786e\u4fdd\u5df2\u7ecf\u641c\u7d22\u8fc7\u5df2\u6709\u7684 issue \u548c\u9605\u8bfb\u4e86 <a href="https://ng-alain.com/" data-url="https://ng-alain.com/">\u6587\u6863\u7ad9</a>\u3002</p><h2 id="\u65b0\u589e\u529f\u80fd">\u65b0\u589e\u529f\u80fd<a onclick="window.location.hash = \'\u65b0\u589e\u529f\u80fd\'" class="anchor">#</a></h2><p>\u5982\u679c\u4f60\u6709\u6539\u8fdb\u6211\u4eec\u7684 API \u6216\u8005\u65b0\u589e\u529f\u80fd\u7684\u60f3\u6cd5\uff0c\u540c\u6837\u6309\u7167 issues \u5448\u73b0\u7684\u6a21\u677f\u8ba4\u771f\u586b\u5199\u6bcf\u4e00\u9879\u3002</p><h2 id="\u7b2c\u4e00\u6b21\u8d21\u732e">\u7b2c\u4e00\u6b21\u8d21\u732e<a onclick="window.location.hash = \'\u7b2c\u4e00\u6b21\u8d21\u732e\'" class="anchor">#</a></h2><p>\u5982\u679c\u4f60\u8fd8\u4e0d\u6e05\u695a\u600e\u4e48\u5728 GitHub \u4e0a\u63d0 Pull Request \uff0c\u53ef\u4ee5\u9605\u8bfb\u4e0b\u9762\u8fd9\u7bc7\u6587\u7ae0\u6765\u5b66\u4e60\uff1a</p><p><a target="_blank" href="https://segmentfault.com/a/1190000000736629" data-url="https://segmentfault.com/a/1190000000736629">\u5982\u4f55\u4f18\u96c5\u5730\u5728 GitHub \u4e0a\u8d21\u732e\u4ee3\u7801</a></p><p>\u4e3a\u4e86\u80fd\u5e2e\u52a9\u4f60\u5f00\u59cb\u4f60\u7684\u7b2c\u4e00\u6b21\u5c1d\u8bd5\uff0c\u6211\u4eec\u7528 <a target="_blank" href="https://github.com/ng-alain/ng-alain/labels/good%20first%20issues" data-url="https://github.com/ng-alain/ng-alain/labels/good%20first%20issues">good first issues</a> \u6807\u8bb0\u4e86\u4e00\u4e9b\u6bd4\u8f83\u6bd4\u8f83\u5bb9\u6613\u4fee\u590d\u7684 bug \u548c\u5c0f\u529f\u80fd\u3002\u8fd9\u4e9b issue \u53ef\u4ee5\u5f88\u597d\u5730\u505a\u4e3a\u4f60\u7684\u9996\u6b21\u5c1d\u8bd5\u3002</p><p>\u5982\u679c\u4f60\u6253\u7b97\u5f00\u59cb\u5904\u7406\u4e00\u4e2a issue\uff0c\u8bf7\u5148\u68c0\u67e5\u4e00\u4e0b issue \u4e0b\u9762\u7684\u7559\u8a00\u4ee5\u786e\u4fdd\u6ca1\u6709\u522b\u4eba\u6b63\u5728\u5904\u7406\u8fd9\u4e2a issue\u3002\u5982\u679c\u5f53\u524d\u6ca1\u6709\u4eba\u5728\u5904\u7406\u7684\u8bdd\u4f60\u53ef\u4ee5\u7559\u8a00\u544a\u77e5\u5176\u4ed6\u4eba\u4f60\u5c06\u4f1a\u5904\u7406\u8fd9\u4e2a issue\uff0c\u4ee5\u514d\u522b\u4eba\u91cd\u590d\u52b3\u52a8\u3002</p><p>\u5982\u679c\u4e4b\u524d\u6709\u4eba\u7559\u8a00\u8bf4\u4f1a\u5904\u7406\u8fd9\u4e2a issue \u4f46\u662f\u4e00\u4e24\u4e2a\u661f\u671f\u90fd\u6ca1\u6709\u52a8\u9759\uff0c\u90a3\u4e48\u4f60\u4e5f\u53ef\u4ee5\u63a5\u624b\u5904\u7406\u8fd9\u4e2a issue\uff0c\u5f53\u7136\u8fd8\u662f\u9700\u8981\u7559\u8a00\u544a\u77e5\u5176\u4ed6\u4eba\u3002</p><h2 id="Pull-Request">Pull Request<a onclick="window.location.hash = \'Pull-Request\'" class="anchor">#</a></h2><p>Ng Alain \u4f1a\u5173\u6ce8\u6240\u6709\u7684 pull request\uff0c\u6211\u4eec\u4f1a review \u4ee5\u53ca\u5408\u5e76\u4f60\u7684\u4ee3\u7801\uff0c\u4e5f\u6709\u53ef\u80fd\u8981\u6c42\u4f60\u505a\u4e00\u4e9b\u4fee\u6539\u6216\u8005\u544a\u8bc9\u4f60\u6211\u4eec\u4e3a\u4ec0\u4e48\u4e0d\u80fd\u63a5\u53d7\u8fd9\u6837\u7684\u4fee\u6539\u3002</p><p><strong>\u5728\u4f60\u53d1\u9001 Pull Request \u4e4b\u524d</strong>\uff0c\u8bf7\u786e\u8ba4\u4f60\u662f\u6309\u7167\u4e0b\u9762\u7684\u6b65\u9aa4\u6765\u505a\u7684\uff1a</p><ol><li><p>\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u8fd0\u884c\u4e86 <code>yarn</code>\u3002</p></li><li><p>\u5982\u679c\u4f60\u4fee\u590d\u4e86\u4e00\u4e2a bug \u6216\u8005\u65b0\u589e\u4e86\u4e00\u4e2a\u529f\u80fd\uff0c\u8bf7\u786e\u4fdd\u5199\u4e86\u76f8\u5e94\u7684\u6d4b\u8bd5\uff0c\u8fd9\u5f88\u91cd\u8981\u3002</p></li><li><p>\u786e\u8ba4\u6240\u6709\u7684\u6d4b\u8bd5\u90fd\u662f\u901a\u8fc7\u7684 <code>npm run test</code>\u3002</p></li><li><p>\u786e\u4fdd\u4f60\u7684\u4ee3\u7801\u901a\u8fc7\u4e86 lint \u68c0\u67e5 <code>npm run lint</code>\u3002\u5c0f\u8d34\u58eb: Lint \u4f1a\u5728\u4f60 <code>git commit</code> \u7684\u65f6\u5019\u81ea\u52a8\u8fd0\u884c\u3002</p></li><li><p>\u786e\u4fdd\u4f60\u7684\u4ee3\u7801\u5728\u63d0\u4ea4\u4e4b\u524d\u7ecf\u8fc7\u4e86\u6b63\u786e\u7684 <a target="_blank" href="https://www.digitalocean.com/community/tutorials/how-to-rebase-and-update-a-pull-request" data-url="https://www.digitalocean.com/community/tutorials/how-to-rebase-and-update-a-pull-request">Rebase</a></p></li><li><p>\u786e\u4fdd\u4f60\u7684\u63d0\u4ea4\u7b26\u5408<a target="_blank" href="https://github.com/ng-alain/delon/blob/master/CONTRIBUTING.md#-commit-message-guidelines" data-url="https://github.com/ng-alain/delon/blob/master/CONTRIBUTING.md#-commit-message-guidelines">\u89c4\u8303</a></p></li></ol><h2 id="\u5f00\u53d1\u6d41\u7a0b">\u5f00\u53d1\u6d41\u7a0b<a onclick="window.location.hash = \'\u5f00\u53d1\u6d41\u7a0b\'" class="anchor">#</a></h2><p>\u5728\u4f60 clone \u4e86 ng-alain \u6216 delon \u7684\u4ee3\u7801\u5e76\u4e14\u4f7f\u7528 <code>yarn</code> \u5b89\u88c5\u5b8c\u4f9d\u8d56\u540e\uff0c\u4f60\u8fd8\u53ef\u4ee5\u8fd0\u884c\u4e0b\u9762\u51e0\u4e2a\u5e38\u7528\u7684\u547d\u4ee4\uff1a</p><h3 id="delon-\u57fa\u5efa\u7c7b\u5e93">delon \u57fa\u5efa\u7c7b\u5e93<a onclick="window.location.hash = \'delon-\u57fa\u5efa\u7c7b\u5e93\'" class="anchor">#</a></h3><ol><li><p><code>npm run site</code> \u5728\u672c\u5730\u8fd0\u884c ng-alain.com \u7f51\u7ad9</p></li><li><p><code>npm run lint</code> \u68c0\u67e5 packages \u4ee3\u7801\u98ce\u683c</p></li><li><p><code>npm run test</code> \u8fd0\u884c packages \u6240\u6709\u7c7b\u5e93\u6d4b\u8bd5</p></li><li><p><code>npm run release</code> \u6784\u5efa packages \u53d1\u5e03\u5305</p></li></ol><h3 id="ng-alain-\u811a\u624b\u67b6">ng-alain \u811a\u624b\u67b6<a onclick="window.location.hash = \'ng-alain-\u811a\u624b\u67b6\'" class="anchor">#</a></h3><ol><li><p><code>npm start</code> \u5728\u672c\u5730\u8fd0\u884c<a target="_blank" href="https://ng-alain.github.io/ng-alain/" data-url="https://ng-alain.github.io/ng-alain/">\u811a\u624b\u67b6</a></p></li><li><p><code>npm run lint</code> \u68c0\u67e5\u4ee3\u7801\u98ce\u683c</p></li><li><p><code>npm test</code> \u8fd0\u884c\u6d4b\u8bd5</p></li><li><p><code>npm run build</code> \u6784\u5efa\u751f\u4ea7\u73af\u5883\u7f51\u7ad9</p></li></ol></article></section>',meta:{order:40,title:"\u8d21\u732e\u6307\u5357",type:"Other"},toc:[{id:"\u884c\u4e3a\u51c6\u5219",title:"\u884c\u4e3a\u51c6\u5219",h:2},{id:"\u900f\u660e\u7684\u5f00\u53d1",title:"\u900f\u660e\u7684\u5f00\u53d1",h:2},{id:"Bugs",title:"Bugs",h:2},{id:"\u65b0\u589e\u529f\u80fd",title:"\u65b0\u589e\u529f\u80fd",h:2},{id:"\u7b2c\u4e00\u6b21\u8d21\u732e",title:"\u7b2c\u4e00\u6b21\u8d21\u732e",h:2},{id:"Pull-Request",title:"Pull Request",h:2},{id:"\u5f00\u53d1\u6d41\u7a0b",title:"\u5f00\u53d1\u6d41\u7a0b",h:2},{id:"delon-\u57fa\u5efa\u7c7b\u5e93",title:"delon \u57fa\u5efa\u7c7b\u5e93",h:3},{id:"ng-alain-\u811a\u624b\u67b6",title:"ng-alain \u811a\u624b\u67b6",h:3}]}},demo:!1},this.codes=[]},p=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/deploy.en-US.md","zh-CN":"docs/deploy.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><h2 id="Construct">Construct<a onclick="window.location.hash = \'Construct\'" class="anchor">#</a></h2><p>When the project is developed, you can package your app with just one line of command:</p><pre class="hljs language-bash"><code>npm run build</code></pre><p>NG-ALAIN itself is an Angular CLI project, so you can also complete more complex build requirements with <a target="_blank" href="https://angular.io/cli/build" data-url="https://angular.io/cli/build">Build</a>. After the package is successfully packaged, the <code>dist</code> folder will be generated in the root directory, which is to build the packaged file, including several static files such as <code>*.js</code>, <code>*.css</code>, <code>index.html</code>.</p><h3 id="JavaScript-heap-out-of-memory">JavaScript heap out of memory<a onclick="window.location.hash = \'JavaScript-heap-out-of-memory\'" class="anchor">#</a></h3><p>Avoid executing <code>ng build</code> when throw error <strong>JavaScript heap out of memory</strong>:</p><pre class="hljs language-json"><code>{\n  "scripts": {\n    "build": "node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod"\n  }\n}</code></pre><h3 id="Environmental-variables">Environmental variables<a onclick="window.location.hash = \'Environmental-variables\'" class="anchor">#</a></h3><p>When you need to distinguish between development and deployment, and test environments, you can configure the corresponding parameters according to different environments through the <code>src/environments</code> folder. The configuration items can also be called directly in the application. At the same time, you need to configure the configuration items in <code>angular.json</code>. Finally, you can change the environment configuration through commands.</p><h3 id="Analyze-the-build-file-volume">Analyze the build file volume<a onclick="window.location.hash = \'Analyze-the-build-file-volume\'" class="anchor">#</a></h3><p><strong>Method 1</strong></p><p>If the build file is large, you can optimize your code by building and analyzing the volume distribution of dependent modules with the <code>analyze</code> command.</p><pre class="hljs language-bash"><code>npm run analyze</code></pre><p>Limited by <a target="_blank" href="https://github.com/angular/angular-cli/issues/10589" data-url="https://github.com/angular/angular-cli/issues/10589">#10589</a>, you need to install the global <code>webpack-bundle-analyzer</code> package:</p><pre class="hljs language-bash"><code>npm i -g webpack-bundle-analyzer@latest\ncd dist/<project name>\nwebpack-bundle-analyzer stats.json</code></pre><p><img src="./assets/screenshot/analyzer.png" /></p><p><strong>Method 2</strong></p><p>Package with the following command:</p><pre class="hljs language-bash"><code>ng build --prod --sourcemaps</code></pre><p>Then use <a target="_blank" href="https://github.com/danvk/source-map-explorer/blob/master/README.md" data-url="https://github.com/danvk/source-map-explorer/blob/master/README.md">source-map-explorer</a> to help you explore the JavaScript package after the production environment is built to analyze each module by their volume size.</p><h2 id="Release">Release<a onclick="window.location.hash = \'Release\'" class="anchor">#</a></h2><p>When you are ready to deploy (release) your the app, you need only to publish the generated build artifacts - that is, the files in the <code>dist</code> folder - to your cdn or static server. Note that the <code>index.html</code> is usually the entry page for your app and handles all missing file requests. You may need to change the import path of the page after determining the static of js and css.</p><p>The default static resource reference path directly points to the directory where the <code>dist</code> folder is published. For example, if you post <code>dist</code> to the root directory of the <code>ng-alain.com</code> site, the requested URL is <code>//ng-alain.com/***.js</code>, <code>//ng-alain.com/***.css</code>, if <code>dist</code> is posted to a directory under a certain directory, such as <code>v2</code>, request The URL is <code>//ng-alain.com/v2/***.js</code>, <code>//ng-alain.com/v2/***.css</code>.</p><p>If your static resource is deployed to another domain name (such as a separate CDN address), you can specify a CDN address with the <code>--deployUrl</code> parameter.</p><pre class="hljs language-bash"><code>ng build --prod -deployUrl=//cdn.ng-alain.com/</code></pre><p>The generated <code>index.html</code> with its <code>*.js</code>, <code>*.css</code> files will automatically refer to <code>//cdn.ng-alain.com/*.js</code>, <code>//cdn.ng-alain.com/*css</code>, respectively.</p><h3 id="Routing-strategy">Routing strategy<a onclick="window.location.hash = \'Routing-strategy\'" class="anchor">#</a></h3><p>Angular front-end routing has two different strategies: <code>HashLocationStrategy</code> and <code>PathLocationStrategy</code>. The former is routed by appending a <code>#</code> before a path, and the front-end routing management is performed by <a target="_blank" href="//developer.mozilla.org/en-US/docs/Web/API/History_API" data-url="//developer.mozilla.org/en-US/docs/Web/API/History_API">HTML5 History</a>, while the latter is similar, but the path does not have <code>#</code> appended before it. Through the configuration of the server, the specified URL can be accessed to the current page, enabling front-end routing management.</p><p>If you want to use <code>PathLocationStrategy</code>, you need to replace <code>RouterModule.forRoot(routes, { useHash: true })</code> of <code>./src/app/routes/routes-routing.module.ts</code> with <code>RouterModule.forRoot(routes)</code>, since that is the default Angular behavior. You might notice that this can also be done by changing the <code>useHash</code> variable in the <code>src/environments/environment.*.ts</code> files, depending on your project configulation. Importantly, your server needs to be correctly configured, such that is returns the <code>index.html</code> for any 404 errors:</p><p>Express server example:</p><pre class="hljs language-js"><code>app.use(express.static(path.join(__dirname, \'build\')));\n\napp.get(\'/*\', function (req, res) {\n  res.sendFile(path.join(__dirname, \'build\', \'index.html\'));\n});</code></pre><p>Egg server example:</p><pre class="hljs language-js"><code>// controller\nexports.index = function* () {\n  yield this.render(\'App.jsx\', {\n    context: {\n      user: this.session.user,\n    },\n  });\n};\n\n// router\napp.get(\'home\', \'/*\', \'home.index\');</code></pre><p>For more questions about Angular routing, please read <a target="_blank" href="//angular.io/guide/router" data-url="//angular.io/guide/router">official website</a>.</p><h3 id="Docker">Docker<a onclick="window.location.hash = \'Docker\'" class="anchor">#</a></h3><p>NG-ALAIN provides a complete image file for building Angular projects based on the nginx WEB service. Where nginx is a mirror using <a target="_blank" href="https://github.com/nginxinc/docker-nginx/blob/master/mainline/alpine/Dockerfile" data-url="https://github.com/nginxinc/docker-nginx/blob/master/mainline/alpine/Dockerfile">nginx:1.13.5-alpine</a>, which basically satisfies NG-ALAIN The project\'s good operating environment, if there are more needs, you can easily specify <em>nginx.conf</em> with <code>docker run</code>.</p><h4 id="1.-Building-the-image">1. Building the image<a onclick="window.location.hash = \'1.-Building-the-image\'" class="anchor">#</a></h4><p>Build a complete image of the runtime environment required by NG-ALAIN based on the Dockerfile.</p><pre class="hljs language-bash"><code>docker build -t ng-alain .</code></pre><h4 id="2.-Running">2. Running<a onclick="window.location.hash = \'2.-Running\'" class="anchor">#</a></h4><p><strong>Based on compose (Recommended)</strong></p><pre class="hljs language-bash"><code>docker-compose up -d</code></pre><p>The details can be modified with <code>docker-compose.yml</code>.</p><p><strong>Based on imperative</strong></p><pre class="hljs language-bash"><code>docker run -d -p 80:80 --name alain ng-alain</code></pre><p>Finally, you can visit\uff1a<a target="_blank" href="http://localhost/" data-url="http://localhost/">http://localhost/</a></p><h4 id="3.-About-SSL">3. About SSL<a onclick="window.location.hash = \'3.-About-SSL\'" class="anchor">#</a></h4><p>The Dockerfile provided by NG-ALAIN is relatively simple, and the most common use of real projects is support for SSL.</p><p>Therefore, by default you can place the certificate in the <code>_nginx/ssl</code> directory and enable the <code>_nginx/default.conf</code> related SSL configuration item.</p><p>Finally, add the <code>ports</code> node of <code>docker-compose.yml</code>:</p><pre class="hljs language-null"><code>- 443:443</code></pre><h3 id="Container-deployment">Container deployment<a onclick="window.location.hash = \'Container-deployment\'" class="anchor">#</a></h3><p>Refer to <a target="_blank" href="https://zhuanlan.zhihu.com/p/35688938" data-url="https://zhuanlan.zhihu.com/p/35688938">Angular Container Deployment</a>.</p></article></section>',meta:{order:70,title:{"en-US":"Build & Deploy","zh-CN":"\u6784\u5efa\u548c\u53d1\u5e03"},type:"Dev"},toc:[{id:"Construct",title:"Construct",h:2},{id:"JavaScript-heap-out-of-memory",title:"JavaScript heap out of memory",h:3},{id:"Environmental-variables",title:"Environmental variables",h:3},{id:"Analyze-the-build-file-volume",title:"Analyze the build file volume",h:3},{id:"Release",title:"Release",h:2},{id:"Routing-strategy",title:"Routing strategy",h:3},{id:"Docker",title:"Docker",h:3},{id:"Container-deployment",title:"Container deployment",h:3}]},"zh-CN":{content:'<section class="markdown"><article><h2 id="\u6784\u5efa">\u6784\u5efa<a onclick="window.location.hash = \'\u6784\u5efa\'" class="anchor">#</a></h2><p>\u5f53\u9879\u76ee\u5f00\u53d1\u5b8c\u6bd5\uff0c\u53ea\u9700\u8981\u8fd0\u884c\u4e00\u884c\u547d\u4ee4\u5c31\u53ef\u4ee5\u6253\u5305\u4f60\u7684\u5e94\u7528\uff1a</p><pre class="hljs language-bash"><code>npm run build</code></pre><p>NG-ALAIN \u672c\u8eab\u662f\u4e00\u4e2a Angular CLI \u9879\u76ee\uff0c\u56e0\u6b64\u4e5f\u53ef\u4ee5\u53c2\u7167 <a target="_blank" href="https://angular.io/cli/build" data-url="https://angular.io/cli/build">Build</a> \u5b8c\u6210\u66f4\u590d\u6742\u7684\u6784\u5efa\u9700\u6c42\u3002\u6784\u5efa\u6253\u5305\u6210\u529f\u4e4b\u540e\uff0c\u4f1a\u5728\u6839\u76ee\u5f55\u751f\u6210 <code>dist</code> \u6587\u4ef6\u5939\uff0c\u91cc\u9762\u5c31\u662f\u6784\u5efa\u6253\u5305\u597d\u7684\u6587\u4ef6\uff0c\u5305\u542b\u82e5\u5e72 <code>*.js</code>\u3001<code>*.css</code>\u3001<code>index.html</code> \u7b49\u9759\u6001\u6587\u4ef6\u3002</p><h3 id="JavaScript-heap-out-of-memory">JavaScript heap out of memory<a onclick="window.location.hash = \'JavaScript-heap-out-of-memory\'" class="anchor">#</a></h3><p>\u907f\u514d\u6267\u884c <code>ng build</code> \u65f6\u629b\u51fa <strong>JavaScript heap out of memory</strong>\uff1a</p><pre class="hljs language-json"><code>{\n  "scripts": {\n    "build": "node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod"\n  }\n}</code></pre><h3 id="\u73af\u5883\u53d8\u91cf">\u73af\u5883\u53d8\u91cf<a onclick="window.location.hash = \'\u73af\u5883\u53d8\u91cf\'" class="anchor">#</a></h3><p>\u5f53\u4f60\u9700\u8981\u533a\u522b\u5f00\u53d1\u548c\u90e8\u7f72\u4ee5\u53ca\u6d4b\u8bd5\u73af\u5883\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u901a\u8fc7 <code>src/environments</code> \u6587\u4ef6\u5939\u6839\u636e\u4e0d\u540c\u73af\u5883\u914d\u7f6e\u76f8\u5e94\u7684\u53c2\u6570\uff0c\u914d\u7f6e\u9879\u540c\u65f6\u4e5f\u53ef\u4ee5\u5728\u5e94\u7528\u5f53\u4e2d\u76f4\u63a5\u8c03\u7528\u5b83\u4eec\u3002\u540c\u65f6\uff0c\u8fd8\u9700\u8981\u914d\u7f6e <code>angular.json</code> \u5185\u7684\u914d\u7f6e\u9879\uff0c\u6700\u540e\u4f60\u53ef\u4ee5\u900f\u8fc7\u547d\u4ee4\u6539\u53d8\u73af\u5883\u914d\u7f6e\u3002</p><h3 id="\u5206\u6790\u6784\u5efa\u6587\u4ef6\u4f53\u79ef">\u5206\u6790\u6784\u5efa\u6587\u4ef6\u4f53\u79ef<a onclick="window.location.hash = \'\u5206\u6790\u6784\u5efa\u6587\u4ef6\u4f53\u79ef\'" class="anchor">#</a></h3><p><strong>\u65b9\u6cd5 1</strong></p><p>\u5982\u679c\u6784\u5efa\u6587\u4ef6\u5f88\u5927\uff0c\u53ef\u4ee5\u901a\u8fc7 <code>analyze</code> \u547d\u4ee4\u6784\u5efa\u5e76\u5206\u6790\u4f9d\u8d56\u6a21\u5757\u7684\u4f53\u79ef\u5206\u5e03\uff0c\u4ece\u800c\u4f18\u5316\u4f60\u7684\u4ee3\u7801\u3002</p><pre class="hljs language-bash"><code>npm run analyze</code></pre><p>\u53d7\u9650\u4e8e <a target="_blank" href="https://github.com/angular/angular-cli/issues/10589" data-url="https://github.com/angular/angular-cli/issues/10589">#10589</a>\uff0c\u9700\u8981\u5b89\u88c5\u5168\u5c40 <code>webpack-bundle-analyzer</code> \u5305\uff1a</p><pre class="hljs language-bash"><code>npm i -g webpack-bundle-analyzer@latest\ncd dist/<project name>\nwebpack-bundle-analyzer stats.json</code></pre><p><img src="./assets/screenshot/analyzer.png" /></p><p><strong>\u65b9\u6cd5 2</strong></p><p>\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u6253\u5305\uff1a</p><pre class="hljs language-bash"><code>ng build --prod --sourcemaps</code></pre><p>\u7136\u540e\u901a\u8fc7 <a target="_blank" href="https://github.com/danvk/source-map-explorer/blob/master/README.md" data-url="https://github.com/danvk/source-map-explorer/blob/master/README.md">source-map-explorer</a> \u5e2e\u4f60\u5728\u751f\u4ea7\u73af\u5883\u6784\u5efa\u4e4b\u540e\u63a2\u67e5 JavaScript \u5305\uff0c\u6765\u5206\u6790\u6bcf\u4e2a\u6a21\u5757\u6240\u5360\u7684\u4f53\u79ef\u5927\u5c0f\u3002</p><h2 id="\u53d1\u5e03">\u53d1\u5e03<a onclick="window.location.hash = \'\u53d1\u5e03\'" class="anchor">#</a></h2><p>\u5bf9\u4e8e\u53d1\u5e03\u6765\u8bb2\uff0c\u53ea\u9700\u8981\u5c06\u6700\u7ec8\u751f\u6210\u7684\u9759\u6001\u6587\u4ef6\uff0c\u4e5f\u5c31\u662f\u901a\u5e38\u60c5\u51b5\u4e0b <code>dist</code> \u6587\u4ef6\u5939\u7684\u9759\u6001\u6587\u4ef6\u53d1\u5e03\u5230\u4f60\u7684 cdn \u6216\u8005\u9759\u6001\u670d\u52a1\u5668\u5373\u53ef\uff0c\u9700\u8981\u6ce8\u610f\u7684\u662f\u5176\u4e2d\u7684 <code>index.html</code> \u901a\u5e38\u4f1a\u662f\u4f60\u540e\u53f0\u670d\u52a1\u7684\u5165\u53e3\u9875\u9762\uff0c\u5728\u786e\u5b9a\u4e86 js \u548c css \u7684\u9759\u6001\u4e4b\u540e\u53ef\u80fd\u9700\u8981\u6539\u53d8\u9875\u9762\u7684\u5f15\u5165\u8def\u5f84\u3002</p><p>\u9ed8\u8ba4\u7684\u9759\u6001\u8d44\u6e90\u5f15\u7528\u8def\u5f84\u76f4\u63a5\u6307\u5411 <code>dist</code> \u6587\u4ef6\u5939\u53d1\u5e03\u6240\u5904\u5e94\u7528\u7684\u76ee\u5f55\u4e0b\uff0c\u4f8b\u5982\u4f60\u5c06 <code>dist</code> \u53d1\u5e03\u81f3 <code>ng-alain.com</code> \u7ad9\u70b9\u7684\u6839\u76ee\u5f55\u91cc\u5219\u8bf7\u6c42\u7684\u7f51\u5740\u662f <code>//ng-alain.com/***.js</code>\u3001<code>//ng-alain.com/***.css</code>\uff0c\u82e5 <code>dist</code> \u53d1\u5e03\u81f3\u67d0\u7ad9\u70b9\u4e0b\u67d0\u4e2a\u76ee\u5f55\u5982 <code>v2</code> \u6587\u4ef6\u5939\u4e0b\uff0c\u5219\u8bf7\u6c42\u7684\u7f51\u5740\u662f <code>//ng-alain.com/v2/***.js</code>\u3001<code>//ng-alain.com/v2/***.css</code>\u3002</p><p>\u5982\u679c\u4f60\u7684\u9759\u6001\u8d44\u6e90\u662f\u90e8\u7f72\u5230\u5176\u4ed6\u57df\u540d\uff08\u4f8b\u5982\u72ec\u7acb\u7684 cdn \u5730\u5740\uff09\uff0c\u4f60\u53ef\u4ee5\u900f\u8fc7 <code>-d</code> \u53c2\u6570\u6307\u5b9a\u4e00\u4e2a cdn \u5730\u5740\u3002</p><pre class="hljs language-bash"><code>ng build --prod -d=//cdn.ng-alain.com/</code></pre><p>\u8fd9\u6837\u751f\u6210\u7684 <code>index.html</code> \u5185 <code>*.js</code>\u3001<code>*.css</code> \u4f1a\u81ea\u52a8\u52a0\u4e0a <code>//cdn.ng-alain.com/*.js</code>\u3002</p><h3 id="\u8def\u7531\u7b56\u7565">\u8def\u7531\u7b56\u7565<a onclick="window.location.hash = \'\u8def\u7531\u7b56\u7565\'" class="anchor">#</a></h3><p>Angular \u524d\u7aef\u8def\u7531\u6709\u4e24\u79cd\u4e0d\u540c\u7b56\u7565 <code>HashLocationStrategy</code> \u548c <code>PathLocationStrategy</code>\u3002\u524d\u8005\u662f\u4ee5 <code>#</code> \u540e\u9762\u7684\u8def\u5f84\u8fdb\u884c\u8def\u7531\u5904\u7406\uff0c\u901a\u8fc7 <a target="_blank" href="//developer.mozilla.org/en-US/docs/Web/API/History_API" data-url="//developer.mozilla.org/en-US/docs/Web/API/History_API">HTML5 History</a> \u8fdb\u884c\u524d\u7aef\u8def\u7531\u7ba1\u7406\uff0c\u800c\u540e\u8005\u5219\u662f\u7c7b\u4f3c\u9875\u9762\u8bbf\u95ee\u8def\u5f84\u5e76\u6ca1\u6709 <code>#</code>\uff0c\u901a\u8fc7\u670d\u52a1\u7aef\u7684\u914d\u7f6e\uff0c\u80fd\u591f\u8bbf\u95ee\u6307\u5b9a URL \u90fd\u5b9a\u5411\u5230\u5f53\u524d\u9875\u9762\uff0c\u4ece\u800c\u80fd\u591f\u8fdb\u884c\u524d\u7aef\u8def\u7531\u7ba1\u7406\u3002</p><p>\u5982\u679c\u4f60\u60f3\u91c7\u7528 <code>PathLocationStrategy</code> \u7b56\u7565\uff0c\u5219\u9700\u8981\u5c06 <code>./src/app/routes/routes.module.ts</code> \u7684 <code>RouterModule.forRoot(routes, { useHash: true })</code> \u6362\u6210 <code>RouterModule.forRoot(routes)</code>\u3002\u540c\u65f6\u9700\u8981\u670d\u52a1\u7aef\u505a\u4e00\u4e2a\u6620\u5c04\uff0c\u6bd4\u5982\uff1a</p><p>express \u7684\u4f8b\u5b50\uff1a</p><pre class="hljs language-js"><code>app.use(express.static(path.join(__dirname, \'build\')));\n\napp.get(\'/*\', function (req, res) {\n  res.sendFile(path.join(__dirname, \'build\', \'index.html\'));\n});</code></pre><p>egg \u7684\u4f8b\u5b50\uff1a</p><pre class="hljs language-js"><code>// controller\nexports.index = function* () {\n  yield this.render(\'App.jsx\', {\n    context: {\n      user: this.session.user,\n    },\n  });\n};\n\n// router\napp.get(\'home\', \'/*\', \'home.index\');</code></pre><p>\u6709\u5173\u66f4\u591a Angular \u8def\u7531\u76f8\u5f53\u95ee\u9898\uff0c\u8bf7\u9605\u8bfb<a target="_blank" href="//angular.io/guide/router" data-url="//angular.io/guide/router">\u5b98\u7f51</a>\u3002</p><h3 id="Docker">Docker<a onclick="window.location.hash = \'Docker\'" class="anchor">#</a></h3><p>NG-ALAIN \u63d0\u4f9b\u4e86\u4e00\u4e2a\u57fa\u4e8e <code>nginx</code> WEB\u670d\u52a1\u5b8c\u6574\u7684\u6784\u5efaAngular\u9879\u76ee\u7684\u955c\u50cf\u6587\u4ef6\u3002\u5176\u4e2d <code>nginx</code> \u662f\u91c7\u7528 <a target="_blank" href="https://github.com/nginxinc/docker-nginx/blob/master/mainline/alpine/Dockerfile" data-url="https://github.com/nginxinc/docker-nginx/blob/master/mainline/alpine/Dockerfile">nginx:1.13.5-alpine</a> \u7684\u955c\u50cf\uff0c\u57fa\u672c\u4e0a\u53ef\u4ee5\u6ee1\u8db3 NG-ALAIN \u9879\u76ee\u7684\u826f\u597d\u8fd0\u884c\u73af\u5883\uff0c\u5018\u82e5\u6709\u66f4\u591a\u9700\u6c42\uff0c\u4f60\u53ef\u4ee5\u5229\u7528 <code>docker run</code> \u8f7b\u6613\u7684\u6307\u5b9a <em>nginx.conf</em>\u3002</p><h4 id="1\u3001\u6784\u5efa\u955c\u50cf">1\u3001\u6784\u5efa\u955c\u50cf<a onclick="window.location.hash = \'1\u3001\u6784\u5efa\u955c\u50cf\'" class="anchor">#</a></h4><p>\u6839\u636e Dockerfile \u6784\u5efa\u4e00\u4e2a\u5b8c\u6574\u7684 NG-ALAIN \u6240\u9700\u8981\u7684\u8fd0\u884c\u73af\u5883\u7684\u955c\u50cf\u3002</p><pre class="hljs language-bash"><code>docker build -t ng-alain .</code></pre><h4 id="2\u3001\u8fd0\u884c">2\u3001\u8fd0\u884c<a onclick="window.location.hash = \'2\u3001\u8fd0\u884c\'" class="anchor">#</a></h4><p><strong>\u57fa\u4e8ecompose\uff08\u63a8\u8350\uff09</strong></p><pre class="hljs language-bash"><code>docker-compose up -d</code></pre><p>\u5176\u7ec6\u8282\u53ef\u4ee5\u901a\u8fc7 <code>docker-compose.yml</code> \u4fee\u6539\u3002</p><p><strong>\u57fa\u4e8e\u547d\u4ee4\u5f0f</strong></p><pre class="hljs language-bash"><code>docker run -d -p 80:80 --name alain ng-alain</code></pre><p>\u6700\u540e\u4f60\u53ef\u4ee5\u8bbf\u95ee\uff1a<a target="_blank" href="http://localhost/" data-url="http://localhost/">http://localhost/</a></p><h4 id="3\u3001\u5173\u4e8eSSL">3\u3001\u5173\u4e8eSSL<a onclick="window.location.hash = \'3\u3001\u5173\u4e8eSSL\'" class="anchor">#</a></h4><p>NG-ALAIN \u63d0\u4f9b\u7684 Dockerfile \u6587\u4ef6\u76f8\u5bf9\u4e8e\u6bd4\u8f83\u7b80\u5355\uff0c\u800c\u5b9e\u9645\u9879\u76ee\u4e2d\u6700\u5e38\u7528\u7684\u662f\u5bf9SSL\u7684\u652f\u6301\u3002</p><p>\u56e0\u6b64\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u4f60\u53ef\u4ee5\u5c06\u8bc1\u4e66\u653e\u7f6e <code>_nginx/ssl</code> \u76ee\u5f55\u4e0b\uff0c\u5e76\u5f00\u542f <code>_nginx/default.conf</code> \u76f8\u5173SSL\u914d\u7f6e\u9879\u5373\u53ef\u3002</p><p>\u6700\u540e\uff0c\u589e\u52a0 <code>docker-compose.yml</code> \u7684 <code>ports</code> \u8282\u70b9\uff1a</p><pre class="hljs language-null"><code>- 443:443</code></pre><h3 id="\u5bb9\u5668\u90e8\u7f72">\u5bb9\u5668\u90e8\u7f72<a onclick="window.location.hash = \'\u5bb9\u5668\u90e8\u7f72\'" class="anchor">#</a></h3><p>\u53c2\u8003 <a target="_blank" href="https://zhuanlan.zhihu.com/p/35688938" data-url="https://zhuanlan.zhihu.com/p/35688938">Angular \u5bb9\u5668\u90e8\u7f72</a>\u3002</p></article></section>',meta:{order:70,title:{"en-US":"Build & Deploy","zh-CN":"\u6784\u5efa\u548c\u53d1\u5e03"},type:"Dev"},toc:[{id:"\u6784\u5efa",title:"\u6784\u5efa",h:2},{id:"JavaScript-heap-out-of-memory",title:"JavaScript heap out of memory",h:3},{id:"\u73af\u5883\u53d8\u91cf",title:"\u73af\u5883\u53d8\u91cf",h:3},{id:"\u5206\u6790\u6784\u5efa\u6587\u4ef6\u4f53\u79ef",title:"\u5206\u6790\u6784\u5efa\u6587\u4ef6\u4f53\u79ef",h:3},{id:"\u53d1\u5e03",title:"\u53d1\u5e03",h:2},{id:"\u8def\u7531\u7b56\u7565",title:"\u8def\u7531\u7b56\u7565",h:3},{id:"Docker",title:"Docker",h:3},{id:"\u5bb9\u5668\u90e8\u7f72",title:"\u5bb9\u5668\u90e8\u7f72",h:3}]}},demo:!1},this.codes=[]},u=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/faq.en-US.md","zh-CN":"docs/faq.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>Please check the FAQ below before asking questions.</p><h2 id="Basic">Basic<a onclick="window.location.hash = \'Basic\'" class="anchor">#</a></h2><h3 id="Can\'t-Bind-to-since-it-isn\'t-a-known-property-of">Can\'t Bind to since it isn\'t a known property of<a onclick="window.location.hash = \'Can\'t-Bind-to-since-it-isn\'t-a-known-property-of\'" class="anchor">#</a></h3><p>When you have multiple lazy modules, you want each submodule to use the component library (for example: <code>NgZorroAntdModule</code>, <code>NgxTinymceModule</code>) should be exported in <code>ShareModule</code>, please refer to <a href="/docs/Module" data-url="/docs/Module">module registration guidelines</a>.</p><h3 id="Expression-Changed-After-It-Has-Been-Checked-Error">Expression Changed After It Has Been Checked Error<a onclick="window.location.hash = \'Expression-Changed-After-It-Has-Been-Checked-Error\'" class="anchor">#</a></h3><p>Common mistakes under Angular, <a target="_blank" href="https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4" data-url="https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4">this article</a> will help you understand why.</p><h3 id="Can\'t-bind-to-\'formGroup\'-since-it-isn\'t-a-known-property-of-\'form\'">Can\'t bind to \'formGroup\' since it isn\'t a known property of \'form\'<a onclick="window.location.hash = \'Can\'t-bind-to-\'formGroup\'-since-it-isn\'t-a-known-property-of-\'form\'\'" class="anchor">#</a></h3><p>Common mistakes under Angular, the use of Reactive Forms requires the introduction of <code>ReactiveFormsModule</code>, refer to <a target="_blank" href="https://angular.io/guide/reactive-forms" data-url="https://angular.io/guide/reactive-forms">official documentation</a>.</p><h3 id="Why-is-the-page-not-updated-after-the-data-is-modified?">Why is the page not updated after the data is modified?<a onclick="window.location.hash = \'Why-is-the-page-not-updated-after-the-data-is-modified?\'" class="anchor">#</a></h3><p>The NG-ZORRO and @delon/* components work in OnPush mode by default. Mutate objects or arrays do not trigger Angular\'s change detection. Use the immutable method.</p><h2 id="Installation">Installation<a onclick="window.location.hash = \'Installation\'" class="anchor">#</a></h2><h3 id="Why-can\'t-I-find-the-ng-zorro-antd/src/*.less-style?">Why can\'t I find the ng-zorro-antd/src/*.less style?<a onclick="window.location.hash = \'Why-can\'t-I-find-the-ng-zorro-antd/src/*.less-style?\'" class="anchor">#</a></h3><p>Two situations:</p><ul><li><p>Using <code>cnpm</code> to install dependencies, you will not be able to find style files. This is because <code>cnpm</code> is in the form of a soft link path, which causes the <code>ng-zorro-antd</code> folder name to change, so it is recommended to use the <code>npm</code> install dependency package instead.</p></li><li><p>The <code>ng-zorro-antd</code> version is too old to cause some components to fail to load into the appropriate style</p></li></ul><h3 id="How-to-use-Taobao-source-correctly?">How to use Taobao source correctly?<a onclick="window.location.hash = \'How-to-use-Taobao-source-correctly?\'" class="anchor">#</a></h3><p>The simplest is to use the <a href="/cli/plugin#networkEnv" data-url="/cli/plugin#networkEnv">networkEnv</a> plugin.</p><p>Or manually repair:</p><p><strong>yarn</strong></p><pre class="hljs language-bash"><code>yarn config set registry https://registry.npm.taobao.org\nyarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass\n# restore\nyarn config delete registry\nyarn config delete sass_binary_site</code></pre><p><strong>npm</strong></p><pre class="hljs language-bash"><code>npm config set registry https://registry.npm.taobao.org\nnpm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass\n# restore\nnpm config delete registry\nnpm config delete sass_binary_site</code></pre><h3 id="No-such-file-or-directory">No such file or directory<a onclick="window.location.hash = \'No-such-file-or-directory\'" class="anchor">#</a></h3><p>This question is difficult to explain, npm has a long building <a target="_blank" href="https://github.com/npm/npm/issues/17444#issuecomment-393761515" data-url="https://github.com/npm/npm/issues/17444#issuecomment-393761515">#17444</a>, and finally gives a reluctant answer:</p><ol><li><p>Make sure to install the latest npm version: <code>npm i -g npm</code></p></li><li><p>Remove <code>node_modules</code> and <code>package-lock.json</code></p></li><li><p><code>npm i</code></p></li></ol><p>Finally, repeat the above steps if you still can\'t!</p><h2 id="Configuration">Configuration<a onclick="window.location.hash = \'Configuration\'" class="anchor">#</a></h2><h3 id="How-to-override-the-@delon/*-configuration">How to override the @delon/* configuration<a onclick="window.location.hash = \'How-to-override-the-@delon/*-configuration\'" class="anchor">#</a></h3><pre class="hljs language-ts"><code>// delon.module.ts\nimport { DelonAuthConfig } from \'@delon/auth\';\nexport function delonAuthConfig(): DelonAuthConfig {\n  return Object.assign(new DelonAuthConfig(), <DelonAuthConfig>{\n    login_url: \'/passport/login\'\n  });\n}\n\n@NgModule({})\nexport class DelonModule {\n  static forRoot(): ModuleWithProviders {\n    return {\n      ngModule: DelonModule,\n      providers: [\n        { provide: DelonAuthConfig, useFactory: delonAuthConfig}\n      ]\n    };\n  }\n}</code></pre><h3 id="How-do-I-deploy-the-antd-icon-locally?">How do I deploy the antd icon locally?<a onclick="window.location.hash = \'How-do-I-deploy-the-antd-icon-locally?\'" class="anchor">#</a></h3><p>First, the latest iconfont file can go to <a target="_blank" href="https://ant.design/docs/spec/download" data-url="https://ant.design/docs/spec/download">this link</a> (<a target="_blank" href="http://ant-design.gitee.io/docs/spec/download" data-url="http://ant-design.gitee.io/docs/spec/download">mirror</a>) Download.</p><p>Finally, redefine the new path in <code>src/styles/theme.less</code>:</p><pre class="hljs language-less"><code>@icon-url: "/assets/iconfont";</code></pre><blockquote><p>Use an absolute path or CDN address.</p></blockquote><h3 id="Missing-locale-data-for-the-locale-"zh-cn"">Missing locale data for the locale "zh-cn"<a onclick="window.location.hash = \'Missing-locale-data-for-the-locale-"zh-cn"\'" class="anchor">#</a></h3><p>For missing language imports, refer to <a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/app.module.ts#L6-L25" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/app.module.ts#L6-L25">app.module.ts</a>.</p><h3 id="How-to-deploy-ng-alain.com-documentation-site-in-local">How to deploy ng-alain.com documentation site in local<a onclick="window.location.hash = \'How-to-deploy-ng-alain.com-documentation-site-in-local\'" class="anchor">#</a></h3><p>We provided an online snapshot:</p><pre class="hljs language-barsh"><code>git clone --depth 1 --branch gh-pages https://github.com/ng-alain/delon.git docs</code></pre><p>You can simply create a Docker container to quickly deploy the same documentation site as ng-alain.com.</p></article></section>',meta:{order:20,title:{"en-US":"FAQ","zh-CN":"\u5e38\u89c1\u95ee\u9898"},type:"Other"},toc:[{id:"Basic",title:"Basic",h:2},{id:"Can't-Bind-to-since-it-isn't-a-known-property-of",title:"Can't Bind to since it isn't a known property of",h:3},{id:"Expression-Changed-After-It-Has-Been-Checked-Error",title:"Expression Changed After It Has Been Checked Error",h:3},{id:"Can't-bind-to-'formGroup'-since-it-isn't-a-known-property-of-'form'",title:"Can't bind to 'formGroup' since it isn't a known property of 'form'",h:3},{id:"Why-is-the-page-not-updated-after-the-data-is-modified?",title:"Why is the page not updated after the data is modified?",h:3},{id:"Installation",title:"Installation",h:2},{id:"Why-can't-I-find-the-ng-zorro-antd/src/*.less-style?",title:"Why can't I find the ng-zorro-antd/src/*.less style?",h:3},{id:"How-to-use-Taobao-source-correctly?",title:"How to use Taobao source correctly?",h:3},{id:"No-such-file-or-directory",title:"No such file or directory",h:3},{id:"Configuration",title:"Configuration",h:2},{id:"How-to-override-the-@delon/*-configuration",title:"How to override the @delon/* configuration",h:3},{id:"How-do-I-deploy-the-antd-icon-locally?",title:"How do I deploy the antd icon locally?",h:3},{id:'Missing-locale-data-for-the-locale-"zh-cn"',title:'Missing locale data for the locale "zh-cn"',h:3},{id:"How-to-deploy-ng-alain.com-documentation-site-in-local",title:"How to deploy ng-alain.com documentation site in local",h:3}]},"zh-CN":{content:'<section class="markdown"><article><p>\u63d0\u95ee\u4e4b\u524d\uff0c\u8bf7\u5148\u67e5\u9605\u4e0b\u9762\u7684\u5e38\u89c1\u95ee\u9898\u3002</p><h2 id="\u57fa\u7840">\u57fa\u7840<a onclick="window.location.hash = \'\u57fa\u7840\'" class="anchor">#</a></h2><h3 id="Can\'t-Bind-to-since-it-isn\'t-a-known-property-of">Can\'t Bind to since it isn\'t a known property of<a onclick="window.location.hash = \'Can\'t-Bind-to-since-it-isn\'t-a-known-property-of\'" class="anchor">#</a></h3><p>\u5f53\u4f60\u6709\u591a\u4e2a\u61d2\u6a21\u5757\u65f6\uff0c\u5e0c\u671b\u6bcf\u4e2a\u5b50\u6a21\u5757\u90fd\u9700\u8981\u4f7f\u7528\u7ec4\u4ef6\u5e93\u65f6\uff08\u4f8b\u5982\uff1a<code>NgZorroAntdModule</code>\u3001<code>NgxTinymceModule</code>\uff09\u5e94\u5728 <code>ShareModule</code> \u4e2d export\uff0c\u8bf7\u53c2\u8003<a href="/docs/module" data-url="/docs/module">\u6a21\u5757\u6ce8\u518c\u6307\u5bfc\u539f\u5219</a>\u3002</p><h3 id="Expression-Changed-After-It-Has-Been-Checked-Error-\u9519\u8bef">Expression Changed After It Has Been Checked Error \u9519\u8bef<a onclick="window.location.hash = \'Expression-Changed-After-It-Has-Been-Checked-Error-\u9519\u8bef\'" class="anchor">#</a></h3><p>Angular \u4e0b\u5e38\u89c1\u9519\u8bef\uff0c<a target="_blank" href="https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4" data-url="https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4">\u8fd9\u7bc7\u6587\u7ae0</a> \u4f1a\u5e2e\u52a9\u4f60\u7406\u89e3\u539f\u56e0\u3002</p><h3 id="Can\'t-bind-to-\'formGroup\'-since-it-isn\'t-a-known-property-of-\'form\'">Can\'t bind to \'formGroup\' since it isn\'t a known property of \'form\'<a onclick="window.location.hash = \'Can\'t-bind-to-\'formGroup\'-since-it-isn\'t-a-known-property-of-\'form\'\'" class="anchor">#</a></h3><p>Angular \u4e0b\u5e38\u89c1\u9519\u8bef\uff0c\u4f7f\u7528 Reactive Forms \u9700\u8981\u989d\u5916\u5f15\u5165 <code>ReactiveFormsModule</code>\uff0c\u53ef\u4ee5\u53c2\u8003<a target="_blank" href="https://angular.io/guide/reactive-forms" data-url="https://angular.io/guide/reactive-forms">\u5b98\u65b9\u6587\u6863</a>\u3002</p><h3 id="\u6570\u636e\u4fee\u6539\u540e\u9875\u9762\u4e3a\u4ec0\u4e48\u6ca1\u6709\u66f4\u65b0">\u6570\u636e\u4fee\u6539\u540e\u9875\u9762\u4e3a\u4ec0\u4e48\u6ca1\u6709\u66f4\u65b0<a onclick="window.location.hash = \'\u6570\u636e\u4fee\u6539\u540e\u9875\u9762\u4e3a\u4ec0\u4e48\u6ca1\u6709\u66f4\u65b0\'" class="anchor">#</a></h3><p>NG-ZORRO \u53ca @delon/* \u7ec4\u4ef6\u9ed8\u8ba4\u5728 OnPush \u6a21\u5f0f\u4e0b\u5de5\u4f5c\uff0cmutate \u5bf9\u8c61\u6216\u8005\u6570\u7ec4\u4e0d\u4f1a\u89e6\u53d1 Angular \u7684\u53d8\u66f4\u68c0\u6d4b\uff0c\u8bf7\u4f7f\u7528 immutable \u65b9\u5f0f\u3002</p><h2 id="\u5b89\u88c5">\u5b89\u88c5<a onclick="window.location.hash = \'\u5b89\u88c5\'" class="anchor">#</a></h2><h3 id="\u4e3a\u4ec0\u4e48\u627e\u4e0d\u5230-ng-zorro-antd/src/*.less-\u6837\u5f0f\uff1f">\u4e3a\u4ec0\u4e48\u627e\u4e0d\u5230 ng-zorro-antd/src/*.less \u6837\u5f0f\uff1f<a onclick="window.location.hash = \'\u4e3a\u4ec0\u4e48\u627e\u4e0d\u5230-ng-zorro-antd/src/*.less-\u6837\u5f0f\uff1f\'" class="anchor">#</a></h3><p>\u4e24\u79cd\u60c5\u51b5\uff1a</p><ul><li><p>\u4f7f\u7528 <code>cnpm</code> \u5b89\u88c5\u4f9d\u8d56\u5305\uff0c\u4f1a\u9047\u5230\u65e0\u6cd5\u627e\u5230\u6837\u5f0f\u6587\u4ef6\u3002\u8fd9\u662f\u7531\u4e8e <code>cnpm</code> \u91c7\u7528\u7684\u662f\u8f6f\u94fe\u63a5\u8def\u5f84\u5f62\u5f0f\uff0c\u5bfc\u81f4 <code>ng-zorro-antd</code> \u6587\u4ef6\u5939\u540d\u6709\u6240\u53d8\u52a8\uff0c\u56e0\u6b64\u5efa\u8bae\u6539\u7528 <code>npm</code> \u5b89\u88c5\u4f9d\u8d56\u5305\u3002</p></li><li><p><code>ng-zorro-antd</code> \u7248\u672c\u8fc7\u65e7\u5bfc\u81f4\u90e8\u5206\u7ec4\u4ef6\u65e0\u6cd5\u52a0\u8f7d\u5230\u76f8\u5e94\u6837\u5f0f</p></li></ul><h3 id="\u5982\u4f55\u6b63\u786e\u4f7f\u7528\u6dd8\u5b9d\u6e90\uff1f">\u5982\u4f55\u6b63\u786e\u4f7f\u7528\u6dd8\u5b9d\u6e90\uff1f<a onclick="window.location.hash = \'\u5982\u4f55\u6b63\u786e\u4f7f\u7528\u6dd8\u5b9d\u6e90\uff1f\'" class="anchor">#</a></h3><p>\u6700\u7b80\u5355\u662f\u4f7f\u7528 <a href="/cli/plugin#networkEnv" data-url="/cli/plugin#networkEnv">networkEnv</a> \u63d2\u4ef6\u3002</p><p>\u6216\u624b\u52a8\u4fee\u590d\uff1a</p><p><strong>yarn</strong></p><pre class="hljs language-bash"><code>yarn config set registry https://registry.npm.taobao.org\nyarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass\n# \u6062\u590d\nyarn config delete registry\nyarn config delete sass_binary_site</code></pre><p><strong>npm</strong></p><pre class="hljs language-bash"><code>npm config set registry https://registry.npm.taobao.org\nnpm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass\n# \u6062\u590d\nnpm config delete registry\nnpm config delete sass_binary_site</code></pre><h3 id="no-such-file-or-directory">no such file or directory<a onclick="window.location.hash = \'no-such-file-or-directory\'" class="anchor">#</a></h3><p>\u8fd9\u4e2a\u95ee\u9898\u5f88\u96be\u89e3\u91ca\uff0cnpm \u6709\u4e00\u4e2a\u957f\u697c <a target="_blank" href="https://github.com/npm/npm/issues/17444#issuecomment-393761515" data-url="https://github.com/npm/npm/issues/17444#issuecomment-393761515">#17444</a>\uff0c\u5e76\u4e14\u6700\u540e\u7ed9\u51fa\u4e00\u79cd\u52c9\u5f3a\u7b54\u6848\uff1a</p><ol><li><p>\u786e\u4fdd\u5b89\u88c5\u6700\u65b0 npm \u7248\u672c\uff1a<code>npm i -g npm</code></p></li><li><p>\u5220\u9664 <code>node_modules</code> \u548c <code>package-lock.json</code></p></li><li><p><code>npm i</code></p></li></ol><p>\u6700\u540e\uff0c\u4f9d\u7136\u4e0d\u884c\u5c31\u518d\u91cd\u590d\u4ee5\u4e0a\u6b65\u9aa4\uff01</p><h2 id="\u914d\u7f6e">\u914d\u7f6e<a onclick="window.location.hash = \'\u914d\u7f6e\'" class="anchor">#</a></h2><h3 id="\u5982\u4f55\u8986\u76d6-@delon/*-\u7684\u914d\u7f6e">\u5982\u4f55\u8986\u76d6 @delon/* \u7684\u914d\u7f6e<a onclick="window.location.hash = \'\u5982\u4f55\u8986\u76d6-@delon/*-\u7684\u914d\u7f6e\'" class="anchor">#</a></h3><pre class="hljs language-ts"><code>// delon.module.ts\nimport { DelonAuthConfig } from \'@delon/auth\';\nexport function delonAuthConfig(): DelonAuthConfig {\n  return Object.assign(new DelonAuthConfig(), <DelonAuthConfig>{\n    login_url: \'/passport/login\'\n  });\n}\n\n@NgModule({})\nexport class DelonModule {\n  static forRoot(): ModuleWithProviders {\n    return {\n      ngModule: DelonModule,\n      providers: [\n        { provide: DelonAuthConfig, useFactory: delonAuthConfig}\n      ]\n    };\n  }\n}</code></pre><h3 id="\u5982\u4f55\u672c\u5730\u90e8\u7f72-antd-\u56fe\u6807\uff1f">\u5982\u4f55\u672c\u5730\u90e8\u7f72 antd \u56fe\u6807\uff1f<a onclick="window.location.hash = \'\u5982\u4f55\u672c\u5730\u90e8\u7f72-antd-\u56fe\u6807\uff1f\'" class="anchor">#</a></h3><p>\u9996\u5148\uff0c\u6700\u65b0\u7684 iconfont \u6587\u4ef6\u53ef\u4ee5\u5230 <a target="_blank" href="https://ant.design/docs/spec/download-cn" data-url="https://ant.design/docs/spec/download-cn">\u6b64\u94fe\u63a5</a>\uff08<a target="_blank" href="http://ant-design.gitee.io/docs/spec/download-cn" data-url="http://ant-design.gitee.io/docs/spec/download-cn">\u955c\u50cf</a>\uff09 \u4e0b\u8f7d\u3002</p><p>\u6700\u540e\uff0c\u5728 <code>src/styles/theme.less</code> \u91cd\u65b0\u5b9a\u4e49\u65b0\u7684\u8def\u5f84\uff1a</p><pre class="hljs language-less"><code>@icon-url: "/assets/iconfont";</code></pre><blockquote><p>\u4f7f\u7528\u7edd\u5bf9\u8def\u5f84\u6216CDN\u5730\u5740\u3002</p></blockquote><h3 id="Missing-locale-data-for-the-locale-"zh-cn"">Missing locale data for the locale "zh-cn"<a onclick="window.location.hash = \'Missing-locale-data-for-the-locale-"zh-cn"\'" class="anchor">#</a></h3><p>\u7f3a\u5c11\u8bed\u8a00\u5bfc\u5165\uff0c\u53c2\u8003<a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/app.module.ts#L6-L25" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/app.module.ts#L6-L25">app.module.ts</a>\u3002</p><h3 id="\u5982\u4f55\u672c\u5730\u90e8\u7f72ng-alain.com\u6587\u6863">\u5982\u4f55\u672c\u5730\u90e8\u7f72ng-alain.com\u6587\u6863<a onclick="window.location.hash = \'\u5982\u4f55\u672c\u5730\u90e8\u7f72ng-alain.com\u6587\u6863\'" class="anchor">#</a></h3><p>\u6211\u4eec\u63d0\u4f9b\u4e00\u4efd\u5728\u7ebf\u5feb\u7167\uff1a</p><pre class="hljs language-barsh"><code>git clone --depth 1 --branch gh-pages https://github.com/ng-alain/delon.git docs</code></pre><p>\u4f60\u53ef\u4ee5\u7b80\u5355\u7684\u521b\u5efa\u4e00\u4e2a Docker \u5bb9\u5668\u6765\u5feb\u901f\u90e8\u7f72 ng-alain.com \u76f8\u540c\u7684\u6587\u6863\u7ad9\u70b9\u3002</p></article></section>',meta:{order:20,title:{"en-US":"FAQ","zh-CN":"\u5e38\u89c1\u95ee\u9898"},type:"Other"},toc:[{id:"\u57fa\u7840",title:"\u57fa\u7840",h:2},{id:"Can't-Bind-to-since-it-isn't-a-known-property-of",title:"Can't Bind to since it isn't a known property of",h:3},{id:"Expression-Changed-After-It-Has-Been-Checked-Error-\u9519\u8bef",title:"Expression Changed After It Has Been Checked Error \u9519\u8bef",h:3},{id:"Can't-bind-to-'formGroup'-since-it-isn't-a-known-property-of-'form'",title:"Can't bind to 'formGroup' since it isn't a known property of 'form'",h:3},{id:"\u6570\u636e\u4fee\u6539\u540e\u9875\u9762\u4e3a\u4ec0\u4e48\u6ca1\u6709\u66f4\u65b0",title:"\u6570\u636e\u4fee\u6539\u540e\u9875\u9762\u4e3a\u4ec0\u4e48\u6ca1\u6709\u66f4\u65b0",h:3},{id:"\u5b89\u88c5",title:"\u5b89\u88c5",h:2},{id:"\u4e3a\u4ec0\u4e48\u627e\u4e0d\u5230-ng-zorro-antd/src/*.less-\u6837\u5f0f\uff1f",title:"\u4e3a\u4ec0\u4e48\u627e\u4e0d\u5230 ng-zorro-antd/src/*.less \u6837\u5f0f\uff1f",h:3},{id:"\u5982\u4f55\u6b63\u786e\u4f7f\u7528\u6dd8\u5b9d\u6e90\uff1f",title:"\u5982\u4f55\u6b63\u786e\u4f7f\u7528\u6dd8\u5b9d\u6e90\uff1f",h:3},{id:"no-such-file-or-directory",title:"no such file or directory",h:3},{id:"\u914d\u7f6e",title:"\u914d\u7f6e",h:2},{id:"\u5982\u4f55\u8986\u76d6-@delon/*-\u7684\u914d\u7f6e",title:"\u5982\u4f55\u8986\u76d6 @delon/* \u7684\u914d\u7f6e",h:3},{id:"\u5982\u4f55\u672c\u5730\u90e8\u7f72-antd-\u56fe\u6807\uff1f",title:"\u5982\u4f55\u672c\u5730\u90e8\u7f72 antd \u56fe\u6807\uff1f",h:3},{id:'Missing-locale-data-for-the-locale-"zh-cn"',title:'Missing locale data for the locale "zh-cn"',h:3},{id:"\u5982\u4f55\u672c\u5730\u90e8\u7f72ng-alain.com\u6587\u6863",title:"\u5982\u4f55\u672c\u5730\u90e8\u7f72ng-alain.com\u6587\u6863",h:3}]}},demo:!1},this.codes=[]},g=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/getting-started.en-US.md","zh-CN":"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>NG-ALAIN is a production-ready solution for admin interfaces. Built on the design principles developed by <a target="_blank" href="https://ant.design/" data-url="https://ant.design/">Ant Design</a>, this project introduces higher level components; we have developed templates, components, and a corresponding design kit to improve the user and development experience for admin interfaces.</p><p><strong>How to read document</strong></p><p>This document uses the following conventions:</p><ul><li><p>API</p><ul><li><p><code>[]</code> Input Property</p></li><li><p><code>()</code> Output Event</p></li><li><p><code>[()]</code> Two-way binding</p></li><li><p><code>ng-content</code> Component content placeholders</p></li><li><p><code>#tpl</code> Refers <code>&lt;ng-template #tpl></ng-template></code></p></li></ul></li></ul><h2 id="Preparation">Preparation<a onclick="window.location.hash = \'Preparation\'" class="anchor">#</a></h2><p>You will need <a target="_blank" href="http://nodejs.org/" data-url="http://nodejs.org/">node</a> and <a target="_blank" href="https://git-scm.com/" data-url="https://git-scm.com/">git</a>. The project is based on <a target="_blank" href="https://www.tslang.com/" data-url="https://www.tslang.com/">Typescript</a>, <a target="_blank" href="https://angular.io/" data-url="https://angular.io/">Angular</a>, <a target="_blank" href="http://g2.alipay.com/" data-url="http://g2.alipay.com/">g2</a>, <a target="_blank" href="https://github.com/ng-alain/delon" data-url="https://github.com/ng-alain/delon">@delon</a> and <a target="_blank" href="https://ng.ant.design/" data-url="https://ng.ant.design/">ng-zorro-antd</a>. It would be helpful if you have pre-existing knowledge on those.</p><h2 id="Installation">Installation<a onclick="window.location.hash = \'Installation\'" class="anchor">#</a></h2><h3 id="CLI-(Recommend)">CLI (Recommend)<a onclick="window.location.hash = \'CLI-(Recommend)\'" class="anchor">#</a></h3><p>Please make sure global Angular Cli is <code>8.x</code> version via <code>ng version</code> command, please refer to <a target="_blank" href="https://angular.cn/cli" data-url="https://angular.cn/cli">CLI Command Reference</a> for how to upgrade.</p><pre class="hljs language-bash"><code>ng new my-project --style less\ncd my-project\nng add ng-alain\nnpm start</code></pre><blockquote><p>Please refer to <a href="/cli" data-url="/cli">Schematics</a> for more details.</p></blockquote><h3 id="Clone-the-Git-Repository">Clone the Git Repository<a onclick="window.location.hash = \'Clone-the-Git-Repository\'" class="anchor">#</a></h3><pre class="hljs language-bash"><code>git clone --depth=1 https://github.com/ng-alain/ng-alain.git my-project\ncd my-project\nyarn\nnpm start</code></pre><blockquote><p>Note: Installing with the CLI is a clean scaffolding; using clone the git repository include all example pages.</p></blockquote><h2 id="Scaffolding">Scaffolding<a onclick="window.location.hash = \'Scaffolding\'" class="anchor">#</a></h2><p>NG-ALAIN is a standard Angular CLI project that includes common routes for admins and demonstrates our component library. The project layout is as follows:</p><pre class="hljs language-null"><code>\u251c\u2500\u2500 _mock                                       # Local Mock Data\n\u251c\u2500\u2500 src\n\u2502\xa0\xa0 \u251c\u2500\u2500 app\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 core\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 i18n\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 net\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 default.interceptor.ts      # Default HTTP interceptor\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 services\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 startup.service.ts          # Initialize project configuration\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 core.module.ts                  # Core module file\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 layout                              # Layout files\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 routes\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 **                              # Business directory\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 routes.module.ts                # Business routing module\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 routes-routing.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 shared                              # Shared module\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 shared.module.ts\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 app.component.ts                    # Root component\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 app.module.ts                       # Root module\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 delon.module.ts                     # @delon modules import\n\u2502\xa0\xa0 \u251c\u2500\u2500 assets                                  # Local static files\n\u2502\xa0\xa0 \u251c\u2500\u2500 environments                            # Environment configuration\n\u2502\xa0\xa0 \u251c\u2500\u2500 styles                                  # Project styles\n\u2514\u2500\u2500 \u2514\u2500\u2500 style.less                              # Style entry</code></pre><h2 id="Development">Development<a onclick="window.location.hash = \'Development\'" class="anchor">#</a></h2><pre class="hljs language-bash"><code>npm start</code></pre><p>This will automatically open <a target="_blank" href="http://localhost:8000" data-url="http://localhost:8000">http://localhost:8000</a>. If you see the following page then you have succeeded.</p><p><img width=700 src="./assets/screenshot/desktop.png" /></p><h2 id="Contributing">Contributing<a onclick="window.location.hash = \'Contributing\'" class="anchor">#</a></h2><p>Please read our <a href="/docs/contributing" data-url="/docs/contributing">CONTRIBUTING.md</a> first.</p><p>If you\'d like to help us improve NG-ZORRO, just create a <a target="_blank" href="https://github.com/ng-alain/ng-alain/pulls" data-url="https://github.com/ng-alain/ng-alain/pulls">Pull Request</a>. Feel free to report bugs and issues <a target="_blank" href="https://github.com/ng-alain/ng-alain/issues" data-url="https://github.com/ng-alain/ng-alain/issues">here</a>.</p><blockquote><p>If you\'re new to posting issues, we ask that you read <a target="_blank" href="http://www.catb.org/~esr/faqs/smart-questions.html" data-url="http://www.catb.org/~esr/faqs/smart-questions.html"><em>How To Ask Questions The Smart Way</em></a>(This guide does not provide actual support services for this project!) and <a target="_blank" href="https://github.com/seajs/seajs/issues/545" data-url="https://github.com/seajs/seajs/issues/545">How to Ask a Question in Open Source Community</a> and <a target="_blank" href="http://www.chiark.greenend.org.uk/~sgtatham/bugs.html" data-url="http://www.chiark.greenend.org.uk/~sgtatham/bugs.html">How to Report Bugs Effectively</a> prior to posting. Well written bug reports help us help you!</p></blockquote><h2 id="Need-Help?">Need Help?<a onclick="window.location.hash = \'Need-Help?\'" class="anchor">#</a></h2><p>For questions on how to use ng-alain, please post questions to <a target="_blank" href="https://stackoverflow.com/questions/tagged/ng-alain" data-url="https://stackoverflow.com/questions/tagged/ng-alain"><img width=140 src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" alt="Stack Overflow" /></a> using the <code>ng-alain</code> tag.</p><p>As always, we encourage experienced users to help those who are not familiar with <code>ng-alain</code>!</p><h2 id="DONATE">DONATE<a onclick="window.location.hash = \'DONATE\'" class="anchor">#</a></h2><p>If you would like to <a target="_blank" href="https://www.paypal.me/cipchk" data-url="https://www.paypal.me/cipchk"><img src="https://img.shields.io/badge/Donate-PayPal-green.svg" alt="Donate" /></a>\n to NG-ALAIN.</p></article></section>',meta:{order:10,title:"Getting Started",type:"Basic"},toc:[{id:"Foreword",title:"Foreword",h:2},{id:"Preparation",title:"Preparation",h:2},{id:"Installation",title:"Installation",h:2},{id:"CLI-(Recommend)",title:"CLI (Recommend)",h:3},{id:"Clone-the-Git-Repository",title:"Clone the Git Repository",h:3},{id:"Scaffolding",title:"Scaffolding",h:2},{id:"Development",title:"Development",h:2},{id:"Contributing",title:"Contributing",h:2},{id:"Need-Help?",title:"Need Help?",h:2},{id:"DONATE",title:"DONATE",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>NG-ALAIN \u662f\u4e00\u4e2a\u4f01\u4e1a\u7ea7\u4e2d\u540e\u53f0\u524d\u7aef/\u8bbe\u8ba1\u89e3\u51b3\u65b9\u6848\u811a\u624b\u67b6\uff0c\u6211\u4eec\u79c9\u627f <a target="_blank" href="https://ant.design/" data-url="https://ant.design/">Ant Design</a> \u7684\u8bbe\u8ba1\u4ef7\u503c\u89c2\uff0c\u76ee\u6807\u4e5f\u975e\u5e38\u7b80\u5355\uff0c\u5e0c\u671b\u5728Angular\u4e0a\u9762\u5f00\u53d1\u4f01\u4e1a\u540e\u53f0\u66f4\u7b80\u5355\u3001\u66f4\u5feb\u901f\u3002\u968f\u7740\u300e\u8bbe\u8ba1\u8005\u300f\u7684\u4e0d\u65ad\u53cd\u9988\uff0c\u5c06\u6301\u7eed\u8fed\u4ee3\uff0c\u9010\u6b65\u6c89\u6dc0\u548c\u603b\u7ed3\u51fa\u66f4\u591a\u8bbe\u8ba1\u6a21\u5f0f\u548c\u76f8\u5e94\u7684\u4ee3\u7801\u5b9e\u73b0\uff0c\u9610\u8ff0\u4e2d\u540e\u53f0\u4ea7\u54c1\u6a21\u677f/\u7ec4\u4ef6/\u4e1a\u52a1\u573a\u666f\u7684\u6700\u4f73\u5b9e\u8df5\uff0c\u4e5f\u5341\u5206\u671f\u5f85\u4f60\u7684\u53c2\u4e0e\u548c\u5171\u5efa\u3002</p><p><strong>\u5982\u4f55\u9605\u8bfb\u6587\u6863</strong></p><p>\u5728\u5f00\u59cb\u4e4b\u524d\u6709\u4e00\u4e9b\u6587\u6863\u63cf\u8ff0\u7ea6\u5b9a\u8bf4\u660e\uff0c\u8fd9\u6709\u52a9\u4e8e\u66f4\u597d\u7684\u9605\u8bfb\uff1a</p><ul><li><p>API\u76f8\u5173</p><ul><li><p><code>[]</code> \u8868\u793a\u5c5e\u6027</p></li><li><p><code>()</code> \u8868\u793a\u4e8b\u4ef6</p></li><li><p><code>[()]</code> \u8868\u793a\u53cc\u5411\u7ed1\u5b9a</p></li><li><p><code>ng-content</code> \u8868\u793a\u7ec4\u4ef6\u5185\u5bb9\u5360\u4f4d\u7b26</p></li><li><p><code>#tpl</code> \u5f00\u5934\u8868\u793a <code>\u2329ng-template #tpl\u232a</code></p></li></ul></li></ul><h2 id="\u524d\u5e8f\u51c6\u5907">\u524d\u5e8f\u51c6\u5907<a onclick="window.location.hash = \'\u524d\u5e8f\u51c6\u5907\'" class="anchor">#</a></h2><p>\u4f60\u7684\u672c\u5730\u73af\u5883\u9700\u8981\u5b89\u88c5 <a target="_blank" href="http://nodejs.org/" data-url="http://nodejs.org/">node</a> \u548c <a target="_blank" href="https://git-scm.com/" data-url="https://git-scm.com/">git</a>\u3002\u6211\u4eec\u7684\u6280\u672f\u6808\u57fa\u4e8e <a target="_blank" href="https://www.tslang.cn/" data-url="https://www.tslang.cn/">Typescript</a>\u3001<a target="_blank" href="https://angular.cn/" data-url="https://angular.cn/">Angular</a>\u3001<a target="_blank" href="http://g2.alipay.com/" data-url="http://g2.alipay.com/">g2</a>\u3001<a target="_blank" href="https://github.com/ng-alain/delon" data-url="https://github.com/ng-alain/delon">@delon</a> \u548c <a target="_blank" href="https://ng.ant.design/" data-url="https://ng.ant.design/">ng-zorro-antd</a>\uff0c\u63d0\u524d\u4e86\u89e3\u548c\u5b66\u4e60\u8fd9\u4e9b\u77e5\u8bc6\u4f1a\u975e\u5e38\u6709\u5e2e\u52a9\u3002</p><h2 id="\u5b89\u88c5">\u5b89\u88c5<a onclick="window.location.hash = \'\u5b89\u88c5\'" class="anchor">#</a></h2><h3 id="CLI\uff08\u63a8\u8350\uff09">CLI\uff08\u63a8\u8350\uff09<a onclick="window.location.hash = \'CLI\uff08\u63a8\u8350\uff09\'" class="anchor">#</a></h3><p>\u8bf7\u5148\u901a\u8fc7 <code>ng version</code> \u547d\u4ee4\u786e\u8ba4\u5168\u5c40 Angular Cli \u7248\u672c\u4e3a 8.x \u7248\u672c\uff0c\u6709\u5173\u5982\u4f55\u5347\u7ea7\u8bf7\u53c2\u8003<a target="_blank" href="https://angular.cn/cli" data-url="https://angular.cn/cli">CLI \u547d\u4ee4\u53c2\u8003\u624b\u518c</a>\u3002</p><pre class="hljs language-bash"><code>ng new my-project --style less\ncd my-project\nng add ng-alain\nnpm start</code></pre><blockquote><p>\u8bf7\u53c2\u8003<a href="/cli" data-url="/cli">\u547d\u4ee4\u884c\u5de5\u5177</a>\u4e86\u89e3\u66f4\u591a\u7ec6\u8282\u3002</p></blockquote><h3 id="\u514b\u9686\u4ee3\u7801">\u514b\u9686\u4ee3\u7801<a onclick="window.location.hash = \'\u514b\u9686\u4ee3\u7801\'" class="anchor">#</a></h3><pre class="hljs language-bash"><code>git clone --depth=1 https://github.com/ng-alain/ng-alain.git my-project\ncd my-project\nyarn\nnpm start</code></pre><blockquote><p>\u6ce8\uff1a\u4f7f\u7528CLI\u5b89\u88c5\uff0c\u662f\u4e00\u4e2a\u5e72\u51c0\u7684\u811a\u624b\u67b6\uff1b\u4f7f\u7528\u514b\u9686\u4ee3\u7801\u4f1a\u5305\u542b\u6240\u6709\u793a\u4f8b\u3002</p></blockquote><h2 id="\u76ee\u5f55\u7ed3\u6784">\u76ee\u5f55\u7ed3\u6784<a onclick="window.location.hash = \'\u76ee\u5f55\u7ed3\u6784\'" class="anchor">#</a></h2><p>NG-ALAIN \u662f\u4e00\u4e2a\u6807\u51c6\u7684 Angular CLI \u6784\u5efa\u7684\u9879\u76ee\uff0c\u5e76\u63d0\u4f9b\u4e86\u6db5\u76d6\u4e2d\u540e\u53f0\u5f00\u53d1\u7684\u5404\u7c7b\u529f\u80fd\u548c\u5751\u4f4d\uff0c\u4e0b\u9762\u662f\u6574\u4e2a\u9879\u76ee\u7684\u76ee\u5f55\u7ed3\u6784\u3002</p><pre class="hljs language-null"><code>\u251c\u2500\u2500 _mock                                       # Mock \u6570\u636e\u89c4\u5219\n\u251c\u2500\u2500 src\n\u2502\xa0\xa0 \u251c\u2500\u2500 app\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 core                                # \u6838\u5fc3\u6a21\u5757\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 i18n\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 net\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 default.interceptor.ts      # \u9ed8\u8ba4HTTP\u62e6\u622a\u5668\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 services\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 startup.service.ts          # \u521d\u59cb\u5316\u9879\u76ee\u914d\u7f6e\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 core.module.ts                  # \u6838\u5fc3\u6a21\u5757\u6587\u4ef6\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 layout                              # \u901a\u7528\u5e03\u5c40\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 routes\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 **                              # \u4e1a\u52a1\u76ee\u5f55\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 routes.module.ts                # \u4e1a\u52a1\u8def\u7531\u6a21\u5757\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 routes-routing.module.ts        # \u4e1a\u52a1\u8def\u7531\u6ce8\u518c\u53e3\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 shared                              # \u5171\u4eab\u6a21\u5757\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 shared.module.ts                # \u5171\u4eab\u6a21\u5757\u6587\u4ef6\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 app.component.ts                    # \u6839\u7ec4\u4ef6\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 app.module.ts                       # \u6839\u6a21\u5757\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 delon.module.ts                     # @delon\u6a21\u5757\u5bfc\u5165\n\u2502\xa0\xa0 \u251c\u2500\u2500 assets                                  # \u672c\u5730\u9759\u6001\u8d44\u6e90\n\u2502\xa0\xa0 \u251c\u2500\u2500 environments                            # \u73af\u5883\u53d8\u91cf\u914d\u7f6e\n\u2502\xa0\xa0 \u251c\u2500\u2500 styles                                  # \u6837\u5f0f\u76ee\u5f55\n\u2514\u2500\u2500 \u2514\u2500\u2500 style.less                              # \u6837\u5f0f\u5f15\u5bfc\u5165\u53e3</code></pre><h2 id="\u672c\u5730\u5f00\u53d1">\u672c\u5730\u5f00\u53d1<a onclick="window.location.hash = \'\u672c\u5730\u5f00\u53d1\'" class="anchor">#</a></h2><pre class="hljs language-bash"><code>npm start</code></pre><p>\u542f\u52a8\u5b8c\u6210\u540e\u4f1a\u6253\u5f00\u6d4f\u89c8\u5668\u8bbf\u95ee <a target="_blank" href="//localhost:4200" data-url="//localhost:4200">//localhost:4200</a>\uff0c\u82e5\u4f60\u770b\u5230\u5982\u4e0b\u9875\u9762\u5219\u4ee3\u8868\u6210\u529f\u4e86\u3002</p><p><img width=700 src="./assets/screenshot/desktop.png" /></p><p>\u5982\u679c\u60a8\u4f7f\u7528\u65b9\u6cd5\u4e00\u5b89\u88c5\uff0c\u5219\u53f3\u8fb9\u53ea\u6709\u90e8\u5206\u83dc\u5355\u3002</p><h2 id="\u5982\u4f55\u8d21\u732e">\u5982\u4f55\u8d21\u732e<a onclick="window.location.hash = \'\u5982\u4f55\u8d21\u732e\'" class="anchor">#</a></h2><p>\u5728\u4efb\u4f55\u5f62\u5f0f\u7684\u53c2\u4e0e\u524d\uff0c\u8bf7\u5148\u9605\u8bfb <a href="/docs/contributing" data-url="/docs/contributing">\u8d21\u732e\u8005\u6587\u6863</a>\u3002\u5982\u679c\u4f60\u5e0c\u671b\u53c2\u4e0e\u8d21\u732e\uff0c\u6b22\u8fce <a target="_blank" href="https://github.com/ng-alain/ng-alain/pulls" data-url="https://github.com/ng-alain/ng-alain/pulls">Pull Request</a>\uff0c\u6216\u7ed9\u6211\u4eec <a target="_blank" href="https://github.com/ng-alain/ng-alain/issues" data-url="https://github.com/ng-alain/ng-alain/issues">\u62a5\u544a Bug</a>\u3002</p><blockquote><p>\u5f3a\u70c8\u63a8\u8350\u9605\u8bfb <a target="_blank" href="https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way" data-url="https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way">\u300a\u63d0\u95ee\u7684\u667a\u6167\u300b</a>(\u672c\u6307\u5357\u4e0d\u63d0\u4f9b\u6b64\u9879\u76ee\u7684\u5b9e\u9645\u652f\u6301\u670d\u52a1\uff01)\u3001<a target="_blank" href="https://github.com/seajs/seajs/issues/545" data-url="https://github.com/seajs/seajs/issues/545">\u300a\u5982\u4f55\u5411\u5f00\u6e90\u793e\u533a\u63d0\u95ee\u9898\u300b</a> \u548c <a target="_blank" href="http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html" data-url="http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html">\u300a\u5982\u4f55\u6709\u6548\u5730\u62a5\u544a Bug\u300b</a>\u3001<a target="_blank" href="https://zhuanlan.zhihu.com/p/25795393" data-url="https://zhuanlan.zhihu.com/p/25795393">\u300a\u5982\u4f55\u5411\u5f00\u6e90\u9879\u76ee\u63d0\u4ea4\u65e0\u6cd5\u89e3\u7b54\u7684\u95ee\u9898\u300b</a>\uff0c\u66f4\u597d\u7684\u95ee\u9898\u66f4\u5bb9\u6613\u83b7\u5f97\u5e2e\u52a9\u3002</p></blockquote><h2 id="\u793e\u533a\u4e92\u52a9">\u793e\u533a\u4e92\u52a9<a onclick="window.location.hash = \'\u793e\u533a\u4e92\u52a9\'" class="anchor">#</a></h2><p>\u5982\u679c\u60a8\u5728\u4f7f\u7528\u7684\u8fc7\u7a0b\u4e2d\u78b0\u5230\u95ee\u9898\uff0c\u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u51e0\u4e2a\u9014\u5f84\u5bfb\u6c42\u5e2e\u52a9\uff0c\u540c\u65f6\u6211\u4eec\u4e5f\u9f13\u52b1\u8d44\u6df1\u7528\u6237\u901a\u8fc7\u4e0b\u9762\u7684\u9014\u5f84\u7ed9\u65b0\u4eba\u63d0\u4f9b\u5e2e\u52a9\u3002</p><p>\u901a\u8fc7 Stack Overflow \u6216\u8005 Segment Fault \u63d0\u95ee\u65f6\uff0c\u5efa\u8bae\u52a0\u4e0a <code>ng-alain</code> \u6807\u7b7e\u3002</p><ol><li><p>QQ \u7fa4</p><ul><li><p><a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=f5102185e4ecf8b641a176596aca3037a45d3452329f69cf3bc496877cd087ff" data-url="//shang.qq.com/wpa/qunwpa?idkey=f5102185e4ecf8b641a176596aca3037a45d3452329f69cf3bc496877cd087ff">316911865</a> \u6ee1</p></li><li><p><a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=06823e225199af79b0c5ba3bbc89756ee57c2b0cc2115e3f44cc19230db2b0c3" data-url="//shang.qq.com/wpa/qunwpa?idkey=06823e225199af79b0c5ba3bbc89756ee57c2b0cc2115e3f44cc19230db2b0c3">428749721</a></p></li></ul></li><li><p><a target="_blank" href="https://stackoverflow.com/questions/tagged/ng-alain" data-url="https://stackoverflow.com/questions/tagged/ng-alain"><img width=140 src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" alt="Stack Overflow" /></a>\uff08English\uff09</p></li><li><p><a target="_blank" href="https://segmentfault.com/t/ng-alain" data-url="https://segmentfault.com/t/ng-alain"><img width=140 src="https://gw.alipayobjects.com/zos/rmsportal/hfYFfCvHTQTUKntlJbMF.svg" alt="Segment Fault" /></a>\uff08\u4e2d\u6587\uff09</p></li><li><p>\u52a0\u5165 NG-ALAIN \u81ea\u52a9\u670d\u52a1\u7fa4\uff08\u4e2d\u6587\uff09</p></li></ol><p><img src="./assets/qq-group.png" /></p><h2 id="\u6350\u52a9">\u6350\u52a9<a onclick="window.location.hash = \'\u6350\u52a9\'" class="anchor">#</a></h2><p>\u5982\u679c\u4f60\u89c9\u5f97 NG-ALAIN \u4e0d\u9519\uff0c\u53ef\u4ee5\u8003\u8651\u81ea\u613f\u4e3a\u672c\u7ad9\u6253\u8d4f\u6216\u6350\u52a9\u3002</p><p><img src="./assets/donate.png" /></p></article></section>',meta:{order:10,title:"\u5f00\u59cb\u4f7f\u7528",type:"Basic"},toc:[{id:"\u5199\u5728\u524d\u9762",title:"\u5199\u5728\u524d\u9762",h:2},{id:"\u524d\u5e8f\u51c6\u5907",title:"\u524d\u5e8f\u51c6\u5907",h:2},{id:"\u5b89\u88c5",title:"\u5b89\u88c5",h:2},{id:"CLI\uff08\u63a8\u8350\uff09",title:"CLI\uff08\u63a8\u8350\uff09",h:3},{id:"\u514b\u9686\u4ee3\u7801",title:"\u514b\u9686\u4ee3\u7801",h:3},{id:"\u76ee\u5f55\u7ed3\u6784",title:"\u76ee\u5f55\u7ed3\u6784",h:2},{id:"\u672c\u5730\u5f00\u53d1",title:"\u672c\u5730\u5f00\u53d1",h:2},{id:"\u5982\u4f55\u8d21\u732e",title:"\u5982\u4f55\u8d21\u732e",h:2},{id:"\u793e\u533a\u4e92\u52a9",title:"\u793e\u533a\u4e92\u52a9",h:2},{id:"\u6350\u52a9",title:"\u6350\u52a9",h:2}]}},demo:!1},this.codes=[]},m=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"zh-CN":"docs/graph.md"},content:{"zh-CN":{content:'<section class="markdown"><article></article></section>',meta:{order:20,title:{"en-US":"Charts","zh-CN":"\u56fe\u8868"},type:"Advance",url:"/chart/getting-started"},toc:[]}},demo:!1},this.codes=[]},b=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/how-to-start.en-US.md","zh-CN":"docs/how-to-start.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><h2 id="First,-pre-order-preparation">First, pre-order preparation<a onclick="window.location.hash = \'First,-pre-order-preparation\'" class="anchor">#</a></h2><p>As you begin your business development on NG-ALAIN, i recommend that you first review the following documents, which is very helpful for everyone on the team.</p><ul><li><p><a target="_blank" href="//ant.design/docs/spec/introduce" data-url="//ant.design/docs/spec/introduce">Ant Design Guide article</a></p></li><li><p><a target="_blank" href="//ng.ant.design/" data-url="//ng.ant.design/">Ant Design for Angular</a></p></li><li><p><a target="_blank" href="//www.yuque.com/antv/g2-docs-en?language=en-us" data-url="//www.yuque.com/antv/g2-docs-en?language=en-us">Antv chart - G2</a></p></li><li><p><a target="_blank" href="https://ng.ant.design/docs/recommendation/en" data-url="https://ng.ant.design/docs/recommendation/en">NG-ZORRO Community recommendation</a></p></li></ul><p>NG-ALAIN\'s base component library comes from NG-ZORRO, so you can get a very detailed <a target="_blank" href="//ng.ant.design/" data-url="//ng.ant.design/">API</a> documentation for its use on the official website. For ng components provided by -alain are obtained through the <a href="/components" data-url="/components">component page</a>.</p><h2 id="Second,-the-startup-process">Second, the startup process<a onclick="window.location.hash = \'Second,-the-startup-process\'" class="anchor">#</a></h2><p>NG-ALAIN is a scaffold that can be used directly in production environments. The prerequisite for understanding these details is that you have a certain knowledge of Angular. The following documents may be helpful to you before you start:</p><ul><li><p>NG-ALAIN Getting started video (<a target="_blank" href="https://www.youtube.com/watch?v=lPnNKPuULVw&list=PLhWkvn5F8uyJRimbVZ944unzRrHeujngw" data-url="https://www.youtube.com/watch?v=lPnNKPuULVw&list=PLhWkvn5F8uyJRimbVZ944unzRrHeujngw">YouTube</a>\u3001<a target="_blank" href="http://v.qq.com/vplus/2c1dd5c6db4feeeea25e9827b38c171e/foldervideos/870001501oy1ijf" data-url="http://v.qq.com/vplus/2c1dd5c6db4feeeea25e9827b38c171e/foldervideos/870001501oy1ijf">Tencent video</a>\u3001<a target="_blank" href="https://space.bilibili.com/12207877/#/channel/detail?cid=50229" data-url="https://space.bilibili.com/12207877/#/channel/detail?cid=50229">Station B</a>\uff09</p></li><li><p><a target="_blank" href="https://zhuanlan.zhihu.com/ng-alain" data-url="https://zhuanlan.zhihu.com/ng-alain">Know the column</a></p></li></ul><p>When running an app via <code>ng serve</code>, a complete Angular startup process would look like this:</p><ol><li><p>Trigger <code>APP_INITIALIZER</code> (the scaffolding implementation is implemented in <code>StartupService.load</code>) to get the application information.</p></li><li><p>Trigger service routing (src/app/routes/routes-routing.module.ts` for scaffolding)</p></li><li><p>Rendering components</p></li></ol><h3 id="1)-APP_INITIALIZER">1) APP_INITIALIZER<a onclick="window.location.hash = \'1)-APP_INITIALIZER\'" class="anchor">#</a></h3><p>From a mid and back-office perspective, NG-ALAIN always believes that a network request is required to get some application information (eg menu data, user data, etc.) before Angular starts.<a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts">startup.service.ts</a>\uff1bIt returns a <code>Promise</code> object, which always needs to be called: <code>resolve()</code> to ensure that Angular starts normally.</p><blockquote><p>Network requests may encounter a 403 error because the scaffolding uses the user authentication module by default and always assumes that all requests must be a valid user authorization. For more documentation see:</p><ul><li><p><a href="/docs/server" data-url="/docs/server">Interact with server</a></p></li><li><p><a href="/auth" data-url="/auth">Auth User Authentication</a></p></li></ul></blockquote><p>After obtaining the application information, you need to assign some values \u200b\u200bto the built-in services of the scaffolding, including:</p><p><strong>Application Information</strong></p><p>Including: application name, description, year, information can be directly injected into the <code>SettingsService</code> (<a href="/theme/settings" data-url="/theme/settings">API</a>) and directly in the HTML template.</p><pre class="hljs language-ts"><code>this.settingService.setApp(res.app);</code></pre><p><strong>User Info</strong></p><p>Including: name, avatar, email address, etc., information can be directly injected into the <code>SettingsService</code> (<a href="/theme/settings" data-url="/theme/settings">API</a>) and directly in the HTML template.</p><pre class="hljs language-ts"><code>this.settingService.setUser(res.user);</code></pre><p><strong>Layout information</strong></p><p>Including: name, avatar, email, address, etc., information can be directly injected into the <code>SettingsService</code> (<a href="/theme/settings" data-url="/theme/settings">API</a>) and directly in the HTML template.</p><pre class="hljs language-ts"><code>// Whether to fix the top menu\nthis.settingService.setLayout(`fixed`, false);\n// Whether to collapse the right menu\nthis.settingService.setLayout(`collapsed`, false);</code></pre><p><strong>Menu data</strong></p><p>NG-ALAIN takes menu from the remote and can also inject <code>MenuService</code> (<a href="/theme/menu" data-url="/theme/menu">API</a>) to change the menu data. Of course, it is more reasonable to perform menu assignment before Angular starts.</p><p>Menu data <strong>Make sure</strong> ensure <a target="_blank" href="https://github.com/ng-alain/delon/blob/master/packages/theme/src/services/menu/interface.ts" data-url="https://github.com/ng-alain/delon/blob/master/packages/theme/src/services/menu/interface.ts">Menu</a> format, menu data throughout Applications, for example: main menu component <a href="/components/sidebar-nav" data-url="/components/sidebar-nav">sidebar-nav</a>, page header auto navigation <a href="/components/page-header" data-url="/components/page-header">page-header</a>, page title text <a href="/theme/title" data-url="/theme/title">TitleService</a> Wait.</p><pre class="hljs language-ts"><code>this.menuService.add(res.menu);</code></pre><p><strong>Page title</strong></p><p>If the page title always wants to add the application name as a suffix, you can re-adjust the <code>suffix</code> attribute value by injecting <code>TitleService</code>(<a href="/theme/title" data-url="/theme/title">API</a>).</p><pre class="hljs language-ts"><code>// Set the suffix of the page title\nthis.titleService.suffix = res.app.name;</code></pre><p><strong>ACL</strong></p><pre class="hljs language-ts"><code>this.aclService.setFull(true);</code></pre><p>It is recommended to load the ACL access control permission data before starting. For more details, please refer to <a href="/acl" data-url="/acl">Access Control List</a>.</p><p><strong>Globalization</strong></p><p>It is recommended to load the internationalization package first before starting, which will ensure that the page is rendered as the target language after the project is started. See <a href="/docs/i18n" data-url="/docs/i18n">Internationalization</a> for more details.</p><h3 id="2)-Business-routing">2) Business routing<a onclick="window.location.hash = \'2)-Business-routing\'" class="anchor">#</a></h3><p>Scaffolding top-level routing begins with <a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/routes/routes-routing.module.ts" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/routes/routes-routing.module.ts">routes-routing.module.ts</a> Its structure is as follows:</p><pre class="hljs language-ts"><code>const routes: Routes = [\n  {\n    path: \'\',\n    component: LayoutDefaultComponent,\n    children: [\n      { path: \'\', redirectTo: \'dashboard\', pathMatch: \'full\' },\n      { path: \'dashboard\', component: DashboardComponent, data: { title: \'Dashboard\' } },\n      // business submodule\n      // { path: \'trade\', loadChildren: \'./trade/trade.module#TradeModule\' }\n    ]\n  },\n  // Full screen layout\n  {\n    path: \'fullscreen\',\n    component: LayoutFullScreenComponent,\n    children: [\n    ]\n  },\n  // passport\n  {\n    path: \'passport\',\n    component: LayoutPassportComponent,\n    children: [\n      { path: \'login\', component: UserLoginComponent },\n      { path: \'register\', component: UserRegisterComponent },\n      { path: \'register-result\', component: UserRegisterResultComponent }\n    ]\n  },\n  // Single page does not wrap Layout\n  { path: \'callback/:type\', component: CallbackComponent },\n  { path: \'403\', component: Exception403Component },\n  { path: \'404\', component: Exception404Component },\n  { path: \'500\', component: Exception500Component },\n  { path: \'**\', redirectTo: \'dashboard\' }\n];</code></pre><p>Above we used the <code>LayoutDefaultComponent</code> base layout in the business module. User authorization uses <code>LayoutPassportComponent</code> user authorization layout and the full screen layout.</p><p>It is recommended that all submodules be loaded using a lazy module, such as the <code>TradeModule</code> order module, which organizes the code structure more efficiently.</p><h3 id="Under-what-circumstances-do-you-not-use-lazy-loading?">Under what circumstances do you not use lazy loading?<a onclick="window.location.hash = \'Under-what-circumstances-do-you-not-use-lazy-loading?\'" class="anchor">#</a></h3><p>Angular startup from the top-level component. When a lazy module is encountered, it will initiate a script request. At this time, the dashboard or login page will be blank due to network requests, which is not good for the experience.</p><h3 id="Routing-permission-control">Routing permission control<a onclick="window.location.hash = \'Routing-permission-control\'" class="anchor">#</a></h3><p>The routing URL may be affected by the browser\'s own historical memory, so that users may access the unprivileged route. If you want a better experience, you need to configure the <code>canActivate</code> option on the route. When the user has no permission, it will utomatically jump to the relevant page. see the <a href="/acl/guard" data-url="/acl/guard">ACL Routing Guard</a> section for details.</p></article></section>',meta:{order:1,title:{"en-US":"How to start","zh-CN":"\u5982\u4f55\u5f00\u59cb"},type:"Dev"},toc:[{id:"First,-pre-order-preparation",title:"First, pre-order preparation",h:2},{id:"Second,-the-startup-process",title:"Second, the startup process",h:2},{id:"1)-APP_INITIALIZER",title:"1) APP_INITIALIZER",h:3},{id:"2)-Business-routing",title:"2) Business routing",h:3},{id:"Under-what-circumstances-do-you-not-use-lazy-loading?",title:"Under what circumstances do you not use lazy loading?",h:3},{id:"Routing-permission-control",title:"Routing permission control",h:3}]},"zh-CN":{content:'<section class="markdown"><article><h2 id="\u4e00\u3001\u524d\u5e8f\u51c6\u5907">\u4e00\u3001\u524d\u5e8f\u51c6\u5907<a onclick="window.location.hash = \'\u4e00\u3001\u524d\u5e8f\u51c6\u5907\'" class="anchor">#</a></h2><p>\u5f53\u4f60\u5f00\u59cb\u7740\u624b\u5728 NG-ALAIN \u57fa\u7840\u4e0a\u8fdb\u884c\u4e1a\u52a1\u5f00\u53d1\u65f6\uff0c\u6211\u5efa\u8bae\u4f60\u5148\u4e86\u89e3\u4e00\u4e0b\u4ee5\u4e0b\u6587\u6863\uff0c\u8fd9\u5bf9\u4e8e\u56e2\u961f\u4e2d\u6bcf\u4e2a\u6210\u5458\u90fd\u975e\u5e38\u6709\u5e2e\u52a9\u3002</p><ul><li><p><a target="_blank" href="//ant.design/docs/spec/introduce-cn" data-url="//ant.design/docs/spec/introduce-cn">Ant Design \u6307\u5f15\u6587\u7ae0</a></p></li><li><p><a target="_blank" href="//ng.ant.design/" data-url="//ng.ant.design/">Ant Design for Angular</a></p></li><li><p><a target="_blank" href="//antv.alipay.com/zh-cn/index.html" data-url="//antv.alipay.com/zh-cn/index.html">Antv \u56fe\u8868</a></p></li><li><p><a target="_blank" href="https://ng.ant.design/docs/recommendation/zh#\u535a\u5ba2\u53ca\u7f51\u7ad9" data-url="https://ng.ant.design/docs/recommendation/zh#\u535a\u5ba2\u53ca\u7f51\u7ad9">NG-ZORRO \u793e\u533a\u63a8\u8350</a></p></li></ul><p>NG-ALAIN \u7684\u57fa\u7840\u7ec4\u4ef6\u5e93\u6765\u81ea NG-ZORRO\uff0c\u56e0\u6b64\u5bf9\u4e8e\u8fd9\u7c7b\u7ec4\u4ef6\u7684\u4f7f\u7528\u65b9\u5f0f\u4f60\u53ef\u4ee5\u901a\u8fc7\u5176\u5b98\u7f51\u5f97\u5230\u5f88\u8be6\u7ec6\u7684 <a target="_blank" href="//ng.ant.design/" data-url="//ng.ant.design/">API</a> \u6587\u6863\u8bf4\u660e\uff0c\u800c\u5bf9\u4e8e NG-ALAIN \u63d0\u4f9b\u7684\u7ec4\u4ef6\u5219\u901a\u8fc7<a href="/components" data-url="/components">\u7ec4\u4ef6\u9875</a>\u83b7\u53d6\u3002</p><h2 id="\u4e8c\u3001\u542f\u52a8\u6d41\u7a0b">\u4e8c\u3001\u542f\u52a8\u6d41\u7a0b<a onclick="window.location.hash = \'\u4e8c\u3001\u542f\u52a8\u6d41\u7a0b\'" class="anchor">#</a></h2><p>NG-ALAIN \u662f\u4e00\u4e2a\u53ef\u76f4\u63a5\u7528\u4e8e\u751f\u4ea7\u73af\u5883\u811a\u624b\u67b6\uff0c\u8981\u4e86\u89e3\u8fd9\u4e9b\u7ec6\u8282\u7684\u524d\u63d0\u6761\u4ef6\u662f\u4f60\u5bf9 Angular \u6709\u4e00\u5b9a\u7684\u77e5\u8bc6\u50a8\u5907\uff0c\u5728\u5f00\u59cb\u4e4b\u524d\u4e0b\u5217\u6587\u6863\u53ef\u80fd\u5bf9\u4f60\u6709\u5e2e\u52a9\uff1a</p><ul><li><p><strong>NG-ALAIN \u5165\u95e8\u89c6\u9891\uff08<a target="_blank" href="https://www.youtube.com/watch?v=lPnNKPuULVw&list=PLhWkvn5F8uyJRimbVZ944unzRrHeujngw" data-url="https://www.youtube.com/watch?v=lPnNKPuULVw&list=PLhWkvn5F8uyJRimbVZ944unzRrHeujngw">YouTube</a>\u3001<a target="_blank" href="http://v.qq.com/vplus/2c1dd5c6db4feeeea25e9827b38c171e/foldervideos/870001501oy1ijf" data-url="http://v.qq.com/vplus/2c1dd5c6db4feeeea25e9827b38c171e/foldervideos/870001501oy1ijf">\u817e\u8baf\u89c6\u9891</a>\u3001<a target="_blank" href="https://space.bilibili.com/12207877/#/channel/detail?cid=50229" data-url="https://space.bilibili.com/12207877/#/channel/detail?cid=50229">B\u7ad9</a>\uff09</strong></p></li><li><p><a target="_blank" href="https://zhuanlan.zhihu.com/ng-alain" data-url="https://zhuanlan.zhihu.com/ng-alain">\u77e5\u4e4e\u4e13\u680f</a></p></li></ul><p>\u5f53\u901a\u8fc7 <code>ng serve</code> \u8fd0\u884c\u5e94\u7528\u540e\uff0c\u4e00\u4e2a\u5b8c\u6574\u7684 Angular \u542f\u52a8\u6d41\u7a0b\u5927\u6982\u662f\u8fd9\u6837\uff1a</p><ol><li><p>\u89e6\u53d1 <code>APP_INITIALIZER</code>\uff08\u811a\u624b\u67b6\u5177\u4f53\u5b9e\u73b0\u5728 <code>StartupService.load</code>\uff09 \u83b7\u53d6\u5e94\u7528\u4fe1\u606f</p></li><li><p>\u89e6\u53d1\u4e1a\u52a1\u8def\u7531\uff08\u811a\u624b\u67b6\u7684 <code>src/app/routes/routes-routing.module.ts</code>\uff09</p></li><li><p>\u6e32\u67d3\u7ec4\u4ef6</p></li></ol><h3 id="1)-APP_INITIALIZER">1) APP_INITIALIZER<a onclick="window.location.hash = \'1)-APP_INITIALIZER\'" class="anchor">#</a></h3><p>\u4ee5\u4e2d\u540e\u53f0\u89d2\u5ea6\u51fa\u53d1\uff0cNG-ALAIN \u59cb\u7ec8\u8ba4\u4e3a\u5728 Angular \u542f\u52a8\u4e4b\u524d\u9700\u8981\u4e00\u6b21\u7f51\u7edc\u8bf7\u6c42\u6765\u83b7\u53d6\u4e00\u4e9b\u5e94\u7528\u4fe1\u606f\uff08\u4f8b\u5982\uff1a\u83dc\u5355\u6570\u636e\u3001\u7528\u6237\u6570\u636e\u7b49\uff09\uff0c\u5177\u4f53\u5b9e\u73b0\u7ec6\u8282<a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts">startup.service.ts</a>\uff1b\u5b83\u8fd4\u56de\u7684\u662f\u4e00\u4e2a <code>Promise</code> \u5bf9\u8c61\uff0c\u4e0d\u7ba1\u600e\u4e48\u6837\u59cb\u7ec8\u90fd\u9700\u8981\u8c03\u7528\uff1a<code>resolve()</code> \u624d\u80fd\u786e\u4fdd Angular \u6b63\u5e38\u542f\u52a8\u3002</p><blockquote><p>\u7f51\u7edc\u8bf7\u6c42\u53ef\u80fd\u4f1a\u9047\u5230 403 \u9519\u8bef\uff0c\u8fd9\u662f\u56e0\u4e3a\u811a\u624b\u67b6\u9ed8\u8ba4\u4f7f\u7528\u4e86\u7528\u6237\u8ba4\u8bc1\u6a21\u5757\uff0c\u5e76\u59cb\u7ec8\u8ba4\u4e3a\u6240\u6709\u8bf7\u6c42\u52a1\u5fc5\u662f\u4e00\u4e2a\u6709\u6548\u7528\u6237\u6388\u6743\uff0c\u66f4\u591a\u6587\u6863\u89c1\uff1a</p><ul><li><p><a href="/docs/server" data-url="/docs/server">\u548c\u670d\u52a1\u7aef\u8fdb\u884c\u4ea4\u4e92</a></p></li><li><p><a href="/auth" data-url="/auth">Auth \u7528\u6237\u8ba4\u8bc1</a></p></li></ul></blockquote><p>\u5f53\u83b7\u53d6\u5e94\u7528\u4fe1\u606f\u540e\uff0c\u9700\u8981\u5bf9\u811a\u624b\u67b6\u5185\u7f6e\u7684\u4e00\u4e9b\u670d\u52a1\u505a\u8d4b\u503c\uff0c\u5305\u542b\uff1a</p><p><strong>\u5e94\u7528\u4fe1\u606f</strong></p><p>\u5305\u62ec\uff1a\u5e94\u7528\u540d\u79f0\u3001\u63cf\u8ff0\u3001\u5e74\u4efd\uff0c\u4fe1\u606f\u53ef\u4ee5\u76f4\u63a5\u6ce8\u5165 <code>SettingsService</code>\uff08<a href="/theme/settings" data-url="/theme/settings">API</a>\uff09\u540e\u76f4\u63a5\u5728HTML\u6a21\u677f\u4e2d\u8bbf\u95ee\u3002</p><pre class="hljs language-ts"><code>this.settingService.setApp(res.app);</code></pre><p><strong>\u7528\u6237\u4fe1\u606f</strong></p><p>\u5305\u62ec\uff1a\u59d3\u540d\u3001\u5934\u50cf\u3001\u90ae\u7bb1\u5730\u5740\u7b49\uff0c\u4fe1\u606f\u53ef\u4ee5\u76f4\u63a5\u6ce8\u5165 <code>SettingsService</code>\uff08<a href="/theme/settings" data-url="/theme/settings">API</a>\uff09\u540e\u76f4\u63a5\u5728HTML\u6a21\u677f\u4e2d\u8bbf\u95ee\u3002</p><pre class="hljs language-ts"><code>this.settingService.setUser(res.user);</code></pre><p><strong>\u5e03\u5c40\u4fe1\u606f</strong></p><p>\u5305\u62ec\uff1a\u59d3\u540d\u3001\u5934\u50cf\u3001\u90ae\u7bb1\u5730\u5740\u7b49\uff0c\u4fe1\u606f\u53ef\u4ee5\u76f4\u63a5\u6ce8\u5165 <code>SettingsService</code>\uff08<a href="/theme/settings" data-url="/theme/settings">API</a>\uff09\u540e\u76f4\u63a5\u5728HTML\u6a21\u677f\u4e2d\u8bbf\u95ee\u3002</p><pre class="hljs language-ts"><code>// \u662f\u5426\u56fa\u5b9a\u9876\u90e8\u83dc\u5355\nthis.settingService.setLayout(`fixed`, false);\n// \u662f\u5426\u6298\u53e0\u53f3\u8fb9\u83dc\u5355\nthis.settingService.setLayout(`collapsed`, false);</code></pre><p><strong>\u83dc\u5355\u6570\u636e</strong></p><p>NG-ALAIN \u8ba4\u4e3a\u83dc\u5355\u6570\u636e\u4e5f\u662f\u6765\u81ea\u8fdc\u7a0b\uff0c\u4e5f\u53ef\u4ee5\u4efb\u610f\u4f4d\u7f6e\u6ce8\u5165 <code>MenuService</code>\uff08<a href="/theme/menu" data-url="/theme/menu">API</a>\uff09\u6765\u6539\u53d8\u83dc\u5355\u6570\u636e\uff0c\u5f53\u7136\u5728 Angular \u542f\u52a8\u4e4b\u524d\u6267\u884c\u83dc\u5355\u8d4b\u503c\u66f4\u4e3a\u5408\u7406\u3002</p><p>\u83dc\u5355\u6570\u636e<strong>\u52a1\u5fc5</strong>\u786e\u4fdd <a target="_blank" href="https://github.com/ng-alain/delon/blob/master/packages/theme/src/services/menu/interface.ts" data-url="https://github.com/ng-alain/delon/blob/master/packages/theme/src/services/menu/interface.ts">Menu</a> \u683c\u5f0f\uff0c\u83dc\u5355\u6570\u636e\u8d2f\u7a7f\u6574\u4e2a\u5e94\u7528\uff0c\u4f8b\u5982\uff1a\u4e3b\u83dc\u5355\u7ec4\u4ef6 <a href="/components/sidebar-nav" data-url="/components/sidebar-nav">sidebar-nav</a>\uff0c\u9875\u5934\u81ea\u52a8\u5bfc\u822a <a href="/components/page-header" data-url="/components/page-header">page-header</a>\uff0c\u9875\u6807\u9898\u6587\u672c <a href="/theme/title" data-url="/theme/title">TitleService</a> \u7b49\u3002</p><pre class="hljs language-ts"><code>this.menuService.add(res.menu);</code></pre><p><strong>\u9875\u9762\u6807\u9898</strong></p><p>\u82e5\u9875\u9762\u6807\u9898\u603b\u5e0c\u671b\u52a0\u4e0a\u5e94\u7528\u540d\u79f0\u4e3a\u540e\u7f00\u65f6\uff0c\u53ef\u4ee5\u6ce8\u5165 <code>TitleService</code>\uff08<a href="/theme/title" data-url="/theme/title">API</a>\uff09\u91cd\u65b0\u8c03\u6574 <code>suffix</code> \u5c5e\u6027\u503c\u3002</p><pre class="hljs language-ts"><code>// \u8bbe\u7f6e\u9875\u9762\u6807\u9898\u7684\u540e\u7f00\nthis.titleService.suffix = res.app.name;</code></pre><p><strong>ACL</strong></p><pre class="hljs language-ts"><code>this.aclService.setFull(true);</code></pre><p>\u5efa\u8bae\u5728\u542f\u52a8\u524d\u52a0\u8f7dACL\u8bbf\u95ee\u63a7\u5236\u6743\u9650\u6570\u636e\uff0c\u6709\u5173\u66f4\u591a\u7ec6\u8282\u53ef\u53c2\u8003 <a href="/acl" data-url="/acl">\u8bbf\u95ee\u63a7\u5236\u5217\u8868</a>\u3002</p><p><strong>\u56fd\u9645\u5316</strong></p><p>\u5efa\u8bae\u5728\u542f\u52a8\u524d\u4f18\u5148\u52a0\u8f7d\u56fd\u9645\u5316\u6570\u636e\u5305\uff0c\u8fd9\u6837\u53ef\u786e\u4fdd\u9879\u76ee\u542f\u52a8\u540e\u9875\u9762\u6e32\u67d3\u4e3a\u76ee\u6807\u8bed\u8a00\u3002\u66f4\u591a\u7ec6\u8282\u53c2\u8003<a href="/docs/i18n" data-url="/docs/i18n">\u56fd\u9645\u5316</a>\u3002</p><h3 id="2)-\u4e1a\u52a1\u8def\u7531">2) \u4e1a\u52a1\u8def\u7531<a onclick="window.location.hash = \'2)-\u4e1a\u52a1\u8def\u7531\'" class="anchor">#</a></h3><p>\u811a\u624b\u67b6\u9876\u5c42\u8def\u7531\u4ece <a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/routes/routes-routing.module.ts" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/routes/routes-routing.module.ts">routes-routing.module.ts</a> \u5f00\u59cb\uff0c\u5176\u7ed3\u6784\u5982\u4e0b\uff1a</p><pre class="hljs language-ts"><code>const routes: Routes = [\n  {\n    path: \'\',\n    component: LayoutDefaultComponent,\n    children: [\n      { path: \'\', redirectTo: \'dashboard\', pathMatch: \'full\' },\n      { path: \'dashboard\', component: DashboardComponent, data: { title: \'\u4eea\u8868\u76d8\' } },\n      // \u4e1a\u52a1\u5b50\u6a21\u5757\n      // { path: \'trade\', loadChildren: \'./trade/trade.module#TradeModule\' }\n    ]\n  },\n  // \u5168\u5c4f\u5e03\u5c40\n  {\n    path: \'fullscreen\',\n    component: LayoutFullScreenComponent,\n    children: [\n    ]\n  },\n  // passport\n  {\n    path: \'passport\',\n    component: LayoutPassportComponent,\n    children: [\n      { path: \'login\', component: UserLoginComponent },\n      { path: \'register\', component: UserRegisterComponent },\n      { path: \'register-result\', component: UserRegisterResultComponent }\n    ]\n  },\n  // \u5355\u9875\u4e0d\u5305\u88f9Layout\n  { path: \'callback/:type\', component: CallbackComponent },\n  { path: \'403\', component: Exception403Component },\n  { path: \'404\', component: Exception404Component },\n  { path: \'500\', component: Exception500Component },\n  { path: \'**\', redirectTo: \'dashboard\' }\n];</code></pre><p>\u4e0a\u8ff0\u6211\u4eec\u5728\u4e1a\u52a1\u6a21\u5757\u4e2d\u4f7f\u7528\u4e86 <code>LayoutDefaultComponent</code> \u57fa\u7840\u5e03\u5c40\u3001\u7528\u6237\u6388\u6743\u4f7f\u7528\u4e86 <code>LayoutPassportComponent</code> \u7528\u6237\u6388\u6743\u5e03\u5c40\u4ee5\u53ca\u5168\u5c4f\u5e03\u5c40\u3002</p><p>\u5efa\u8bae\u6240\u6709\u5b50\u6a21\u5757\u90fd\u4f7f\u7528\u61d2\u6a21\u5757\u52a0\u8f7d\uff0c\u4f8b\u5982 <code>TradeModule</code> \u8ba2\u5355\u6a21\u5757\uff0c\u8fd9\u79cd\u65b9\u5f0f\u53ef\u4ee5\u66f4\u6709\u6548\u5730\u7ec4\u7ec7\u4ee3\u7801\u7ed3\u6784\u3002</p><h3 id="\u4ec0\u4e48\u60c5\u51b5\u4e0b\u4e0d\u4f7f\u7528\u61d2\u52a0\u8f7d\uff1f">\u4ec0\u4e48\u60c5\u51b5\u4e0b\u4e0d\u4f7f\u7528\u61d2\u52a0\u8f7d\uff1f<a onclick="window.location.hash = \'\u4ec0\u4e48\u60c5\u51b5\u4e0b\u4e0d\u4f7f\u7528\u61d2\u52a0\u8f7d\uff1f\'" class="anchor">#</a></h3><p>Angular \u542f\u52a8\u662f\u4ece\u9876\u5c42\u7ec4\u4ef6\u5f00\u59cb\u5411\u4e0b\u6e32\u67d3\uff0c\u5f53\u9047\u5230\u61d2\u6a21\u5757\u65f6\u4f1a\u5148\u53d1\u8d77\u811a\u672c\u8bf7\u6c42\uff0c\u6b64\u65f6\u4f1a\u56e0\u4e3a\u7f51\u7edc\u8bf7\u6c42\u5bfc\u81f4\u4eea\u8868\u76d8\u6216\u767b\u5f55\u9875\u77ed\u6682\u7684\u7a7a\u767d\uff0c\u8fd9\u5bf9\u4f53\u9a8c\u5e76\u4e0d\u597d\u3002</p><h3 id="\u8def\u7531\u6743\u9650\u63a7\u5236">\u8def\u7531\u6743\u9650\u63a7\u5236<a onclick="window.location.hash = \'\u8def\u7531\u6743\u9650\u63a7\u5236\'" class="anchor">#</a></h3><p>\u8def\u7531URL\u53ef\u80fd\u4f1a\u53d7\u6d4f\u89c8\u5668\u81ea\u8eab\u5386\u53f2\u8bb0\u5fc6\u7684\u539f\u56e0\uff0c\u5bfc\u81f4\u7528\u6237\u53ef\u80fd\u4f1a\u8bbf\u95ee\u81f3\u65e0\u6743\u9650\u8def\u7531\u65f6\uff0c\u82e5\u4f60\u5e0c\u671b\u6709\u66f4\u597d\u7684\u4f53\u9a8c\uff0c\u5219\u9700\u8981\u5728\u8def\u7531\u4e0a\u914d\u7f6e <code>canActivate</code> \u9009\u9879\uff0c\u5f53\u7528\u6237\u65e0\u6743\u9650\u65f6\u4f1a\u81ea\u52a8\u8df3\u8f6c\u81f3\u76f8\u5173\u9875\uff1b\u6709\u5173\u7ec6\u8282\u89c1<a href="/acl/guard" data-url="/acl/guard">ACL\u8def\u7531\u5b88\u536b</a>\u7ae0\u8282\u3002</p></article></section>',meta:{order:1,title:{"en-US":"How to start","zh-CN":"\u5982\u4f55\u5f00\u59cb"},type:"Dev"},toc:[{id:"\u4e00\u3001\u524d\u5e8f\u51c6\u5907",title:"\u4e00\u3001\u524d\u5e8f\u51c6\u5907",h:2},{id:"\u4e8c\u3001\u542f\u52a8\u6d41\u7a0b",title:"\u4e8c\u3001\u542f\u52a8\u6d41\u7a0b",h:2},{id:"1)-APP_INITIALIZER",title:"1) APP_INITIALIZER",h:3},{id:"2)-\u4e1a\u52a1\u8def\u7531",title:"2) \u4e1a\u52a1\u8def\u7531",h:3},{id:"\u4ec0\u4e48\u60c5\u51b5\u4e0b\u4e0d\u4f7f\u7528\u61d2\u52a0\u8f7d\uff1f",title:"\u4ec0\u4e48\u60c5\u51b5\u4e0b\u4e0d\u4f7f\u7528\u61d2\u52a0\u8f7d\uff1f",h:3},{id:"\u8def\u7531\u6743\u9650\u63a7\u5236",title:"\u8def\u7531\u6743\u9650\u63a7\u5236",h:3}]}},demo:!1},this.codes=[]},f=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/i18n.en-US.md","zh-CN":"docs/i18n.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>Angular internationalization often has two different internationalization schemes, Angular built-in and based on @ngx-translate/core (please refer to <a target="_blank" href="https://github.com/ngx-translate/core" data-url="https://github.com/ngx-translate/core">official website</a> for more implementation details).</p><h2 id="Two-options">Two options<a onclick="window.location.hash = \'Two-options\'" class="anchor">#</a></h2><h3 id="Angular-Built-in">Angular Built in<a onclick="window.location.hash = \'Angular-Built-in\'" class="anchor">#</a></h3><p>Angular <a target="_blank" href="https://angular.io/guide/i18n" data-url="https://angular.io/guide/i18n">Document</a>\uff08<a target="_blank" href="https://angular.cn/guide/i18n" data-url="https://angular.cn/guide/i18n">Chinese Version</a>\uff09Have a full description, <strong>Note</strong> Need to build and deploy a separate application version for each language.</p><h3 id="@ngx-translate/core">@ngx-translate/core<a onclick="window.location.hash = \'@ngx-translate/core\'" class="anchor">#</a></h3><p><a target="_blank" href="https://github.com/ngx-translate/core" data-url="https://github.com/ngx-translate/core">@ngx-translate/core</a> is a community version of Angular Internationalization, which is dynamic compared to Angular\'s built-in, no need to build and deploy separate versions for different languages. And in most cases it can be presented immediately.</p><h2 id="How-to-configure">How to configure<a onclick="window.location.hash = \'How-to-configure\'" class="anchor">#</a></h2><p>Regardless of which internationalization option you choose, the final choice is only valid for your business.</p><p>Scaffolding is composed of two important parts: <code>ng-zorro-antd</code> and <code>@delon/*</code>. These two libraries have their own international configuration. When internationalizing, they need to be the same for these libraries. Language configuration.</p><h3 id="Angular">Angular<a onclick="window.location.hash = \'Angular\'" class="anchor">#</a></h3><p>Angular configuration is mainly for currency, date format, etc., such as Chinese version:</p><pre class="hljs language-ts"><code>import { registerLocaleData } from \'@angular/common\';\nimport zh from \'@angular/common/locales/zh\';\nregisterLocaleData(zh);</code></pre><h3 id="ng-zorro-antd">ng-zorro-antd<a onclick="window.location.hash = \'ng-zorro-antd\'" class="anchor">#</a></h3><p><code>ng-zorro-antd</code> internationalization defaults to the Chinese version, for example the default English version:</p><pre class="hljs language-ts"><code>import { NZ_I18N, en_US } from \'ng-zorro-antd/i18n\';\n@NgModule({\n  ...\n  imports     : [ NgZorroAntdModule ],\n  providers   : [ { provide: NZ_I18N, useValue: en_US } ]\n})\nexport class AppModule { }</code></pre><p>Of course, you can also use runtime changes:</p><pre class="hljs language-ts"><code>import { en_US, NzI18nService } from \'ng-zorro-antd/i18n\';\n...\nconstructor(private nzI18nService:NzI18nService) {\n}\n\nswitchLanguage() {\n  this.nzI18nService.setLocale(en_US);\n}</code></pre><h3 id="@delon">@delon<a onclick="window.location.hash = \'@delon\'" class="anchor">#</a></h3><p>@delon internationalization defaults to Chinese version, for example the default is English version:</p><pre class="hljs language-ts"><code>import { DELON_LOCALE, en_US } from \'@delon/theme\';\n@NgModule({\n  ...\n  providers   : [ { provide: DELON_LOCALE, useValue: en_US } ]\n})\nexport class AppModule { }</code></pre><p>Of course, you can also use runtime changes:</p><pre class="hljs language-ts"><code>import { en_US, DelonLocaleService } from \'@delon/theme\';\n...\nconstructor(private delonLocaleService: DelonLocaleService) {\n}\n\nswitchLanguage() {\n  this.delonLocaleService.setLocale(en_US);\n}</code></pre><h2 id="ALAIN_I18N_TOKEN">ALAIN_I18N_TOKEN<a onclick="window.location.hash = \'ALAIN_I18N_TOKEN\'" class="anchor">#</a></h2><p><code>@delon/*</code> class library has many data interface properties with the <em>i18n</em> typeface (for example: <code>page-header</code>, <code>st</code> column description, <code>Menu</code> menu data, etc.) when you want the data for these components. When the interface can dynamically switch automatically according to the Key value in the current language, you also need to define a self-implementation service interface for <code>ALAIN_I18N_TOKEN</code> (for example: <a target="_blank" href="https://github.com/ng-alain/ng-alain/blob" data-url="https://github.com/ng-alain/ng-alain/blob">I18NService</a> /master/src/app/core/i18n/i18n.service.ts)) and register under the root module.</p><pre class="hljs language-ts"><code>import { ALAIN_I18N_TOKEN } from \'@delon/theme\';\nimport { I18NService } from \'@core/i18n/i18n.service\';\n\n@NgModule({\n  ...\n  providers: [\n    { provide: ALAIN_I18N_TOKEN, useClass: I18NService, multi: false }\n  ]\n})\nexport class AppModule {}</code></pre><h3 id="i18n-pipe">i18n pipe<a onclick="window.location.hash = \'i18n-pipe\'" class="anchor">#</a></h3><p>In order not to be named by the third-party pipes, the scaffolding contains a <code>i18n</code> pipe, which is equivalent to calling the <code>fanAIN</code> method of <code>ALAIN_I18N_TOKEN</code> directly.</p><p>That differs from <code>@ngx-translate</code>\'s <code>|translate</code>, which listens for language changes and updates automatically. <code>| i18n</code> will not listen to language change notifications, so there will be better performance. When you explicitly re-render the Angular project after switching languages, <code>| i18n</code> will be more suitable.</p><h2 id="How-to-add">How to add<a onclick="window.location.hash = \'How-to-add\'" class="anchor">#</a></h2><p>When creating scaffolding <a href="/cli/add" data-url="/cli/add">from command line</a> <code>ng add ng-alain</code>, it is allowed to specify <code>--i18n</code> to indicate whether the internationalized sample code is included (in the <code>@ngx-translate/core</code> mode).</p><h2 id="How-to-delete">How to delete<a onclick="window.location.hash = \'How-to-delete\'" class="anchor">#</a></h2><p>The sample code covers the following:</p><ul><li><p><code>src/app/core/i18n</code> directory</p></li><li><p><code>app.module.ts</code> for <code>TranslateModule</code></p></li><li><p>Replace the pipe of i18n that may appear in the default layout using <code>| translate</code> or <code>| i18n</code></p></li><li><p>Remove <code>@ngx-translate/core</code>, <code>@ngx-translate/http-loader</code> package</p></li></ul><h2 id="Default-language">Default language<a onclick="window.location.hash = \'Default-language\'" class="anchor">#</a></h2><p>Regardless of whether internationalization is required or not, since the default languages \u200b\u200bof class libraries such as <code>Angular</code>, <code>ng-zorro-antd</code>, <code>@delon/*</code> are different, it is also necessary to ensure that the default language of these libraries is <strong>the same type</strong>. A simple example approach to understand the current language situation for each type of library:</p><pre class="hljs language-ts"><code>import { Component } from \'@angular/core\';\n\n@Component({\n  selector: \'app-i18n-test\',\n  template: `\n  &lt;h2&gt;angular&lt;/h2&gt;\n  &lt;p&gt;Date: {{now | date}}&lt;/p&gt;\n  &lt;h2&gt;ng-zorro-antd&lt;/h2&gt;\n  &lt;nz-transfer [nzDataSource]="[]"&gt;&lt;/nz-transfer&gt;\n  &lt;h2&gt;@delon&lt;/h2&gt;\n  &lt;div style="width: 200px"&gt;\n    &lt;tag-select&gt;\n      &lt;nz-tag&gt;1&lt;/nz-tag&gt;\n    &lt;/tag-select&gt;\n  &lt;/div&gt;`,\n})\nexport class I18nTestComponent {\n  now = new Date();\n}</code></pre><h3 id="Example">Example<a onclick="window.location.hash = \'Example\'" class="anchor">#</a></h3><p>In order to make language uniformity, NG-ALAIN provides a simple unified configuration in the <code>AppModule</code> root module.</p><h4 id="Chinese-Version">Chinese Version<a onclick="window.location.hash = \'Chinese-Version\'" class="anchor">#</a></h4><pre class="hljs language-ts"><code>// #region i18n\nimport { default as ngLang } from \'@angular/common/locales/zh\';\nimport { NZ_I18N, zh_CN as zorroLang } from \'ng-zorro-antd/i18n\';\nimport { DELON_LOCALE, zh_CN as delonLang } from \'@delon/theme\';\nconst LANG = {\n  abbr: \'zh\',\n  ng: ngLang,\n  zorro: zorroLang,\n  delon: delonLang,\n};\n// register angular\nimport { registerLocaleData } from \'@angular/common\';\nregisterLocaleData(LANG.ng, LANG.abbr);\nconst LANG_PROVIDES = [\n  { provide: LOCALE_ID, useValue: LANG.abbr },\n  { provide: NZ_I18N, useValue: LANG.zorro },\n  { provide: DELON_LOCALE, useValue: LANG.delon },\n];\n// #endregion\n\n@NgModule({\n  providers: [...LANG_PROVIDES],\n})\nexport class AppModule {}</code></pre><h4 id="English-version">English version<a onclick="window.location.hash = \'English-version\'" class="anchor">#</a></h4><pre class="hljs language-ts"><code>// #region i18n\nimport { default as ngLang } from \'@angular/common/locales/en\';\nimport { NZ_I18N, en_US as zorroLang } from \'ng-zorro-antd/i18n\';\nimport { DELON_LOCALE, en_US as delonLang } from \'@delon/theme\';\nconst LANG = {\n  abbr: \'en\',\n  ng: ngLang,\n  zorro: zorroLang,\n  delon: delonLang,\n};\n// register angular\nimport { registerLocaleData } from \'@angular/common\';\nregisterLocaleData(LANG.ng, LANG.abbr);\nconst LANG_PROVIDES = [\n  { provide: LOCALE_ID, useValue: LANG.abbr },\n  { provide: NZ_I18N, useValue: LANG.zorro },\n  { provide: DELON_LOCALE, useValue: LANG.delon },\n];\n// #endregion\n\n@NgModule({\n  providers: [...LANG_PROVIDES],\n})\nexport class AppModule {}</code></pre><h3 id="Command-Line">Command Line<a onclick="window.location.hash = \'Command-Line\'" class="anchor">#</a></h3><p>Use the <a href="/cli/plugin/zh#defaultLanguage" data-url="/cli/plugin/zh#defaultLanguage">defaultLanguage</a> plugin to quickly switch between the default locales.</p></article></section>',meta:{order:30,title:{"en-US":"I18n","zh-CN":"\u56fd\u9645\u5316"},type:"Advance"},toc:[{id:"Two-options",title:"Two options",h:2},{id:"Angular-Built-in",title:"Angular Built in",h:3},{id:"@ngx-translate/core",title:"@ngx-translate/core",h:3},{id:"How-to-configure",title:"How to configure",h:2},{id:"Angular",title:"Angular",h:3},{id:"ng-zorro-antd",title:"ng-zorro-antd",h:3},{id:"@delon",title:"@delon",h:3},{id:"ALAIN_I18N_TOKEN",title:"ALAIN_I18N_TOKEN",h:2},{id:"i18n-pipe",title:"i18n pipe",h:3},{id:"How-to-add",title:"How to add",h:2},{id:"How-to-delete",title:"How to delete",h:2},{id:"Default-language",title:"Default language",h:2},{id:"Example",title:"Example",h:3},{id:"Command-Line",title:"Command Line",h:3}]},"zh-CN":{content:'<section class="markdown"><article><p>Angular \u56fd\u9645\u5316\u5e38\u89c1\u6709 Angular \u5185\u7f6e\u548c\u57fa\u4e8e @ngx-translate/core \uff08\u8bf7\u53c2\u8003<a target="_blank" href="https://github.com/ngx-translate/core" data-url="https://github.com/ngx-translate/core">\u5b98\u7f51</a>\u4e86\u89e3\u66f4\u591a\u5b9e\u73b0\u7ec6\u8282\uff09\u4e24\u79cd\u4e0d\u540c\u56fd\u9645\u5316\u65b9\u6848\u3002</p><h2 id="\u4e24\u79cd\u65b9\u6848">\u4e24\u79cd\u65b9\u6848<a onclick="window.location.hash = \'\u4e24\u79cd\u65b9\u6848\'" class="anchor">#</a></h2><h3 id="Angular-\u5185\u7f6e">Angular \u5185\u7f6e<a onclick="window.location.hash = \'Angular-\u5185\u7f6e\'" class="anchor">#</a></h3><p>Angular <a target="_blank" href="https://angular.io/guide/i18n" data-url="https://angular.io/guide/i18n">\u6587\u6863</a>\uff08<a target="_blank" href="https://angular.cn/guide/i18n" data-url="https://angular.cn/guide/i18n">\u4e2d\u6587\u7248</a>\uff09\u6709\u5b8c\u6574\u7684\u63cf\u8ff0\uff0c<strong>\u6ce8\u610f</strong>\u9700\u8981\u4e3a\u6bcf\u4e00\u79cd\u8bed\u8a00\u6784\u5efa\u548c\u90e8\u7f72\u5355\u72ec\u7684\u5e94\u7528\u7a0b\u5e8f\u7248\u672c\u3002</p><h3 id="@ngx-translate/core">@ngx-translate/core<a onclick="window.location.hash = \'@ngx-translate/core\'" class="anchor">#</a></h3><p><a target="_blank" href="https://github.com/ngx-translate/core" data-url="https://github.com/ngx-translate/core">@ngx-translate/core</a> \u662f\u793e\u533a\u7248\u672c\u7684 Angular \u56fd\u9645\u5316\uff0c\u76f8\u6bd4\u8f83 Angular \u5185\u7f6e\u5b83\u662f\u52a8\u6001\u6027\uff0c\u65e0\u987b\u9488\u5bf9\u4e0d\u540c\u8bed\u8a00\u6784\u5efa\u548c\u90e8\u7f72\u5355\u72ec\u7248\u672c\uff0c\u5e76\u4e14\u5927\u90e8\u5206\u60c5\u51b5\u4e0b\u53ef\u4ee5\u7acb\u5373\u5448\u73b0\u3002</p><h2 id="\u5982\u4f55\u914d\u7f6e">\u5982\u4f55\u914d\u7f6e<a onclick="window.location.hash = \'\u5982\u4f55\u914d\u7f6e\'" class="anchor">#</a></h2><p>\u4e0d\u7ba1\u4f60\u9009\u62e9\u54ea\u4e00\u79cd\u56fd\u9645\u5316\u65b9\u6848\uff0c\u6700\u7ec8\u9009\u62e9\u7684\u90fd\u53ea\u5bf9\u4f60\u4e1a\u52a1\u8303\u56f4\u6709\u6548\u3002</p><p>\u811a\u624b\u67b6\u662f\u7531 <code>ng-zorro-antd</code>\u3001<code>@delon/*</code> \u7c7b\u5e93\u4e24\u4e2a\u91cd\u8981\u90e8\u5206\u7ec4\u4ef6\uff0c\u800c\u8fd9\u4e24\u4e2a\u7c7b\u5e93\u6709\u81ea\u5df1\u7684\u56fd\u9645\u5316\u914d\u7f6e\uff0c\u5f53\u8fdb\u884c\u56fd\u9645\u5316\u65f6\u9700\u8981\u5bf9\u8fd9\u4e9b\u7c7b\u5e93\u8fdb\u884c\u76f8\u540c\u8bed\u8a00\u7684\u914d\u7f6e\u3002</p><h3 id="Angular">Angular<a onclick="window.location.hash = \'Angular\'" class="anchor">#</a></h3><p>Angular \u914d\u7f6e\u4e3b\u8981\u662f\u9488\u5bf9\u8d27\u5e01\u3001\u65e5\u671f\u683c\u5f0f\u7b49\uff0c\u4f8b\u5982\u4e2d\u6587\u7248\u672c\uff1a</p><pre class="hljs language-ts"><code>import { registerLocaleData } from \'@angular/common\';\nimport zh from \'@angular/common/locales/zh\';\nregisterLocaleData(zh);</code></pre><h3 id="ng-zorro-antd">ng-zorro-antd<a onclick="window.location.hash = \'ng-zorro-antd\'" class="anchor">#</a></h3><p>NG-ZORRO \u56fd\u9645\u5316\u9ed8\u8ba4\u662f\u4e2d\u6587\u7248\uff0c\u4f8b\u5982\u9ed8\u8ba4\u4e3a\u82f1\u6587\u7248\u672c\uff1a</p><pre class="hljs language-ts"><code>import { NZ_I18N, en_US } from \'ng-zorro-antd/i18n\';\n@NgModule({\n  ...\n  imports     : [ NgZorroAntdModule ],\n  providers   : [ { provide: NZ_I18N, useValue: en_US } ]\n})\nexport class AppModule { }</code></pre><p>\u5f53\u7136\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528\u8fd0\u884c\u65f6\u66f4\u6539\uff1a</p><pre class="hljs language-ts"><code>import { en_US, NzI18nService } from \'ng-zorro-antd/i18n\';\n...\nconstructor(private nzI18nService:NzI18nService) {\n}\n\nswitchLanguage() {\n  this.nzI18nService.setLocale(en_US);\n}</code></pre><h3 id="@delon">@delon<a onclick="window.location.hash = \'@delon\'" class="anchor">#</a></h3><p>@delon \u56fd\u9645\u5316\u9ed8\u8ba4\u662f\u4e2d\u6587\u7248\uff0c\u4f8b\u5982\u9ed8\u8ba4\u4e3a\u82f1\u6587\u7248\u672c\uff1a</p><pre class="hljs language-ts"><code>import { DELON_LOCALE, en_US } from \'@delon/theme\';\n@NgModule({\n  ...\n  providers   : [ { provide: DELON_LOCALE, useValue: en_US } ]\n})\nexport class AppModule { }</code></pre><p>\u5f53\u7136\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528\u8fd0\u884c\u65f6\u66f4\u6539\uff1a</p><pre class="hljs language-ts"><code>import { en_US, DelonLocaleService } from \'@delon/theme\';\n...\nconstructor(private delonLocaleService: DelonLocaleService) {\n}\n\nswitchLanguage() {\n  this.delonLocaleService.setLocale(en_US);\n}</code></pre><h2 id="ALAIN_I18N_TOKEN">ALAIN_I18N_TOKEN<a onclick="window.location.hash = \'ALAIN_I18N_TOKEN\'" class="anchor">#</a></h2><p><code>@delon/*</code> \u7c7b\u5e93\u6709\u8bb8\u591a\u5e26\u6709 <em>i18n</em> \u5b57\u6837\u7684\u6570\u636e\u63a5\u53e3\u5c5e\u6027\uff08\u4f8b\u5982\uff1a<code>page-header</code>\u3001<code>st</code> \u5217\u63cf\u8ff0\u3001<code>Menu</code> \u83dc\u5355\u6570\u636e\u7b49\u7b49\uff09\uff0c\u5f53\u4f60\u5e0c\u671b\u8fd9\u4e9b\u7ec4\u4ef6\u7684\u6570\u636e\u63a5\u53e3\u80fd\u52a8\u6001\u6839\u636e Key \u503c\u6309\u5f53\u524d\u8bed\u8a00\u81ea\u52a8\u5207\u6362\u65f6\uff0c\u4f60\u8fd8\u9700\u8981\u5bf9 <code>ALAIN_I18N_TOKEN</code> \u5b9a\u4e49\u4e00\u4e2a\u81ea\u5b9e\u73b0\u670d\u52a1\u63a5\u53e3\uff08\u4f8b\u5982\uff1a<a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/core/i18n/i18n.service.ts" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/core/i18n/i18n.service.ts">I18NService</a>\uff09\uff0c\u5e76\u5728\u6839\u6a21\u5757\u4e0b\u6ce8\u518c\u3002</p><pre class="hljs language-ts"><code>import { ALAIN_I18N_TOKEN } from \'@delon/theme\';\nimport { I18NService } from \'@core/i18n/i18n.service\';\n\n@NgModule({\n  ...\n  providers: [\n    { provide: ALAIN_I18N_TOKEN, useClass: I18NService, multi: false }\n  ]\n})\nexport class AppModule {}</code></pre><h3 id="i18n\u7ba1\u9053">i18n\u7ba1\u9053<a onclick="window.location.hash = \'i18n\u7ba1\u9053\'" class="anchor">#</a></h3><p>\u4e3a\u4e86\u4e0d\u53d7\u7b2c\u4e09\u65b9\u5404\u81ea\u7ba1\u9053\u7684\u547d\u540d\u65b9\u5f0f\uff0c\u811a\u624b\u67b6\u5305\u542b\u4e00\u4e2a <code>i18n</code> \u7684\u7ba1\u9053\uff0c\u5b83\u76f8\u5f53\u4e8e\u76f4\u63a5\u8c03\u7528 <code>ALAIN_I18N_TOKEN</code> \u7684 <code>fanyi</code> \u65b9\u6cd5\u3002</p><p>\u4ed6\u548c <code>@ngx-translate</code> \u7684 <code>| translate</code> \u6709\u6240\u4e0d\u540c\uff0c\u5b83\u4f1a\u76d1\u542c\u8bed\u8a00\u7684\u53d8\u5316\u5e76\u81ea\u52a8\u66f4\u65b0\u3002\u800c <code>| i18n</code> \u4e0d\u4f1a\u76d1\u542c\u8bed\u8a00\u53d8\u66f4\u901a\u77e5\u6240\u4ee5\u4f1a\u6709\u66f4\u597d\u7684\u6027\u80fd\uff0c\u5f53\u4f60\u660e\u786e\u5728\u5207\u6362\u8bed\u8a00\u540e\u4f1a\u91cd\u65b0\u6e32\u67d3 Angular \u9879\u76ee\u65f6 <code>| i18n</code> \u4f1a\u66f4\u9002\u5408\u3002</p><h2 id="\u5982\u4f55\u6dfb\u52a0">\u5982\u4f55\u6dfb\u52a0<a onclick="window.location.hash = \'\u5982\u4f55\u6dfb\u52a0\'" class="anchor">#</a></h2><p>\u521b\u5efa\u811a\u624b\u67b6<a href="/cli/add" data-url="/cli/add">\u547d\u4ee4\u884c</a> <code>ng add ng-alain</code> \u65f6\u5141\u8bb8\u6307\u5b9a <code>--i18n</code> \u8868\u793a\u662f\u5426\u5305\u542b\u56fd\u9645\u5316\u793a\u4f8b\u4ee3\u7801\uff08\u91c7\u7528 <code>@ngx-translate/core</code> \u65b9\u5f0f\uff09\u3002</p><h2 id="\u5982\u4f55\u5220\u9664">\u5982\u4f55\u5220\u9664<a onclick="window.location.hash = \'\u5982\u4f55\u5220\u9664\'" class="anchor">#</a></h2><p>\u793a\u4f8b\u4ee3\u7801\u6d89\u53ca\u5185\u5bb9\u5305\u62ec\uff1a</p><ul><li><p><code>src/app/core/i18n</code> \u76ee\u5f55</p></li><li><p><code>app.module.ts</code> \u5bf9 <code>TranslateModule</code> \u76f8\u5173\u58f0\u660e</p></li><li><p>\u66ff\u6362\u6389\u9ed8\u8ba4\u5e03\u5c40\u53ef\u80fd\u51fa\u73b0\u7684 I18n \u7684 Pipe \u4f7f\u7528 <code>| translate</code> \u6216 <code>| i18n</code></p></li><li><p>\u79fb\u9664 <code>@ngx-translate/core</code>\u3001<code>@ngx-translate/http-loader</code> \u5305\u4f53</p></li></ul><h2 id="\u9ed8\u8ba4\u8bed\u8a00">\u9ed8\u8ba4\u8bed\u8a00<a onclick="window.location.hash = \'\u9ed8\u8ba4\u8bed\u8a00\'" class="anchor">#</a></h2><p>\u4e0d\u7ba1\u662f\u5426\u9700\u8981\u56fd\u9645\u5316\uff0c\u7531\u4e8e <code>Angular</code>\u3001<code>ng-zorro-antd</code>\u3001<code>@delon/*</code> \u7b49\u7c7b\u5e93\u7684\u9ed8\u8ba4\u8bed\u8a00\u90fd\u4e0d\u540c\uff0c\u56e0\u6b64\u8fd8\u9700\u8981\u786e\u4fdd\u8fd9\u4e9b\u7c7b\u5e93\u7684\u9ed8\u8ba4\u8bed\u8a00\u662f<strong>\u540c\u4e00\u7c7b\u578b</strong>\u3002\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\u529e\u6cd5\u53ef\u4ee5\u4e86\u89e3\u5404\u7c7b\u5e93\u5f53\u524d\u8bed\u8a00\u60c5\u51b5\uff1a</p><pre class="hljs language-ts"><code>import { Component } from \'@angular/core\';\n\n@Component({\n  selector: \'app-i18n-test\',\n  template: `\n  &lt;h2&gt;angular&lt;/h2&gt;\n  &lt;p&gt;Date: {{now | date}}&lt;/p&gt;\n  &lt;h2&gt;ng-zorro-antd&lt;/h2&gt;\n  &lt;nz-transfer [nzDataSource]="[]"&gt;&lt;/nz-transfer&gt;\n  &lt;h2&gt;@delon&lt;/h2&gt;\n  &lt;div style="width: 200px"&gt;\n    &lt;tag-select&gt;\n      &lt;nz-tag&gt;1&lt;/nz-tag&gt;\n    &lt;/tag-select&gt;\n  &lt;/div&gt;`,\n})\nexport class I18nTestComponent {\n  now = new Date();\n}</code></pre><h3 id="\u793a\u4f8b">\u793a\u4f8b<a onclick="window.location.hash = \'\u793a\u4f8b\'" class="anchor">#</a></h3><p>\u4e3a\u4e86\u4f7f\u8bed\u8a00\u7edf\u4e00\u6027\uff0cNG-ALAIN \u63d0\u4f9b\u4e00\u4e2a\u5728 <code>AppModule</code> \u6839\u6a21\u5757\u91cc\u7b80\u5355\u7684\u7edf\u4e00\u914d\u7f6e\u65b9\u5f0f\u3002</p><h4 id="\u4e2d\u6587\u7248">\u4e2d\u6587\u7248<a onclick="window.location.hash = \'\u4e2d\u6587\u7248\'" class="anchor">#</a></h4><pre class="hljs language-ts"><code>// #region i18n\nimport { default as ngLang } from \'@angular/common/locales/zh\';\nimport { NZ_I18N, zh_CN as zorroLang } from \'ng-zorro-antd/i18n\';\nimport { DELON_LOCALE, zh_CN as delonLang } from \'@delon/theme\';\nconst LANG = {\n  abbr: \'zh\',\n  ng: ngLang,\n  zorro: zorroLang,\n  delon: delonLang,\n};\n// register angular\nimport { registerLocaleData } from \'@angular/common\';\nregisterLocaleData(LANG.ng, LANG.abbr);\nconst LANG_PROVIDES = [\n  { provide: LOCALE_ID, useValue: LANG.abbr },\n  { provide: NZ_I18N, useValue: LANG.zorro },\n  { provide: DELON_LOCALE, useValue: LANG.delon },\n];\n// #endregion\n\n@NgModule({\n  providers: [...LANG_PROVIDES],\n})\nexport class AppModule {}</code></pre><h4 id="\u82f1\u6587\u7248">\u82f1\u6587\u7248<a onclick="window.location.hash = \'\u82f1\u6587\u7248\'" class="anchor">#</a></h4><pre class="hljs language-ts"><code>// #region i18n\nimport { default as ngLang } from \'@angular/common/locales/en\';\nimport { NZ_I18N, en_US as zorroLang } from \'ng-zorro-antd/i18n\';\nimport { DELON_LOCALE, en_US as delonLang } from \'@delon/theme\';\nconst LANG = {\n  abbr: \'en\',\n  ng: ngLang,\n  zorro: zorroLang,\n  delon: delonLang,\n};\n// register angular\nimport { registerLocaleData } from \'@angular/common\';\nregisterLocaleData(LANG.ng, LANG.abbr);\nconst LANG_PROVIDES = [\n  { provide: LOCALE_ID, useValue: LANG.abbr },\n  { provide: NZ_I18N, useValue: LANG.zorro },\n  { provide: DELON_LOCALE, useValue: LANG.delon },\n];\n// #endregion\n\n@NgModule({\n  providers: [...LANG_PROVIDES],\n})\nexport class AppModule {}</code></pre><h3 id="\u547d\u4ee4\u884c">\u547d\u4ee4\u884c<a onclick="window.location.hash = \'\u547d\u4ee4\u884c\'" class="anchor">#</a></h3><p>\u4f7f\u7528 <a href="/cli/plugin/zh#defaultLanguage" data-url="/cli/plugin/zh#defaultLanguage">defaultLanguage</a> \u63d2\u4ef6\u53ef\u4ee5\u5feb\u901f\u5207\u6362\u9ed8\u8ba4\u8bed\u8a00\u73af\u5883\u3002</p></article></section>',meta:{order:30,title:{"en-US":"I18n","zh-CN":"\u56fd\u9645\u5316"},type:"Advance"},toc:[{id:"\u4e24\u79cd\u65b9\u6848",title:"\u4e24\u79cd\u65b9\u6848",h:2},{id:"Angular-\u5185\u7f6e",title:"Angular \u5185\u7f6e",h:3},{id:"@ngx-translate/core",title:"@ngx-translate/core",h:3},{id:"\u5982\u4f55\u914d\u7f6e",title:"\u5982\u4f55\u914d\u7f6e",h:2},{id:"Angular",title:"Angular",h:3},{id:"ng-zorro-antd",title:"ng-zorro-antd",h:3},{id:"@delon",title:"@delon",h:3},{id:"ALAIN_I18N_TOKEN",title:"ALAIN_I18N_TOKEN",h:2},{id:"i18n\u7ba1\u9053",title:"i18n\u7ba1\u9053",h:3},{id:"\u5982\u4f55\u6dfb\u52a0",title:"\u5982\u4f55\u6dfb\u52a0",h:2},{id:"\u5982\u4f55\u5220\u9664",title:"\u5982\u4f55\u5220\u9664",h:2},{id:"\u9ed8\u8ba4\u8bed\u8a00",title:"\u9ed8\u8ba4\u8bed\u8a00",h:2},{id:"\u793a\u4f8b",title:"\u793a\u4f8b",h:3},{id:"\u547d\u4ee4\u884c",title:"\u547d\u4ee4\u884c",h:3}]}},demo:!1},this.codes=[]},k=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/import.en-US.md","zh-CN":"docs/import.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>In addition to the NG-ALAIN base component and the @delon business component, sometimes we need to reference other external class libraries, the following is how to use the rich text component <a target="_blank" href="https://github.com/cipchk/ngx-tinymce" data-url="https://github.com/cipchk/ngx-tinymce">ngx-tinymce</a>:</p><h2 id="Angular-Component">Angular Component<a onclick="window.location.hash = \'Angular-Component\'" class="anchor">#</a></h2><h3 id="Installing-dependencies">Installing dependencies<a onclick="window.location.hash = \'Installing-dependencies\'" class="anchor">#</a></h3><pre class="hljs language-bash"><code>yarn add ngx-tinymce</code></pre><h3 id="Import-module">Import module<a onclick="window.location.hash = \'Import-module\'" class="anchor">#</a></h3><p>You may need to use rich editor in all submodules, as it\'s recommended to import and export them in the <code>SharedModule</code> module.</p><pre class="hljs language-ts"><code>// #region third libs\nimport { NgxTinymceModule } from \'ngx-tinymce\';\nconst THIRDMODULES = [ NgxTinymceModule ];\n// #endregion</code></pre><blockquote><p>The <code>region: third libs</code> region is a coding convention for NG-ALAIN, register all third-party components into the <code>THIRDMODULES</code> variable, for more coding conventions, refer to <a href="/docs/style-guide" data-url="/docs/style-guide">Style Guide</a>.</p></blockquote><p>For some third-party components, may be required global configuration. It\'s recommended to register in the root module, for example:</p><pre class="hljs language-ts"><code>import { NgxTinymceModule } from \'ngx-tinymce\';\n@NgModule({\n  imports: [\n    BrowserModule,\n    NgxTinymceModule.forRoot({\n      baseURL: \'//cdn.bootcss.com/tinymce/4.7.13/\'\n    })\n  ]\n})\nexport class AppModule { }</code></pre><p>Next you can use <code>ngx-tinymce</code> in any submodule:</p><pre class="hljs language-html"><code>&lt;tinymce [(ngModel)]="html"&gt;&lt;/tinymce&gt;</code></pre><h2 id="Non-Angular-Component">Non-Angular Component<a onclick="window.location.hash = \'Non-Angular-Component\'" class="anchor">#</a></h2><p>Referencing a non-Angular component is actually loading a JavaScript class library file, such as the QR code library <a target="_blank" href="https://neocotic.com/qrious/" data-url="https://neocotic.com/qrious/">qrious</a>:</p><h3 id="Installing-dependencies">Installing dependencies<a onclick="window.location.hash = \'Installing-dependencies\'" class="anchor">#</a></h3><pre class="hljs language-bash"><code>yarn add qrious</code></pre><h3 id="Import-Scripts">Import Scripts<a onclick="window.location.hash = \'Import-Scripts\'" class="anchor">#</a></h3><p>Add <code>qrious.min.js</code> to the <code>scripts</code> node in <code>angular.json</code>:</p><pre class="hljs language-json"><code>"scripts": [\n  "node_modules/qrious/dist/qrious.min.js"\n]</code></pre><p>If the third-party library requires additional styles, you also need to add a path to <code>styles</code>.</p><blockquote><p>Note: You need to re-run <code>ng s</code>.</p></blockquote><p><strong>Lazy loading script</strong></p><p>The above import script method will package the code directly into <code>scripts.js</code>, which will cause the <code>scripts.js</code> to become larger. NG-ALAIN provides another delayed loading CDN library script solution for low-usage services. (Example: <a target="_blank" href="https://cdn.bootcss.com/jszip/3.1.5/jszip.min.js" data-url="https://cdn.bootcss.com/jszip/3.1.5/jszip.min.js">zip</a> compression), you can use <a href="/util/lazy" data-url="/util/lazy">LazyService</a> to delay loading remote CDN scripts.</p><h3 id="How-to-use">How to use<a onclick="window.location.hash = \'How-to-use\'" class="anchor">#</a></h3><p>Angular is using TypeScript language, and all types must be clearly defined to be used. For details, please refer to <a target="_blank" href="https://zhuanlan.zhihu.com/p/35796451" data-url="https://zhuanlan.zhihu.com/p/35796451">Angular How to use third-party libraries</a>.</p><p>A sample code for the call:</p><pre class="hljs language-ts"><code>declare var QRious: any;\n\n@Component()\nexport class DEMOComponent {\n  constructor(cog: QRConfig) {\n    const qr = new QRious();\n  }\n}</code></pre></article></section>',meta:{order:60,title:"Use a third-party lib",type:"Dev"},toc:[{id:"Angular-Component",title:"Angular Component",h:2},{id:"Installing-dependencies",title:"Installing dependencies",h:3},{id:"Import-module",title:"Import module",h:3},{id:"Non-Angular-Component",title:"Non-Angular Component",h:2},{id:"Installing-dependencies",title:"Installing dependencies",h:3},{id:"Import-Scripts",title:"Import Scripts",h:3},{id:"How-to-use",title:"How to use",h:3}]},"zh-CN":{content:'<section class="markdown"><article><p>\u9664\u4e86 NG-ZORRO \u57fa\u7840\u7ec4\u4ef6\u4ee5\u53ca @delon \u4e1a\u52a1\u7ec4\u4ef6\u4ee5\u5916\uff0c\u6709\u65f6\u6211\u4eec\u8fd8\u9700\u8981\u5f15\u7528\u5176\u4ed6\u5916\u90e8\u7c7b\u5e93\uff0c\u4ee5\u4e0b\u5c06\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528\u5bcc\u6587\u672c\u7ec4\u4ef6 <a target="_blank" href="https://github.com/cipchk/ngx-tinymce" data-url="https://github.com/cipchk/ngx-tinymce">ngx-tinymce</a>\uff1a</p><h2 id="Angular\u7ec4\u4ef6">Angular\u7ec4\u4ef6<a onclick="window.location.hash = \'Angular\u7ec4\u4ef6\'" class="anchor">#</a></h2><h3 id="\u5b89\u88c5\u4f9d\u8d56\u5305">\u5b89\u88c5\u4f9d\u8d56\u5305<a onclick="window.location.hash = \'\u5b89\u88c5\u4f9d\u8d56\u5305\'" class="anchor">#</a></h3><pre class="hljs language-bash"><code>yarn add ngx-tinymce</code></pre><h3 id="\u6ce8\u518c">\u6ce8\u518c<a onclick="window.location.hash = \'\u6ce8\u518c\'" class="anchor">#</a></h3><p>\u50cf\u5bcc\u6587\u672c\u6846\u4f60\u53ef\u80fd\u9700\u8981\u5728\u6240\u6709\u5b50\u6a21\u5757\u4e2d\u90fd\u4f1a\u53ef\u80fd\u4f1a\u7528\u5230\uff0c\u56e0\u4e3a\u5efa\u8bae\u5728 <code>SharedModule</code> \u6a21\u5757\u4e2d\u5bfc\u5165\u548c\u5bfc\u51fa\u4ed6\u3002</p><pre class="hljs language-ts"><code>// #region third libs\nimport { NgxTinymceModule } from \'ngx-tinymce\';\nconst THIRDMODULES = [ NgxTinymceModule ];\n// #endregion</code></pre><blockquote><p><code>region: third libs</code> \u533a\u57df\u662fNG-ALAIN\u7684\u4e00\u4e2a\u7f16\u7801\u7ea6\u5b9a\uff0c\u5c06\u6240\u6709\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u6ce8\u518c\u81f3 <code>THIRDMODULES</code> \u53d8\u91cf\u4e2d\u5373\u53ef\uff0c\u800c\u65e0\u987b\u5173\u5fc3 <code>@NgModule</code> \u5185\u5728\u7684\u5199\u6cd5\uff0c\u6709\u5173\u66f4\u591a\u7f16\u7801\u7ea6\u5b9a\u53ef\u4ee5\u53c2\u8003<a href="/docs/style-guide" data-url="/docs/style-guide">\u7f16\u7801\u89c4\u8303\u5efa\u8bae</a>\u3002</p></blockquote><p>\u5bf9\u4e8e\u90e8\u5206\u7b2c\u4e09\u65b9\u7ec4\u4ef6\uff0c\u53ef\u80fd\u4f1a\u9700\u8981\u4e00\u4e9b\u914d\u7f6e\u9879\uff0c\u5efa\u8bae\u5728\u6839\u6a21\u5757\u4e2d\u6ce8\u518c\uff0c\u4f8b\u5982\uff1a</p><pre class="hljs language-ts"><code>import { NgxTinymceModule } from \'ngx-tinymce\';\n@NgModule({\n  imports: [\n    BrowserModule,\n    NgxTinymceModule.forRoot({\n      baseURL: \'//cdn.bootcss.com/tinymce/4.7.13/\'\n    })\n  ]\n})\nexport class AppModule { }</code></pre><p>\u63a5\u4e0b\u6765\u4f60\u53ef\u4ee5\u5728\u4efb\u4f55\u5b50\u6a21\u5757\u4e2d\u4f7f\u7528 <code>ngx-tinymce</code>\uff1a</p><pre class="hljs language-html"><code>&lt;tinymce [(ngModel)]="html"&gt;&lt;/tinymce&gt;</code></pre><h2 id="\u975eAngular\u7ec4\u4ef6">\u975eAngular\u7ec4\u4ef6<a onclick="window.location.hash = \'\u975eAngular\u7ec4\u4ef6\'" class="anchor">#</a></h2><p>\u5f15\u7528\u4e00\u4e2a\u975e Angular \u7ec4\u4ef6\u5b9e\u9645\u4e0a\u662f\u4e00\u4e2a JavaScript \u7c7b\u5e93\uff0c\u4f8b\u5982\u4e8c\u7ef4\u7801\u7c7b\u5e93 <a target="_blank" href="https://neocotic.com/qrious/" data-url="https://neocotic.com/qrious/">qrious</a>\uff0c\u8fd9\u662f\u4e00\u4e2a\u7eaf\u6d01\u7684 JavaScript \u7c7b\u5e93\uff08\u5efa\u8bae\u5c3d\u53ef\u80fd\u4f7f\u7528\u7eaf\u6d01\u7c7b\u5e93\u800c\u975e\u5e26\u6709\u4f9d\u8d56\u5176\u4ed6\uff09\u3002</p><h3 id="\u5b89\u88c5\u4f9d\u8d56\u5305">\u5b89\u88c5\u4f9d\u8d56\u5305<a onclick="window.location.hash = \'\u5b89\u88c5\u4f9d\u8d56\u5305\'" class="anchor">#</a></h3><pre class="hljs language-bash"><code>yarn add qrious</code></pre><h3 id="\u5bfc\u5165\u811a\u672c">\u5bfc\u5165\u811a\u672c<a onclick="window.location.hash = \'\u5bfc\u5165\u811a\u672c\'" class="anchor">#</a></h3><p>\u5728 <code>angular.json</code> \u627e\u5230 <code>scripts</code> \u8282\u70b9\u5e76\u589e\u52a0\uff1a</p><pre class="hljs language-json"><code>"scripts": [\n  "node_modules/qrious/dist/qrious.min.js"\n]</code></pre><p>\u5982\u679c\u7b2c\u4e09\u65b9\u7c7b\u5e93\u9700\u8981\u989d\u5916\u7684\u6837\u5f0f\uff0c\u8fd8\u9700\u8981\u5728 <code>styles</code> \u589e\u52a0\u8def\u5f84\u3002</p><blockquote><p>\u6ce8\u610f\uff1a\u9700\u8981\u91cd\u65b0\u8fd0\u884c <code>ng s</code> \u624d\u4f1a\u751f\u6548\u3002</p></blockquote><p><strong>\u5ef6\u8fdf\u52a0\u8f7d\u811a\u672c</strong></p><p>\u4e0a\u8ff0\u5bfc\u5165\u811a\u672c\u65b9\u5f0f\u4f1a\u628a\u4ee3\u7801\u76f4\u63a5\u6253\u5305\u8fdb <code>scripts.js</code>\uff0c\u8fd9\u4f1a\u5bfc\u81f4 <code>scripts.js</code> \u4f53\u79ef\u53d8\u5927\uff0cNG-ALAIN \u63d0\u4f9b\u53e6\u4e00\u79cd\u5ef6\u8fdf\u52a0\u8f7dCDN\u7c7b\u5e93\u811a\u672c\u89e3\u51b3\u65b9\u6848\uff0c\u9002\u7528\u4f4e\u4f7f\u7528\u7387\u7684\u4e1a\u52a1\uff08\u4f8b\u5982\uff1a<a target="_blank" href="https://cdn.bootcss.com/jszip/3.1.5/jszip.min.js" data-url="https://cdn.bootcss.com/jszip/3.1.5/jszip.min.js">zip</a> \u538b\u7f29\uff09\uff0c\u53ef\u4ee5\u5229\u7528 <a href="/util/lazy" data-url="/util/lazy">LazyService</a> \u5ef6\u8fdf\u52a0\u8f7d\u8fdc\u7a0bCDN\u811a\u672c\u3002</p><h3 id="\u4f7f\u7528">\u4f7f\u7528<a onclick="window.location.hash = \'\u4f7f\u7528\'" class="anchor">#</a></h3><p>Angular \u662f\u91c7\u7528 TypeScript \u8bed\u8a00\uff0c\u6240\u6709\u7c7b\u578b\u90fd\u5fc5\u987b\u660e\u786e\u5b9a\u4e49\u624d\u80fd\u4f7f\u7528\uff0c\u7ec6\u8282\u8bf7\u53c2\u8003 <a target="_blank" href="https://zhuanlan.zhihu.com/p/35796451" data-url="https://zhuanlan.zhihu.com/p/35796451">Angular \u5982\u4f55\u4f7f\u7528\u7b2c\u4e09\u65b9\u5e93</a>\u3002</p><p>\u4e00\u4e2a\u8c03\u7528\u7684\u793a\u4f8b\u4ee3\u7801\uff1a</p><pre class="hljs language-ts"><code>declare var QRious: any;\n\n@Component()\nexport class DEMOComponent {\n  constructor(cog: QRConfig) {\n    const qr = new QRious();\n  }\n}</code></pre></article></section>',meta:{order:60,title:"\u4f7f\u7528\u7b2c\u4e09\u65b9\u7c7b\u5e93",type:"Dev"},toc:[{id:"Angular\u7ec4\u4ef6",title:"Angular\u7ec4\u4ef6",h:2},{id:"\u5b89\u88c5\u4f9d\u8d56\u5305",title:"\u5b89\u88c5\u4f9d\u8d56\u5305",h:3},{id:"\u6ce8\u518c",title:"\u6ce8\u518c",h:3},{id:"\u975eAngular\u7ec4\u4ef6",title:"\u975eAngular\u7ec4\u4ef6",h:2},{id:"\u5b89\u88c5\u4f9d\u8d56\u5305",title:"\u5b89\u88c5\u4f9d\u8d56\u5305",h:3},{id:"\u5bfc\u5165\u811a\u672c",title:"\u5bfc\u5165\u811a\u672c",h:3},{id:"\u4f7f\u7528",title:"\u4f7f\u7528",h:3}]}},demo:!1},this.codes=[]},w=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"zh-CN":"docs/mock.md"},content:{"zh-CN":{content:'<section class="markdown"><article></article></section>',meta:{order:60,title:"Mock",type:"Advance",url:"/mock/getting-started"},toc:[]}},demo:!1},this.codes=[]},y=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/module.en-US.md","zh-CN":"docs/module.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>The <code>AppModule</code>, <code>CoreModule</code>, and <code>SharedModule</code> modules have not been used very clearly, and it is easy to use them. The goal of the Angular module is to make components, instructions, services, and pipeline function blocks more cohesive, and each functional area forms a separate set of business domains or utilities.</p><h2 id="1)-Classification-description">1) Classification description<a onclick="window.location.hash = \'1)-Classification-description\'" class="anchor">#</a></h2><hr><h3 id="AppModule">AppModule<a onclick="window.location.hash = \'AppModule\'" class="anchor">#</a></h3><p>The root module is used to guide Angular startup. It is very suitable for importing some modules that need to be used everywhere in the application. Such as: theme system, user master authentication module, permission module, global HTTP interceptors, international services, etc..</p><h3 id="CoreModule">CoreModule<a onclick="window.location.hash = \'CoreModule\'" class="anchor">#</a></h3><p>The core module will only be imported once. It is equivalent to <code>AppModule</code>, but we should treat it as a <strong>pure service class module</strong>. For example: message, data access, etc.</p><h3 id="SharedModule">SharedModule<a onclick="window.location.hash = \'SharedModule\'" class="anchor">#</a></h3><p>We call it a shared module. It should not have <code>providers</code> because <code>ShareModule</code> will be imported in all business modules. Which will cause the service to be overwritten.</p><h2 id="2)-Recommendation">2) Recommendation<a onclick="window.location.hash = \'2)-Recommendation\'" class="anchor">#</a></h2><hr><h3 id="AppModule">AppModule<a onclick="window.location.hash = \'AppModule\'" class="anchor">#</a></h3><p><strong>Should</strong> import module:</p><ul><li><p>Angular Module: <code>BrowserModule</code>, <code>BrowserAnimationsModule</code>, <code>HttpClientModule</code></p></li><li><p><code>AlainThemeModule</code> Theme system</p></li><li><p><code>DelonMockModule</code> Mock data</p></li><li><p><code>AlainAuthModule</code> User authentication module</p></li><li><p><code>AlainACLModule</code> Privilege module</p></li><li><p>Internationalization module</p></li></ul><p><strong>Should</strong> include services:</p><ul><li><p>Angular globalization</p></li><li><p>HTTP interceptor</p></li><li><p>Angular start service</p></li><li><p><code>ng-zorro-antd</code> Basic component service</p></li><li><p><code>@delon/abc</code> Business component service</p></li></ul><p><strong>Role:</strong> Throughout the definition of the entire application.</p><hr><h3 id="CoreModule">CoreModule<a onclick="window.location.hash = \'CoreModule\'" class="anchor">#</a></h3><p><strong>Should</strong> only leave the <code>providers</code> attribute.</p><p><strong>Role:</strong> Some common services. such as: user messages, HTTP data access.</p><hr><h3 id="ShareModule">ShareModule<a onclick="window.location.hash = \'ShareModule\'" class="anchor">#</a></h3><p><strong>Should</strong> contain definitions:</p><ul><li><p>Apply generic custom business components</p></li></ul><p><strong>Should</strong> import module:</p><ul><li><p>Angular generic module:<code>CommonModule</code>\u3001<code>FormsModule</code>\u3001<code>RouterModule</code>\u3001<code>ReactiveFormsModule</code></p></li><li><p><code>ng-zorro-antd</code> Basic component module</p></li><li><p><code>@delon/abc</code> Business component module</p></li><li><p>Third-party generic dependency component module</p></li></ul><p><strong>Should</strong> Export all included modules.</p><p><strong>Should not</strong> have <code>providers</code> attribute.</p><p><strong>Function:</strong> Some common custom, third-party component definitions, reducing the import of business modules.</p><hr><h3 id="Business-module">Business module<a onclick="window.location.hash = \'Business-module\'" class="anchor">#</a></h3><p>The business module should include a business definition module and a routing module.</p><p><strong>Should</strong> import module:</p><ul><li><p><code><a data-toc="SharedModule">SharedModule</a></code></p></li><li><p>Corresponding routing module</p></li></ul><p><strong>Should not</strong>:</p><ul><li><p>Export any component</p></li><li><p>Try not to use the <code>providers</code> attribute</p></li></ul><p><strong>Route module</strong></p><p><strong>Should</strong> include only the <code>import</code>, <code>exports</code> modules of the route.</p></article></section>',meta:{order:30,title:{"en-US":"Module Guidelines","zh-CN":"\u6a21\u5757\u6ce8\u518c\u6307\u5bfc\u539f\u5219"},type:"Other"},toc:[{id:"1)-Classification-description",title:"1) Classification description",h:2},{id:"AppModule",title:"AppModule",h:3},{id:"CoreModule",title:"CoreModule",h:3},{id:"SharedModule",title:"SharedModule",h:3},{id:"2)-Recommendation",title:"2) Recommendation",h:2},{id:"AppModule",title:"AppModule",h:3},{id:"CoreModule",title:"CoreModule",h:3},{id:"ShareModule",title:"ShareModule",h:3},{id:"Business-module",title:"Business module",h:3}]},"zh-CN":{content:'<section class="markdown"><article><p>\u4e00\u76f4\u4ee5\u6765 <code>AppModule</code>\u3001<code>CoreModule</code>\u3001<code>SharedModule</code> \u6a21\u5757\u4f7f\u7528\u6ca1\u6709\u5f88\u660e\u786e\u7684\u89c4\u8303\uff0c\u5f88\u5bb9\u6613\u8ba9\u4ea7\u751f\u4e71\u7528\u3002Angular\u6a21\u5757\u76ee\u6807\u662f\u4e3a\u4e86\u4f7f\u7ec4\u4ef6\u3001\u6307\u4ee4\u3001\u670d\u52a1\u548c\u7ba1\u9053\u529f\u80fd\u5757\u66f4\u5185\u805a\uff0c\u5e76\u6bcf\u4e00\u4e2a\u529f\u80fd\u533a\u57df\u5f62\u6210\u72ec\u7acb\u7684\u4e1a\u52a1\u9886\u57df\u6216\u5b9e\u7528\u5de5\u5177\u7684\u96c6\u5408\u3002</p><h2 id="1)-\u5206\u7c7b\u8bf4\u660e">1) \u5206\u7c7b\u8bf4\u660e<a onclick="window.location.hash = \'1)-\u5206\u7c7b\u8bf4\u660e\'" class="anchor">#</a></h2><hr><h3 id="AppModule">AppModule<a onclick="window.location.hash = \'AppModule\'" class="anchor">#</a></h3><p>\u6839\u6a21\u5757\uff0c\u7528\u4e8e\u5f15\u5bfc Angular \u542f\u52a8\uff1b\u5b83\u975e\u5e38\u9002\u5408\u5bfc\u5165\u4e00\u4e9b\u9700\u8981\u5728\u6574\u4e2a\u5e94\u7528\u5230\u5904\u9700\u8981\u7684\u6a21\u5757\uff0c\u4f8b\u5982\uff1a\u4e3b\u9898\u7cfb\u7edf\u3001\u7528\u6237\u4e3b\u8ba4\u8bc1\u6a21\u5757\u3001\u6743\u9650\u6a21\u5757\u7b49\u6a21\u5757\uff0c\u4ee5\u53ca\u4e00\u4e9b\u5168\u5c40\u6027HTTP\u62e6\u622a\u5668\u3001\u56fd\u9645\u5316\u670d\u52a1\u7b49\u3002</p><h3 id="CoreModule">CoreModule<a onclick="window.location.hash = \'CoreModule\'" class="anchor">#</a></h3><p>\u6838\u5fc3\u6a21\u5757\u53ea\u4f1a\u88ab\u5bfc\u5165\u4e00\u6b21\uff0c\u5b83\u7b49\u540c <code>AppModule</code>\uff0c\u4f46\u6211\u4eec\u66f4\u5e94\u8be5\u628a\u5b83\u5f53\u6210\u4e00\u4e2a<strong>\u7eaf\u670d\u52a1\u7c7b\u6a21\u5757</strong>\uff0c\u4f8b\u5982\uff1a\u6d88\u606f\u3001\u6570\u636e\u8bbf\u95ee\u7b49\u3002</p><h3 id="SharedModule">SharedModule<a onclick="window.location.hash = \'SharedModule\'" class="anchor">#</a></h3><p>\u6211\u4eec\u53eb\u5b83\u5171\u4eab\u6a21\u5757\uff1b\u5b83\u4e0d\u5e94\u8be5\u51fa\u73b0 <code>providers</code>\uff0c\u56e0\u4e3a <code>ShareModule</code> \u4f1a\u5728\u6240\u6709\u4e1a\u52a1\u6a21\u5757\u4e2d\u88ab\u5bfc\u5165\uff0c\u8fd9\u4f1a\u5bfc\u81f4\u670d\u52a1\u88ab\u8986\u76d6\u3002</p><h2 id="2)-\u5efa\u8bae">2) \u5efa\u8bae<a onclick="window.location.hash = \'2)-\u5efa\u8bae\'" class="anchor">#</a></h2><hr><h3 id="AppModule">AppModule<a onclick="window.location.hash = \'AppModule\'" class="anchor">#</a></h3><p><strong>\u5e94</strong> \u5bfc\u5165\u6a21\u5757\uff1a</p><ul><li><p>Angular \u6a21\u5757\uff1a<code>BrowserModule</code>\u3001<code>BrowserAnimationsModule</code>\u3001<code>HttpClientModule</code></p></li><li><p><code>AlainThemeModule</code> \u4e3b\u9898\u7cfb\u7edf</p></li><li><p><code>DelonMockModule</code> Mock\u6570\u636e</p></li><li><p><code>AlainAuthModule</code> \u7528\u6237\u8ba4\u8bc1\u6a21\u5757</p></li><li><p><code>AlainACLModule</code> \u6743\u9650\u6a21\u5757</p></li><li><p>\u56fd\u9645\u5316\u6a21\u5757</p></li></ul><p><strong>\u5e94</strong> \u5305\u542b\u670d\u52a1\uff1a</p><ul><li><p>Angular \u56fd\u9645\u5316</p></li><li><p>HTTP \u62e6\u622a\u5668</p></li><li><p>Angular \u542f\u52a8\u670d\u52a1</p></li><li><p><code>ng-zorro-antd</code> \u57fa\u7840\u7ec4\u4ef6\u670d\u52a1</p></li><li><p><code>@delon/abc</code> \u4e1a\u52a1\u7ec4\u4ef6\u670d\u52a1</p></li></ul><p><strong>\u4f5c\u7528\uff1a</strong> \u8d2f\u7a7f\u6574\u4e2a\u5e94\u7528\u7684\u5b9a\u4e49\u3002</p><hr><h3 id="CoreModule">CoreModule<a onclick="window.location.hash = \'CoreModule\'" class="anchor">#</a></h3><p><strong>\u5e94</strong> \u4ec5\u53ea\u7559 <code>providers</code> \u5c5e\u6027\u3002</p><p><strong>\u4f5c\u7528\uff1a</strong>  \u4e00\u4e9b\u901a\u7528\u670d\u52a1\uff0c\u4f8b\u5982\uff1a\u7528\u6237\u6d88\u606f\u3001HTTP\u6570\u636e\u8bbf\u95ee\u3002</p><hr><h3 id="ShareModule">ShareModule<a onclick="window.location.hash = \'ShareModule\'" class="anchor">#</a></h3><p><strong>\u5e94</strong> \u5305\u542b\u5b9a\u4e49\uff1a</p><ul><li><p>\u5e94\u7528\u901a\u7528\u81ea\u5b9a\u4e49\u4e1a\u52a1\u7ec4\u4ef6</p></li></ul><p><strong>\u5e94</strong> \u5bfc\u5165\u6a21\u5757\uff1a</p><ul><li><p>Angular \u901a\u7528\u6a21\u5757\uff1a<code>CommonModule</code>\u3001<code>FormsModule</code>\u3001<code>RouterModule</code>\u3001<code>ReactiveFormsModule</code></p></li><li><p><code>ng-zorro-antd</code> \u57fa\u7840\u7ec4\u4ef6\u6a21\u5757</p></li><li><p><code>@delon/abc</code> \u4e1a\u52a1\u7ec4\u4ef6\u6a21\u5757</p></li><li><p>\u7b2c\u4e09\u65b9\u901a\u7528\u4f9d\u8d56\u7ec4\u4ef6\u6a21\u5757</p></li></ul><p><strong>\u5e94</strong> \u5bfc\u51fa\u6240\u6709\u5305\u542b\u7684\u6a21\u5757\u3002</p><p><strong>\u4e0d\u5e94</strong> \u6709 <code>providers</code> \u5c5e\u6027\u3002</p><p><strong>\u4f5c\u7528\uff1a</strong>  \u4e00\u4e9b\u901a\u7528\u81ea\u5b9a\u4e49\u3001\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u5b9a\u4e49\uff0c\u51cf\u5c11\u4e1a\u52a1\u6a21\u5757\u7684\u5bfc\u5165\u3002</p><hr><h3 id="\u4e1a\u52a1\u6a21\u5757">\u4e1a\u52a1\u6a21\u5757<a onclick="window.location.hash = \'\u4e1a\u52a1\u6a21\u5757\'" class="anchor">#</a></h3><p>\u4e1a\u52a1\u6a21\u5757\u5e94\u8be5\u5305\u62ec\u4e1a\u52a1\u5b9a\u4e49\u6a21\u5757\u548c\u8def\u7531\u6a21\u5757\u3002</p><p><strong>\u6a21\u5757</strong></p><p><strong>\u5e94</strong> \u5bfc\u5165\u6a21\u5757\uff1a</p><ul><li><p><code><a data-toc="SharedModule">SharedModule</a></code></p></li><li><p>\u5bf9\u5e94\u7684\u8def\u7531\u6a21\u5757</p></li></ul><p><strong>\u4e0d\u5e94</strong>\uff1a</p><ul><li><p>\u5bfc\u51fa\u4efb\u4f55\u7ec4\u4ef6</p></li><li><p>\u5c3d\u53ef\u80fd\u4e0d\u8981\u4f7f\u7528 <code>providers</code> \u5c5e\u6027</p></li></ul><p><strong>\u8def\u7531\u6a21\u5757</strong></p><p><strong>\u5e94</strong> \u53ea\u5305\u62ec\u8def\u7531\u7684 <code>import</code>\u3001<code>exports</code> \u6a21\u5757\u3002</p></article></section>',meta:{order:30,title:{"en-US":"Module Guidelines","zh-CN":"\u6a21\u5757\u6ce8\u518c\u6307\u5bfc\u539f\u5219"},type:"Other"},toc:[{id:"1)-\u5206\u7c7b\u8bf4\u660e",title:"1) \u5206\u7c7b\u8bf4\u660e",h:2},{id:"AppModule",title:"AppModule",h:3},{id:"CoreModule",title:"CoreModule",h:3},{id:"SharedModule",title:"SharedModule",h:3},{id:"2)-\u5efa\u8bae",title:"2) \u5efa\u8bae",h:2},{id:"AppModule",title:"AppModule",h:3},{id:"CoreModule",title:"CoreModule",h:3},{id:"ShareModule",title:"ShareModule",h:3},{id:"\u4e1a\u52a1\u6a21\u5757",title:"\u4e1a\u52a1\u6a21\u5757",h:3}]}},demo:!1},this.codes=[]},v=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/new-component.en-US.md","zh-CN":"docs/new-component.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>For some functional modules that may be referenced in multiple places, it is recommended to refine the management into unified management of business components. These components generally have the following characteristics:</p><ul><li><p>Only responsible for a relatively independent, stable function;</p></li><li><p>no separate routing configuration;</p></li><li><p>May be purely static, controlled only by parameters passed by the parent component (usually a page).</p></li></ul><p>Let\'s take a simple static component as an example. Suppose your app often needs to display images. These images are fixed in width, have a gray background and a certain padding, and have text descriptions, like the following:</p><p><img width=400 src="https://gw.alipayobjects.com/zos/rmsportal/vcRltFiKfHBHFrUcsTtW.png" /></p><p>You can do this with a component that has a default style and can receive the parameters passed by the parent component for display.</p><h2 id="Create-a-new-file">Create a new file<a onclick="window.location.hash = \'Create-a-new-file\'" class="anchor">#</a></h2><p>Create a new folder named <code>components</code> under <code>src/app/shared</code>. Create folder called <code>image-wrapper</code> and component file. If required add ts files <code>index.ts</code> and style files <code>index.less</code>. Provide <code>README.md</code> for component API descriptions in this folder.</p><blockquote><p>When using components, the default is to look for the export object in <code>index.ts</code>. If your component is more complex, you can split it into multiple files, and finally unify the export in <code>index.ts</code>, like this:</p><pre class="hljs language-ts"><code>// main.component.ts\nexport class MainComponent {}\n\n// sub.component.ts\nexport class SubComponent {}\n\n// index.ts\nexport MainComponent from \'./main.component\';\nexport SubComponent from \'./sub.component\';</code></pre></blockquote><p>Your code is probably like this:</p><pre class="hljs language-ts"><code>// index.ts\nimport { Component, Input } from \'@angular/core\';\n\n@Component({\n  selector: \'image-wrapper\',\n  template: `\n    &lt;div [ngStyle]="style"&gt;\n      &lt;img class="img" [src]="src" [alt]="desc" /&gt;\n      &lt;div *ngIf="desc" class="desc"&gt;{{ desc }}&lt;/div&gt;\n    &lt;/div&gt;\n  `,\n  styleUrls: [ \'./index.less\' ]\n})\nexport class ImageWrapperComponent {\n  @Input() style: { [key: string]: string };\n  @Input() src: string;\n  @Input() desc: string;\n}</code></pre><pre class="hljs language-less"><code>// index.less\n:host {\n  padding: 0 20px 8px;\n  background: #f2f4f5;\n  width: 400px;\n  margin: 0 auto;\n  text-align: center;\n\n  ::ng-deep {\n    .img {\n      vertical-align: middle;\n      max-width: calc(100% - 32px);\n      margin: 2.4em 1em;\n      box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);\n    }\n  }\n}</code></pre><p>The components are built here.</p><h2 id="Register">Register<a onclick="window.location.hash = \'Register\'" class="anchor">#</a></h2><p>Once the component is created, you need to import the component into <code>SharedModule</code> so that all submodules can use it.</p><pre class="hljs language-ts"><code>// shared.module.ts\n\n// #region your componets & directives\nimport { ImageWrapperComponent } from \'./image-wrapper\';\nconst COMPONENTS = [\n  ImageWrapperComponent\n];\nconst DIRECTIVES = [];\n// #endregion</code></pre><h2 id="Use">Use<a onclick="window.location.hash = \'Use\'" class="anchor">#</a></h2><p>Where you want to use this component, just follow the component-defined API input parameters and use it directly:</p><pre class="hljs language-html"><code>&lt;image-wrapper\n  src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"\n  desc="schematic-diagram"&gt;&lt;/image-wrapper&gt;</code></pre></article></section>',meta:{order:20,title:{"en-US":"New Component","zh-CN":"\u65b0\u589e\u4e1a\u52a1\u7ec4\u4ef6"},type:"Dev"},toc:[{id:"Create-a-new-file",title:"Create a new file",h:2},{id:"Register",title:"Register",h:2},{id:"Use",title:"Use",h:2}]},"zh-CN":{content:'<section class="markdown"><article><p>\u5bf9\u4e8e\u4e00\u4e9b\u53ef\u80fd\u88ab\u591a\u5904\u5f15\u7528\u7684\u529f\u80fd\u6a21\u5757\uff0c\u5efa\u8bae\u63d0\u70bc\u6210\u4e1a\u52a1\u7ec4\u4ef6\u7edf\u4e00\u7ba1\u7406\u3002\u8fd9\u4e9b\u7ec4\u4ef6\u4e00\u822c\u6709\u4ee5\u4e0b\u7279\u5f81\uff1a</p><ul><li><p>\u53ea\u8d1f\u8d23\u4e00\u5757\u76f8\u5bf9\u72ec\u7acb\uff0c\u7a33\u5b9a\u7684\u529f\u80fd\uff1b</p></li><li><p>\u6ca1\u6709\u5355\u72ec\u7684\u8def\u7531\u914d\u7f6e\uff1b</p></li><li><p>\u53ef\u80fd\u662f\u7eaf\u9759\u6001\u7684\uff0c\u4ec5\u53d7\u7236\u7ec4\u4ef6\uff08\u901a\u5e38\u662f\u4e00\u4e2a\u9875\u9762\uff09\u4f20\u9012\u7684\u53c2\u6570\u63a7\u5236\u3002</p></li></ul><p>\u4e0b\u9762\u4ee5\u4e00\u4e2a\u7b80\u5355\u7684\u9759\u6001\u7ec4\u4ef6\u4e3a\u4f8b\u8fdb\u884c\u4ecb\u7ecd\u3002\u5047\u8bbe\u4f60\u7684\u5e94\u7528\u4e2d\u7ecf\u5e38\u9700\u8981\u5c55\u73b0\u56fe\u7247\uff0c\u8fd9\u4e9b\u56fe\u7247\u5bbd\u5ea6\u56fa\u5b9a\uff0c\u6709\u4e00\u4e2a\u7070\u8272\u7684\u80cc\u666f\u548c\u4e00\u5b9a\u7684\u5185\u8fb9\u8ddd\uff0c\u6709\u6587\u5b57\u4ecb\u7ecd\uff0c\u5c31\u50cf\u4e0b\u56fe\u8fd9\u6837\uff1a</p><p><img width=400 src="https://gw.alipayobjects.com/zos/rmsportal/vcRltFiKfHBHFrUcsTtW.png" /></p><p>\u4f60\u53ef\u4ee5\u7528\u4e00\u4e2a\u7ec4\u4ef6\u6765\u5b9e\u73b0\u8fd9\u4e00\u529f\u80fd\uff0c\u5b83\u6709\u9ed8\u8ba4\u7684\u6837\u5f0f\uff0c\u540c\u65f6\u53ef\u4ee5\u63a5\u6536\u7236\u7ec4\u4ef6\u4f20\u9012\u7684\u53c2\u6570\u8fdb\u884c\u5c55\u793a\u3002</p><h2 id="\u65b0\u5efa\u6587\u4ef6">\u65b0\u5efa\u6587\u4ef6<a onclick="window.location.hash = \'\u65b0\u5efa\u6587\u4ef6\'" class="anchor">#</a></h2><p>\u5728 <code>src/app/shared/components</code> \u4e0b\u65b0\u5efa\u4e00\u4e2a\u4ee5\u7ec4\u4ef6\u540d\u547d\u540d\u7684\u6587\u4ef6\u5939\uff0c\u547d\u540d\u5c3d\u91cf\u4f53\u73b0\u7ec4\u4ef6\u7684\u529f\u80fd\uff0c\u8fd9\u91cc\u5c31\u53eb <code>image-wrapper</code>\u3002\u5728\u6b64\u6587\u4ef6\u5939\u4e0b\u65b0\u589e ts \u6587\u4ef6\u3001\u6837\u5f0f\u6587\u4ef6\uff08\u5982\u679c\u9700\u8981\uff09\u53ca\u7ec4\u4ef6API\u8bf4\u660e\uff0c\u547d\u540d\u4e3a <code>index.ts</code>\u3001<code>index.less</code>\u548c<code>README.md</code>\u3002</p><blockquote><p>\u5728\u4f7f\u7528\u7ec4\u4ef6\u65f6\uff0c\u9ed8\u8ba4\u4f1a\u5728 <code>index.ts</code> \u4e2d\u5bfb\u627e export \u7684\u5bf9\u8c61\uff0c\u5982\u679c\u4f60\u7684\u7ec4\u4ef6\u6bd4\u8f83\u590d\u6742\uff0c\u53ef\u4ee5\u5206\u4e3a\u591a\u4e2a\u6587\u4ef6\uff0c\u6700\u540e\u5728 <code>index.ts</code> \u4e2d\u7edf\u4e00 export\uff0c\u5c31\u50cf\u8fd9\u6837\uff1a</p><pre class="hljs language-ts"><code>// main.component.ts\nexport class MainComponent {}\n\n// sub.component.ts\nexport class SubComponent {}\n\n// index.ts\nexport MainComponent from \'./main.component\';\nexport SubComponent from \'./sub.component\';</code></pre></blockquote><p>\u4f60\u7684\u4ee3\u7801\u5927\u6982\u662f\u8fd9\u4e2a\u6837\u5b50\uff1a</p><pre class="hljs language-ts"><code>// index.ts\nimport { Component, Input } from \'@angular/core\';\n\n@Component({\n  selector: \'image-wrapper\',\n  template: `\n    &lt;div [ngStyle]="style"&gt;\n      &lt;img class="img" [src]="src" [alt]="desc" /&gt;\n      &lt;div *ngIf="desc" class="desc"&gt;{{ desc }}&lt;/div&gt;\n    &lt;/div&gt;\n  `,\n  styleUrls: [ \'./index.less\' ]\n})\nexport class ImageWrapperComponent {\n  @Input() style: { [key: string]: string };\n  @Input() src: string;\n  @Input() desc: string;\n}</code></pre><pre class="hljs language-less"><code>// index.less\n:host {\n  padding: 0 20px 8px;\n  background: #f2f4f5;\n  width: 400px;\n  margin: 0 auto;\n  text-align: center;\n\n  ::ng-deep {\n    .img {\n      vertical-align: middle;\n      max-width: calc(100% - 32px);\n      margin: 2.4em 1em;\n      box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);\n    }\n  }\n}</code></pre><p>\u5230\u8fd9\u513f\u7ec4\u4ef6\u5c31\u5efa\u597d\u4e86\u3002</p><h2 id="\u6ce8\u518c">\u6ce8\u518c<a onclick="window.location.hash = \'\u6ce8\u518c\'" class="anchor">#</a></h2><p>\u7ec4\u4ef6\u521b\u5efa\u597d\u540e\uff0c\u9700\u8981\u5c06\u7ec4\u4ef6\u5bfc\u5165 <code>SharedModule</code> \u4e2d\uff0c\u8fd9\u6837\u6240\u6709\u5b50\u6a21\u5757\u90fd\u53ef\u4ee5\u4f7f\u7528\u5230\u8be5\u7ec4\u4ef6\u3002</p><pre class="hljs language-ts"><code>// shared.module.ts\n\n// #region your componets & directives\nimport { ImageWrapperComponent } from \'./image-wrapper\';\nconst COMPONENTS = [\n  ImageWrapperComponent\n];\nconst DIRECTIVES = [];\n// #endregion</code></pre><h2 id="\u4f7f\u7528">\u4f7f\u7528<a onclick="window.location.hash = \'\u4f7f\u7528\'" class="anchor">#</a></h2><p>\u5728\u8981\u4f7f\u7528\u8fd9\u4e2a\u7ec4\u4ef6\u7684\u5730\u65b9\uff0c\u6309\u7167\u7ec4\u4ef6\u5b9a\u4e49\u7684 API \u4f20\u5165\u53c2\u6570\uff0c\u76f4\u63a5\u4f7f\u7528\u5c31\u597d\uff1a</p><pre class="hljs language-html"><code>&lt;image-wrapper\n  src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"\n  desc="\u793a\u610f\u56fe"&gt;&lt;/image-wrapper&gt;</code></pre></article></section>',meta:{order:20,title:{"en-US":"New Component","zh-CN":"\u65b0\u589e\u4e1a\u52a1\u7ec4\u4ef6"},type:"Dev"},toc:[{id:"\u65b0\u5efa\u6587\u4ef6",title:"\u65b0\u5efa\u6587\u4ef6",h:2},{id:"\u6ce8\u518c",title:"\u6ce8\u518c",h:2},{id:"\u4f7f\u7528",title:"\u4f7f\u7528",h:2}]}},demo:!1},this.codes=[]},_=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/new-page.en-US.md","zh-CN":"docs/new-page.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>Angular renders a page in a component tree, the actual development is to organize the code in a module tree to make it better to resuse code. For <strong>module granularity</strong> depends on the requirements, ng-alain is positioned in the middle of the front-end. Therefore, it is recommended to organize your code structure from a business perspective.</p><p>NG-ALAIN provides a very rich set of Schematics templates to quickly create templates and pages that match NG-ALAIN features, as well as a variety of pluggable <a href="/cli/plugin" data-url="/cli/plugin">plugins</a>.</p><blockquote><p>Additionally: NG-ALAIN is a standard Angular CLI project, you can still use the default command line.</p></blockquote><h2 id="First,-the-module">First, the module<a onclick="window.location.hash = \'First,-the-module\'" class="anchor">#</a></h2><p>To create a page, you need to create a module first. If you need a system to set the relevant module, execute the command:</p><pre class="hljs language-bash"><code>ng g ng-alain:module sys</code></pre><p>The CLI will automatically create <code>sys.module.ts</code> and <code>sys-routing.module.ts</code> files under <code>src/app/routes/sys</code>, the former is the system setup module component definition file; the latter is the system setup module routing Configuration file. Of course, in order to make the module contact with the main module, you need to register the new business module in the <code>src/app/routes/routes-routing.module.ts</code> file:</p><pre class="hljs language-ts"><code>{\n  path: \'\',\n  component: LayoutDefaultComponent,\n  children: [\n    { path: \'sys\', loadChildren: \'./sys/sys.module#SysModule\' }\n  ]\n}</code></pre><p>This way, you can safely start developing business pages like menu management, logging, system configuration, etc. in the <code>sys</code> directory.</p><h2 id="Second,-the-page">Second, the page<a onclick="window.location.hash = \'Second,-the-page\'" class="anchor">#</a></h2><p>Use the <code>ng generate</code> (abbreviated as: <code>ng g</code>) command to create a log list page in the <code>sys</code> directory:</p><pre class="hljs language-bash"><code>ng g ng-alain:list log -m=sys</code></pre><blockquote><p>See <a href="/cli" data-url="/cli">Command Line Tools</a> for more information.</p></blockquote><p>Finally, you can access the <a target="_blank" href="//localhost:4200/#/sys/log" data-url="//localhost:4200/#/sys/log">Log</a> page.</p><p>Of course, the log may be a very rich piece of information, you can add a view page opened in a modal box to display more details.</p><pre class="hljs language-bash"><code>ng g ng-alain:view view -m=sys -t=log</code></pre><p><code>-t=log</code> indicates that you want to put the created file under <code>sys/log/view</code>.</p><h2 id="Third,-IDE">Third, IDE<a onclick="window.location.hash = \'Third,-IDE\'" class="anchor">#</a></h2><p>In addition to the cli command line provided by ng-alain, it is recommended to use the <a target="_blank" href="https://code.visualstudio.com/" data-url="https://code.visualstudio.com/">Visual Studio Code</a> IDE, because ng-alain adds some extra features to VSCode to better help you. Development.</p><blockquote><p>Or use the <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-extension-pack" data-url="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-extension-pack">NG-ALAIN Extension Pack</a> suite directly.</p></blockquote><h3 id="Code-fragment">Code fragment<a onclick="window.location.hash = \'Code-fragment\'" class="anchor">#</a></h3><ul><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode">NG-ALAIN Snippets</a></p></li></ul><h3 id="Code-style">Code style<a onclick="window.location.hash = \'Code-style\'" class="anchor">#</a></h3><ul><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier - Code formatter</a></p></li><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig" data-url="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig">EditorConfig for VS Code</a></p></li></ul><h3 id="Code-comment">Code comment<a onclick="window.location.hash = \'Code-comment\'" class="anchor">#</a></h3><ul><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=joelday.docthis" data-url="https://marketplace.visualstudio.com/items?itemName=joelday.docthis">Document This</a></p></li></ul><h3 id="Class-style-smart-reminder">Class style smart reminder<a onclick="window.location.hash = \'Class-style-smart-reminder\'" class="anchor">#</a></h3><p>ng-alain has a lot of built-in toolkit styles (<a href="/theme/tools" data-url="/theme/tools">API</a>), and the following plugins can be installed directly into the HTML template.</p><ul><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode">NG-ALAIN Snippets</a></p></li></ul><h3 id="Other">Other<a onclick="window.location.hash = \'Other\'" class="anchor">#</a></h3><ul><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete" data-url="https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete">Path Autocomplete</a></p></li><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments" data-url="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments">Better Comments</a></p></li></ul></article></section>',meta:{order:10,title:{"en-US":"New Page","zh-CN":"\u65b0\u589e\u9875\u9762"},type:"Dev"},toc:[{id:"First,-the-module",title:"First, the module",h:2},{id:"Second,-the-page",title:"Second, the page",h:2},{id:"Third,-IDE",title:"Third, IDE",h:2},{id:"Code-fragment",title:"Code fragment",h:3},{id:"Code-style",title:"Code style",h:3},{id:"Code-comment",title:"Code comment",h:3},{id:"Class-style-smart-reminder",title:"Class style smart reminder",h:3},{id:"Other",title:"Other",h:3}]},"zh-CN":{content:'<section class="markdown"><article><p>Angular \u867d\u7136\u662f\u4ee5\u7ec4\u4ef6\u6811\u6765\u6e32\u67d3\u4e00\u4e2a\u9875\u9762\uff0c\u7136\u540e\u5b9e\u9645\u5f00\u53d1\u662f\u4ee5\u4e00\u79cd\u6a21\u5757\u6811\u6765\u7ec4\u7ec7\u4ee3\u7801\uff0c\u4f7f\u5176\u80fd\u66f4\u597d\u5730<strong>\u4ee3\u7801\u590d\u7528</strong>\u3002\u800c\u5bf9\u4e8e<strong>\u6a21\u5757\u7c92\u5ea6</strong>\u53d6\u51b3\u4e8e\u9700\u6c42\uff0cng-alain\u7684\u5b9a\u4f4d\u5728\u4e8e\u4e2d\u53f0\u524d\u7aef\uff0c\u56e0\u6b64\uff0c\u6bd4\u8f83\u5efa\u8bae\u4ece\u4e1a\u52a1\u89d2\u5ea6\u51fa\u53d1\u7ec4\u7ec7\u4f60\u7684\u4ee3\u7801\u7ed3\u6784\u3002</p><p>NG-ALAIN \u63d0\u4f9b\u4e00\u5957\u975e\u5e38\u4e30\u5bcc\u7684 Schematics \u6a21\u677f\uff0c\u53ef\u4ee5\u5feb\u901f\u521b\u5efa\u7b26\u5408 NG-ALAIN \u7279\u70b9\u7684\u6a21\u677f\u548c\u9875\u9762\uff1b\u540c\u65f6\u5305\u542b\u591a\u79cd\u53ef\u63d2\u62d4<a href="/cli/plugin" data-url="/cli/plugin">\u63d2\u4ef6</a>\u3002</p><blockquote><p>\u53e6\uff1aNG-ALAIN \u662f\u4e00\u4e2a\u6807\u51c6\u7684 Angular CLI \u9879\u76ee\uff0c\u4f60\u4f9d\u7136\u53ef\u4ee5\u4f7f\u7528\u9ed8\u8ba4\u7684\u6240\u6709\u547d\u4ee4\u884c\u3002</p></blockquote><h2 id="\u4e00\u3001\u6a21\u5757">\u4e00\u3001\u6a21\u5757<a onclick="window.location.hash = \'\u4e00\u3001\u6a21\u5757\'" class="anchor">#</a></h2><p>\u8981\u521b\u5efa\u4e00\u4e2a\u9875\u9762\u9700\u8981\u5148\u521b\u5efa\u4e00\u4e2a\u6a21\u5757\u5f00\u59cb\uff0c\u5047\u5982\u9700\u8981\u4e00\u4e2a\u7cfb\u7edf\u8bbe\u7f6e\u76f8\u5173\u7684\u6a21\u5757\uff0c\u6267\u884c\u547d\u4ee4\uff1a</p><pre class="hljs language-bash"><code>ng g ng-alain:module sys</code></pre><p>CLI \u4f1a\u81ea\u52a8\u5728 <code>src/app/routes/sys</code> \u4e0b\u521b\u5efa <code>sys.module.ts</code> \u548c <code>sys-routing.module.ts</code> \u6587\u4ef6\uff0c\u524d\u8005\u662f\u7cfb\u7edf\u8bbe\u7f6e\u6a21\u5757\u7ec4\u4ef6\u5b9a\u4e49\u6587\u4ef6\uff1b\u540e\u8005\u662f\u7cfb\u7edf\u8bbe\u7f6e\u6a21\u5757\u8def\u7531\u914d\u7f6e\u6587\u4ef6\u3002\u5f53\u7136\u4e3a\u4e86\u4f7f\u6a21\u5757\u8ddf\u4e3b\u6a21\u5757\u4ea7\u751f\u8054\u7cfb\uff0c\u8fd8\u9700\u8981\u81f3 <code>src/app/routes/routes-routing.module.ts</code> \u6587\u4ef6\u5185\u6ce8\u518c\u65b0\u5efa\u7684\u4e1a\u52a1\u6a21\u5757\uff1a</p><pre class="hljs language-ts"><code>{\n  path: \'\',\n  component: LayoutDefaultComponent,\n  children: [\n    { path: \'sys\', loadChildren: \'./sys/sys.module#SysModule\' }\n  ]\n}</code></pre><p>\u8fd9\u6837\uff0c\u4f60\u53ef\u4ee5\u653e\u5fc3\u5728 <code>sys</code> \u76ee\u5f55\u4e2d\u5f00\u59cb\u5f00\u53d1\u50cf\u83dc\u5355\u7ba1\u7406\u3001\u65e5\u5fd7\u3001\u7cfb\u7edf\u914d\u7f6e\u7b49\u4e1a\u52a1\u9875\u9762\u3002</p><h2 id="\u4e8c\u3001\u9875\u9762">\u4e8c\u3001\u9875\u9762<a onclick="window.location.hash = \'\u4e8c\u3001\u9875\u9762\'" class="anchor">#</a></h2><p>\u5229\u7528 <code>ng generate</code>\uff08\u53ef\u7b80\u5199\u4e3a\uff1a<code>ng g</code>\uff09 \u547d\u4ee4\u5728 <code>sys</code> \u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2a\u65e5\u5fd7\u5217\u8868\u9875\uff1a</p><pre class="hljs language-bash"><code>ng g ng-alain:list log -m=sys</code></pre><blockquote><p>\u4e86\u89e3\u66f4\u591a\u8bf7\u53c2\u8003<a href="/cli" data-url="/cli">\u547d\u4ee4\u884c\u5de5\u5177</a>\u3002</p></blockquote><p>\u6700\u7ec8\uff0c\u4f60\u53ef\u4ee5\u8bbf\u95ee <a target="_blank" href="//localhost:4200/#/sys/log" data-url="//localhost:4200/#/sys/log">\u65e5\u5fd7</a> \u9875\u9762\u3002</p><p>\u5f53\u7136\u65e5\u5fd7\u53ef\u80fd\u662f\u4e00\u4e2a\u975e\u5e38\u4e30\u5bcc\u7684\u4fe1\u606f\uff0c\u53ef\u4ee5\u589e\u52a0\u4e00\u4e2a\u4ee5\u6a21\u6001\u6846\u6253\u5f00\u7684\u67e5\u770b\u9875\u6765\u663e\u793a\u66f4\u591a\u8be6\u60c5\u3002</p><pre class="hljs language-bash"><code>ng g ng-alain:view view -m=sys -t=log</code></pre><p><code>-t=log</code> \u8868\u793a\u5e0c\u671b\u628a\u521b\u5efa\u7684\u6587\u4ef6\u653e\u8fdb\u81f3 <code>sys/log/view</code> \u4e0b\u9762\u3002</p><h2 id="\u4e09\u3001IDE">\u4e09\u3001IDE<a onclick="window.location.hash = \'\u4e09\u3001IDE\'" class="anchor">#</a></h2><p>\u9664\u4e86 ng-alain \u63d0\u4f9b\u7684 cli \u547d\u4ee4\u884c\u4ee5\u5916\uff0c\u63a8\u8350\u4f7f\u7528 <a target="_blank" href="https://code.visualstudio.com/" data-url="https://code.visualstudio.com/">Visual Studio Code</a> IDE\uff0c\u56e0\u4e3a ng-alain \u9488\u5bf9 VSCode \u589e\u52a0\u4e00\u4e9b\u989d\u5916\u7684\u7279\u6027\uff0c\u53ef\u4ee5\u66f4\u597d\u7684\u5e2e\u52a9\u4f60\u5f00\u53d1\u3002</p><blockquote><p>\u6216\u8005\u76f4\u63a5\u4f7f\u7528 <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-extension-pack" data-url="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-extension-pack">NG-ALAIN Extension Pack</a> \u5957\u4ef6\u3002</p></blockquote><h3 id="\u4ee3\u7801\u7247\u65ad">\u4ee3\u7801\u7247\u65ad<a onclick="window.location.hash = \'\u4ee3\u7801\u7247\u65ad\'" class="anchor">#</a></h3><ul><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode">NG-ALAIN Snippets</a></p></li></ul><h3 id="\u4ee3\u7801\u98ce\u683c">\u4ee3\u7801\u98ce\u683c<a onclick="window.location.hash = \'\u4ee3\u7801\u98ce\u683c\'" class="anchor">#</a></h3><ul><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier - Code formatter</a></p></li><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig" data-url="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig">EditorConfig for VS Code</a></p></li></ul><h3 id="\u4ee3\u7801\u6ce8\u91ca">\u4ee3\u7801\u6ce8\u91ca<a onclick="window.location.hash = \'\u4ee3\u7801\u6ce8\u91ca\'" class="anchor">#</a></h3><ul><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=joelday.docthis" data-url="https://marketplace.visualstudio.com/items?itemName=joelday.docthis">Document This</a></p></li></ul><h3 id="Class\u6837\u5f0f\u667a\u80fd\u63d0\u9192">Class\u6837\u5f0f\u667a\u80fd\u63d0\u9192<a onclick="window.location.hash = \'Class\u6837\u5f0f\u667a\u80fd\u63d0\u9192\'" class="anchor">#</a></h3><p>ng-alain \u5185\u7f6e\u4e86\u5927\u91cf\u7684\u5de5\u5177\u96c6\u6837\u5f0f\uff08<a href="/theme/tools" data-url="/theme/tools">API</a>\uff09\uff0c\u5b89\u88c5\u4ee5\u4e0b\u63d2\u4ef6\u53ef\u4ee5\u76f4\u63a5\u5728HTML\u6a21\u677f\u91cc\u76f4\u63a5\u8bbf\u95ee\u5230\u5b83\u4eec\u3002</p><ul><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode">NG-ALAIN Snippets</a></p></li></ul><h3 id="\u5176\u5b83">\u5176\u5b83<a onclick="window.location.hash = \'\u5176\u5b83\'" class="anchor">#</a></h3><ul><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete" data-url="https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete">Path Autocomplete</a></p></li><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments" data-url="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments">Better Comments</a></p></li></ul></article></section>',meta:{order:10,title:{"en-US":"New Page","zh-CN":"\u65b0\u589e\u9875\u9762"},type:"Dev"},toc:[{id:"\u4e00\u3001\u6a21\u5757",title:"\u4e00\u3001\u6a21\u5757",h:2},{id:"\u4e8c\u3001\u9875\u9762",title:"\u4e8c\u3001\u9875\u9762",h:2},{id:"\u4e09\u3001IDE",title:"\u4e09\u3001IDE",h:2},{id:"\u4ee3\u7801\u7247\u65ad",title:"\u4ee3\u7801\u7247\u65ad",h:3},{id:"\u4ee3\u7801\u98ce\u683c",title:"\u4ee3\u7801\u98ce\u683c",h:3},{id:"\u4ee3\u7801\u6ce8\u91ca",title:"\u4ee3\u7801\u6ce8\u91ca",h:3},{id:"Class\u6837\u5f0f\u667a\u80fd\u63d0\u9192",title:"Class\u6837\u5f0f\u667a\u80fd\u63d0\u9192",h:3},{id:"\u5176\u5b83",title:"\u5176\u5b83",h:3}]}},demo:!1},this.codes=[]},C=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/performance.en-US.md","zh-CN":"docs/performance.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><h2 id="IE-Performance">IE Performance<a onclick="window.location.hash = \'IE-Performance\'" class="anchor">#</a></h2><p>NG-ALAIN has IE support enabled by default. Which adds a certain size to the package and style. If you are very concerned and don\'t need <code>IE10</code> and below support, you can adjust the two configurations:</p><pre class="hljs language-null"><code>// browserslist\n> 0.5%\nlast 2 versions\nFirefox ESR\nnot dead\n# IE 9-11\nnot ie <= 10\nnot ie_mob <= 10</code></pre><h2 id="Envelope-size-optimization">Envelope size optimization<a onclick="window.location.hash = \'Envelope-size-optimization\'" class="anchor">#</a></h2><p>Divided into JavaScript script files and CSS files. The following only describes the script part. For the CSS file, please refer to <a href="/theme/performance" data-url="/theme/performance">Optimize Theme System</a>.</p><p><strong>Note:</strong> It is recommended to always prioritize <strong>business, optimize to the post-</strong> criteria, and have some understanding of NG-ALAIN before starting to optimize. The optimization scheme in this chapter will change with the change of the version. Please pay attention to the details.</p><h3 id="Structure-description">Structure description<a onclick="window.location.hash = \'Structure-description\'" class="anchor">#</a></h3><p>In general, there are two files that are larger after the build: <code>scripts.js</code> and <code>main.js</code>, and our optimization is mainly for these two items.</p><p><strong>scripts.js</strong></p><p>It comes from a collection of <code>scripts</code> nodes of <code>angular.json</code>, so the size of this file depends on the size of the third-party component referenced by the <code>scripts</code> node. Like <code>@delon/chart</code> is dependent on G2 and its own G2 is also a large package size. So by default, the scripts that G2 depends on are treated as third-party components attached to <code>scripts</code>.</p><p>In general, you should put it under <code>scripts</code> when you are using non-Angular third-party components.</p><p><strong>main.js</strong></p><p>Using <code>ng build</code> by default will package all <code>@angular/*</code>, <code>ng-zorro-antd</code>, <code>@delon/*</code> and some third-party Angular components. Unless you use the <code>--vendor-chunk</code> parameter to separate these classes library.</p><h3 id="Optimization-object">Optimization object<a onclick="window.location.hash = \'Optimization-object\'" class="anchor">#</a></h3><p>We know that the resource file packaged by Angular Cli will contain the hashing value of the file. Which is like the unique identifier of the file. If the module is not modified, no new hashing value will be generated. This ensures that after the user downloads the resource for the first time. No matter how we build the user again, there is no need to download it again.</p><blockquote><p>In fact, Angular Cli defaults to <code>--vendor-chunk</code>. The main factor is that these <code>@angular/*</code> are very fast relative to iteration.</p></blockquote><p>According to NG-ALAIN\'s <a href="/docs/module" data-url="/docs/module">module registration guidelines</a>, we generate two core entries that determine the size of the <code>main.js</code> package: <code>delon.module.ts</code> and <code>shared.module.ts</code>.</p><p>The only way to reduce our size is to import only the modules we need. By default we don\'t do this. The main factor is that it adds a lot of extra code and it is limited by NG-ZORRO. Support for the import of secondary modules, so this optimization is not very obvious.</p><h4 id="ng-zorro-antd">ng-zorro-antd<a onclick="window.location.hash = \'ng-zorro-antd\'" class="anchor">#</a></h4><p>Sub-module import is not supported, so the details are skipped.</p><h4 id="@delon">@delon<a onclick="window.location.hash = \'@delon\'" class="anchor">#</a></h4><p><code>@delon</code> class library contains layers, each of which contains possibly two-level modules (such as the <code>abc</code> class library, which contains dozens of different component modules), all of which are in <code>delon.module.ts</code> and <code>Shared.module.ts</code>.</p><p>For example, when you explicitly only need <code>@delon/abc</code> several components, you only need to import these modules.</p><pre class="hljs language-ts"><code>// Register the required modules in delon.module.ts\nimport { STModule } from \'@delon/abc/table\';\n\nconst ABC_ROOT_MODULES = [ STModule.forRoot() ];\n\n// Import and export in share.module.ts to ensure all lazy modules are valid\nconst ABC_MODULES = [ STModule ];\n@NgModule({\n  imports: ...ABC_MODULES,\n  exports: ...ABC_MODULES,\n})\nexport class SharedModule {}</code></pre><h3 id="Conclusion">Conclusion<a onclick="window.location.hash = \'Conclusion\'" class="anchor">#</a></h3><p>After NG-ZORRO provides better optimization support, we will release <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/684" data-url="https://github.com/ng-alain/ng-alain/pull/684">#684</a> and hope to have a better package size. Expected results.</p></article></section>',meta:{order:80,title:{"en-US":"Performance","zh-CN":"\u4f18\u5316"},type:"Advance"},toc:[{id:"IE-Performance",title:"IE Performance",h:2},{id:"Envelope-size-optimization",title:"Envelope size optimization",h:2},{id:"Structure-description",title:"Structure description",h:3},{id:"Optimization-object",title:"Optimization object",h:3},{id:"Conclusion",title:"Conclusion",h:3}]},"zh-CN":{content:'<section class="markdown"><article><h2 id="IE-\u4f18\u5316">IE \u4f18\u5316<a onclick="window.location.hash = \'IE-\u4f18\u5316\'" class="anchor">#</a></h2><p>NG-ALAIN \u9ed8\u8ba4\u5f00\u542f\u4e86\u5bf9 IE \u7684\u652f\u6301\uff0c\u8fd9\u7ed9\u5305\u4f53\u53ca\u6837\u5f0f\u589e\u52a0\u4e86\u4e00\u5b9a\u5927\u5c0f\uff0c\u5018\u82e5\u4f60\u5f88\u5728\u610f\u5e76\u4e14\u4e0d\u9700\u8981 <code>IE10</code> \u53ca\u4ee5\u4e0b\u7684\u7248\u672c\u652f\u6301\u7684\u8bdd\uff1a</p><pre class="hljs language-null"><code>// browserslist\n> 0.5%\nlast 2 versions\nFirefox ESR\nnot dead\n# IE 9-11\nnot ie <= 10\nnot ie_mob <= 10</code></pre><h2 id="\u5305\u4f53\u5927\u5c0f\u4f18\u5316">\u5305\u4f53\u5927\u5c0f\u4f18\u5316<a onclick="window.location.hash = \'\u5305\u4f53\u5927\u5c0f\u4f18\u5316\'" class="anchor">#</a></h2><p>\u5206\u4e3aJavaScript\u811a\u672c\u6587\u4ef6\u548cCSS\u6587\u4ef6\uff0c\u4ee5\u4e0b\u53ea\u63cf\u8ff0\u811a\u672c\u90e8\u5206\uff0c\u6709\u5173CSS\u6587\u4ef6\u8bf7\u53c2\u8003<a href="/theme/performance" data-url="/theme/performance">\u4f18\u5316\u4e3b\u9898\u7cfb\u7edf</a>\u3002</p><p><strong>\u6ce8\u610f\uff1a</strong> \u5efa\u8bae\u59cb\u7ec8\u4ee5<strong>\u4e1a\u52a1\u4f18\u5148\uff0c\u4f18\u5316\u4e3a\u540e</strong>\u7684\u51c6\u5219\uff0c\u4e14\u5728\u5f00\u59cb\u524d\u5bf9 NG-ALAIN \u6709\u4e00\u5b9a\u4e86\u89e3\u540e\u518d\u8fdb\u884c\u4f18\u5316\u3002\u672c\u7ae0\u8282\u7684\u4f18\u5316\u65b9\u6848\u4f1a\u968f\u7740\u7248\u672c\u7684\u66f4\u8fed\u6709\u6240\u53d8\u52a8\uff0c\u6709\u5173\u7ec6\u8282\u8bf7\u6301\u7eed\u5173\u6ce8\u3002</p><h3 id="\u7ed3\u6784\u8bf4\u660e">\u7ed3\u6784\u8bf4\u660e<a onclick="window.location.hash = \'\u7ed3\u6784\u8bf4\u660e\'" class="anchor">#</a></h3><p>\u4e00\u822c\u6765\u8bf4\uff0c\u6784\u5efa\u540e\u6709\u4e24\u4e2a\u6587\u4ef6\u4f1a\u6bd4\u8f83\u5927\uff1a<code>scripts.js</code> \u548c <code>main.js</code>\uff0c\u800c\u6211\u4eec\u4f18\u5316\u4e5f\u4e3b\u8981\u9488\u5bf9\u8fd9\u4e24\u9879\u3002</p><p><strong>scripts.js</strong></p><p>\u5b83\u6765\u81ea\u662f <code>angular.json</code> \u7684 <code>scripts</code> \u8282\u70b9\u7684\u96c6\u5408\uff0c\u56e0\u6b64\uff0c\u8fd9\u4e2a\u6587\u4ef6\u7684\u5927\u5c0f\u53d6\u51b3\u4e8e <code>scripts</code> \u8282\u70b9\u6240\u5f15\u7528\u7684\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u7684\u5927\u5c0f\u3002\u50cf <code>@delon/chart</code> \u662f\u4f9d\u8d56\u4e8e G2\uff0c\u672c\u8eab G2 \u4e5f\u662f\u5305\u4f53\u5927\u5c0f\u6bd4\u8f83\u5927\uff0c\u6240\u4ee5\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u628a G2 \u6240\u9700\u8981\u4f9d\u8d56\u7684\u811a\u672c\u90fd\u5f53\u4f5c\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u90fd\u4f9d\u9644\u5728 <code>scripts</code> \u4e0b\u3002</p><p>\u4e00\u822c\u6765\u8bf4\uff0c\u5f53\u4f60\u5728\u4f7f\u7528\u975e Angular \u7b2c\u4e09\u65b9\u7ec4\u4ef6\u65f6\u90fd\u5e94\u8be5\u653e\u5728 <code>scripts</code> \u4e0b\u3002</p><p><strong>main.js</strong></p><p>\u9ed8\u8ba4\u4f7f\u7528 <code>ng build</code> \u4f1a\u5c06\u6240\u6709 <code>@angular/*</code>\u3001<code>ng-zorro-antd</code>\u3001<code>@delon/*</code> \u4ee5\u53ca\u4e00\u4e9b\u7b2c\u4e09\u65b9 Angular \u7ec4\u4ef6\u90fd\u4f1a\u88ab\u6253\u5305\u8fdb\u6765\uff0c\u9664\u975e\u4f60\u4f7f\u7528 <code>--vendor-chunk</code> \u53c2\u6570\u6765\u5206\u79bb\u8fd9\u4e9b\u7c7b\u5e93\u3002</p><h3 id="\u4f18\u5316\u5bf9\u8c61">\u4f18\u5316\u5bf9\u8c61<a onclick="window.location.hash = \'\u4f18\u5316\u5bf9\u8c61\'" class="anchor">#</a></h3><p>\u6211\u4eec\u77e5\u9053\uff0cAngular Cli \u6253\u5305\u51fa\u6765\u7684\u8d44\u6e90\u6587\u4ef6\u4f1a\u5305\u542b\u8be5\u6587\u4ef6 hashing \u503c\uff0c\u5b83\u50cf\u662f\u6587\u4ef6\u7684\u552f\u4e00\u6807\u8bc6\u7801\uff0c\u82e5\u672a\u5bf9\u8be5\u6587\u4ef6\u8fdb\u884c\u6a21\u5757\u4fee\u6539\u90fd\u4e0d\u4f1a\u4ea7\u751f\u65b0\u7684 hashing \u503c\uff0c\u8fd9\u786e\u4fdd\u7528\u6237\u9996\u6b21\u4e0b\u8f7d\u8d44\u6e90\u540e\u4e0d\u7ba1\u6211\u4eec\u5982\u4f55\u518d\u6b21\u6784\u5efa\u7528\u6237\u90fd\u65e0\u987b\u518d\u4e00\u6b21\u4e0b\u8f7d\u3002</p><blockquote><p>\u4e8b\u5b9e\u4e0a\uff0cAngular Cli \u9ed8\u8ba4\u5c06 <code>--vendor-chunk</code> \u4e3b\u8981\u56e0\u7d20\u662f\u8fd9\u4e9b @angular/* \u76f8\u5bf9\u4e8e\u8fed\u4ee3\u5f88\u5feb\u3002</p></blockquote><p>\u6839\u636e NG-ALAIN \u7684<a href="/docs/module" data-url="/docs/module">\u6a21\u5757\u6ce8\u518c\u6307\u5bfc\u539f\u5219</a>\uff0c\u6211\u4eec\u4ea7\u751f\u7684\u4e24\u4e2a\u51b3\u5b9a <code>main.js</code> \u5305\u4f53\u5927\u5c0f\u7684\u6838\u5fc3\u5165\u53e3\uff1a<code>delon.module.ts</code> \u548c <code>shared.module.ts</code>\u3002</p><p>\u800c\u552f\u4e00\u80fd\u8ba9\u6211\u4eec\u51cf\u5c11\u4f53\u79ef\u7684\u529e\u6cd5\u5c31\u662f\u53ea\u5bfc\u5165\u6211\u4eec\u6240\u9700\u8981\u7684\u6a21\u5757\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u6211\u4eec\u5e76\u6ca1\u6709\u8fd9\u4e48\u505a\uff0c\u4e3b\u8981\u56e0\u7d20\u662f\u5b83\u4f1a\u589e\u52a0\u5f88\u591a\u989d\u5916\u7684\u4ee3\u7801\uff0c\u4ee5\u53ca\u53d7\u9650\u4e8e ng-zorro-antd \u76ee\u524d\u8fd8\u672a\u652f\u6301\u6b21\u7ea7\u6a21\u5757\u7684\u5bfc\u5165\uff0c\u56e0\u6b64\u8fd9\u79cd\u4f18\u5316\u5e76\u4e0d\u662f\u5f88\u660e\u663e\u3002</p><h4 id="ng-zorro-antd">ng-zorro-antd<a onclick="window.location.hash = \'ng-zorro-antd\'" class="anchor">#</a></h4><p>\u4e0d\u652f\u6301\u6b21\u7ea7\u6a21\u5757\u5bfc\u5165\uff0c\u6240\u4ee5\u7ec6\u8282\u7565\u8fc7\u3002</p><h4 id="@delon">@delon<a onclick="window.location.hash = \'@delon\'" class="anchor">#</a></h4><p>@delon \u7c7b\u5e93\u5305\u542b\u5404\u4e2a\u5c42\u9762\uff0c\u6bcf\u4e2a\u5c42\u9762\u90fd\u5305\u542b\u53ef\u80fd\u8fd8\u5305\u542b\u4e8c\u7ea7\u6a21\u5757\uff08\u4f8b\u5982 <code>abc</code> \u7c7b\u5e93\uff0c\u5305\u542b\u6570\u5341\u79cd\u4e0d\u540c\u7ec4\u4ef6\u6a21\u5757\uff09\uff0c\u6240\u6709\u8fd9\u4e00\u5207\u90fd\u5728 <code>delon.module.ts</code> \u53ca <code>shared.module.ts</code>\u3002</p><p>\u4f8b\u5982\uff0c\u5f53\u4f60\u660e\u786e\u53ea\u9700\u8981 <code>@delon/abc</code> \u82e5\u5e72\u4e2a\u7ec4\u4ef6\u65f6\uff0c\u4f60\u53ea\u9700\u8981\u5bfc\u5165\u8fd9\u4e9b\u6a21\u5757\u3002</p><pre class="hljs language-ts"><code>// \u5728 delon.module.ts \u6ce8\u518c\u9700\u8981\u7684\u6a21\u5757\nimport { STModule } from \'@delon/abc/table\';\n\nconst ABC_ROOT_MODULES = [ STModule.forRoot() ];\n\n// \u5728 share.module.ts \u5bfc\u5165\u4e0e\u5bfc\u51fa\u786e\u4fdd\u6240\u6709\u61d2\u6a21\u5757\u6709\u6548\nconst ABC_MODULES = [ STModule ];\n@NgModule({\n  imports: ...ABC_MODULES,\n  exports: ...ABC_MODULES,\n})\nexport class SharedModule {}</code></pre><h3 id="\u7ed3\u8bba">\u7ed3\u8bba<a onclick="window.location.hash = \'\u7ed3\u8bba\'" class="anchor">#</a></h3><p>\u5f85 NG-ALAIN \u63d0\u4f9b\u66f4\u597d\u7684\u4f18\u5316\u652f\u6301\u540e\uff0c\u6211\u4eec\u4f1a\u53d1\u5e03 <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/684" data-url="https://github.com/ng-alain/ng-alain/pull/684">#684</a> \u5e0c\u671b\u5bf9\u5305\u4f53\u5927\u5c0f\u6709\u66f4\u597d\u7684\u671f\u671b\u7ed3\u679c\u3002</p></article></section>',meta:{order:80,title:{"en-US":"Performance","zh-CN":"\u4f18\u5316"},type:"Advance"},toc:[{id:"IE-\u4f18\u5316",title:"IE \u4f18\u5316",h:2},{id:"\u5305\u4f53\u5927\u5c0f\u4f18\u5316",title:"\u5305\u4f53\u5927\u5c0f\u4f18\u5316",h:2},{id:"\u7ed3\u6784\u8bf4\u660e",title:"\u7ed3\u6784\u8bf4\u660e",h:3},{id:"\u4f18\u5316\u5bf9\u8c61",title:"\u4f18\u5316\u5bf9\u8c61",h:3},{id:"\u7ed3\u8bba",title:"\u7ed3\u8bba",h:3}]}},demo:!1},this.codes=[]},A=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/scaffold.en-US.md","zh-CN":"docs/scaffold.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><h2 id="Directory-Structure">Directory Structure<a onclick="window.location.hash = \'Directory-Structure\'" class="anchor">#</a></h2><p>Schematic diagram of directory structure\uff1a</p><pre class="hljs language-null"><code>\u251c\u2500\u2500 _mock                                       # Mock Data rule\n\u251c\u2500\u2500 src\n\u2502\xa0\xa0 \u251c\u2500\u2500 app\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 core                                # Core module\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 i18n\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 net\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 default.interceptor.ts      # Default HTTP interceptor\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 services\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 startup.service.ts          # Initialize project configuration\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 core.module.ts                  # Core module file\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 layout                              # Core layout\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 routes\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 **                              # Business directory\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 routes.module.ts                # Service routing module\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 routes-routing.module.ts        # Service routes registration\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 shared                              # Shared module\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 shared.module.ts                # Shared module file\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 app.component.ts                    # Root component\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 app.module.ts                       # Root module\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 delon.module.ts                     # @delon module import\n\u2502\xa0\xa0 \u251c\u2500\u2500 assets                                  # Local static resource\n\u2502\xa0\xa0 \u251c\u2500\u2500 environments                            # Environment variable configuration\n\u2502\xa0\xa0 \u251c\u2500\u2500 styles                                  # Style directory\n\u2514\u2500\u2500 \u2514\u2500\u2500 style.less                              # Style guide entry</code></pre><p>The following is a description and use of each directory and file.</p><p><strong>_mock</strong></p><p>The Mock data rules directory, if you create a project via <a href="/cli" data-url="/cli">Command Line Tools</a>, you can specify the <code>--mock</code> parameter to determine if the Mock function is required.</p><p><strong>src/app/core/core.module.ts</strong></p><p>The core module will only be imported once. Therefore, core service classes (eg, messages, data access, etc.) that are required for the entire ** business module should exist here.</p><p><strong>src/app/core/i18n</strong></p><p><a href="/docs/i18n" data-url="/docs/i18n">Internationalization</a> data loading and processing related classes. If you create a project via <a href="/cli" data-url="/cli">Command Line Tool</a>, you can specify the <code>-di</code> parameter to determine whether internationalization support is required.</p><p><strong>src/app/core/net</strong></p><p>The default interceptor, where you can handle request parameters, request exceptions, business exceptions, and so on.</p><p><strong>src/app/core/services/startup.service.ts</strong></p><p>Useful when you need to execute some remote data (eg application information, user information, etc.) before Angular launches.</p><blockquote><p>It is a simple method and returns a <code>Promise</code> object, unless Angular will abort the launch unless <code>resolve(null)</code> is explicitly executed.</p></blockquote><p><strong>src/app/layout</strong></p><p>Layout file code, refer to the page structure section.</p><p><strong>src/app/routes</strong></p><p>Business module, all your business code will be here.</p><p><strong>src/app/shared/shared.module.ts</strong></p><p>The shared module means that some third-party modules, custom components, and custom instructions that you need to use for the entire business module should exist here.</p><p><strong>src/app/delon.module.ts</strong></p><p>For the @delon series of module import collections, all modules are imported by default, and you can use the <a href="/docs/performance" data-url="/docs/performance">Optimization</a> section to further optimize on demand.</p><p><strong>src/styles/_alain-custom-variables.less</strong></p><p><strong>[<span>Do not delete</span>]</strong> You can adjust the default parameters of alain according to your needs.</p><p><strong>src/environments</strong></p><p>The application environment variable contains the following values:</p><ul><li><p><code>SERVER_URL</code> All HTTP request prefixes</p></li><li><p><code>production</code> Whether the production environment</p></li><li><p><code>useHash</code> Whether the route is useHash mode</p></li></ul><h2 id="Page-structure">Page structure<a onclick="window.location.hash = \'Page-structure\'" class="anchor">#</a></h2><p>The overall layout refers to the outermost frame structure including navigation, sidebars, content areas, footers, and so on.</p><p>At the same time, in the internal area, the layout of the block, such as form, search box, list page, etc., is required. For this, NG-ZORRO has two layout schemes:\n<a target="_blank" href="https://ng.ant.design/#/components/layout" data-url="https://ng.ant.design/#/components/layout">Layout</a> with <a target="_blank" href="https://ng.ant.design/#/components/grid" data-url="https://ng.ant.design/#/components/grid">Grid</a>\u3002</p><p>Scaffolding provides three overall layout options by default:</p><table><thead><tr><th>Type</th><th>Location</th><th>Description</th></tr></thead><tbody><tr><td>Base</td><td><a target="_blank" href="https://github.com/ng-alain/ng-alain/tree/master/src/app/layout/default" data-url="https://github.com/ng-alain/ng-alain/tree/master/src/app/layout/default">LayoutDefaultComponent</a></td><td>-</td></tr><tr><td>Full screen</td><td><a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/layout/fullscreen" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/layout/fullscreen">LayoutFullScreenComponent</a></td><td>-</td></tr><tr><td>User authorization</td><td><a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/layout/passport" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/layout/passport">LayoutPassportComponent</a></td><td>-</td></tr></tbody></table><h3 id="Basic-layout">Basic layout<a onclick="window.location.hash = \'Basic-layout\'" class="anchor">#</a></h3><p>In the upper-left-right layout mode, it is applied to the development of the <strong>business page</strong>. Its specification details:</p><ul><li><p>Top area height <code>64px</code>\uff08parameter\uff1a<code>@header-hg</code>\uff09</p></li><li><p>Side area width <code>200px</code>\uff08parameter\uff1a<code>@aside-wd</code>\uff09</p></li><li><p>Hide side navigation when the screen is below <code>1140px</code> wide</p></li><li><p>Turn the side navigation to the <code>fixed</code> state when the screen is below <code>1140px</code> wide</p></li><li><p>Mainly includes a <a href="/components/sidebar-nav" data-url="/components/sidebar-nav">sidebar-nav (click to view API)</a> component</p></li></ul><blockquote><p>Parameters are adjustable as needed by the <code>src/styles/_alain-custom-variables.less</code> file.</p></blockquote><p><strong>Top area</strong></p><p>location\uff1a<em>src/app/layout/default/header</em></p><p>Scaffolding provides some regular top-level components by default, which are stored in the <em>components</em> directory. At the same time <code>@delon/abc</code> also provides several top components (eg\uff1a<a href="/components/notice-icon" data-url="/components/notice-icon">notice-icon</a> Notification menu component. You can build it yourself or develop it yourself based on the components provided.</p><blockquote><p>Scaffolding supports responsive layout. For the top area, you may need to hide some components under the small screen, so you can add <code>hidden-xs</code> to the corresponding DOM node to automatically hide when the screen is smaller than <code>768px</code>.</p></blockquote><p><strong>Side area</strong></p><p>location\uff1a<em>src/app/layout/default/sidebar</em></p><p>Only one user information and main menu are included. The main menu is a <a href="/components/sidebar-nav" data-url="/components/sidebar-nav">sidebar-nav</a> component. For details, please refer to <a href="/components/sidebar-nav" data-url="/components/sidebar-nav">Business Components</a>.</p><p><strong>Internal area</strong></p><p>The content area is the business page area, the specification details\uff1a</p><ul><li><p>Content distance page standard, side, right scroll bar, bottom, this margin is based on a standard Dashboard Gutter width <code>24px</code>.</p></li></ul><h3 id="Full-screen-layout">Full screen layout<a onclick="window.location.hash = \'Full-screen-layout\'" class="anchor">#</a></h3><p>Used for any top and side areas, typically for highly customizable pages such as large screen data.</p><h3 id="User-authorization-layout">User authorization layout<a onclick="window.location.hash = \'User-authorization-layout\'" class="anchor">#</a></h3><p>Used for the <code>/passport/login</code> series of user related pages.</p><h3 id="Custom-layout">Custom layout<a onclick="window.location.hash = \'Custom-layout\'" class="anchor">#</a></h3><p>If the provided layout does not meet your requirements, you will need to create a new Layout template yourself. Just define it in layout.module.ts.</p></article></section>',meta:{order:30,title:{"en-US":"Scaffold","zh-CN":"\u811a\u624b\u67b6\u7ed3\u6784"},type:"Basic"},toc:[{id:"Directory-Structure",title:"Directory Structure",h:2},{id:"Page-structure",title:"Page structure",h:2},{id:"Basic-layout",title:"Basic layout",h:3},{id:"Full-screen-layout",title:"Full screen layout",h:3},{id:"User-authorization-layout",title:"User authorization layout",h:3},{id:"Custom-layout",title:"Custom layout",h:3}]},"zh-CN":{content:'<section class="markdown"><article><h2 id="\u76ee\u5f55\u7ed3\u6784">\u76ee\u5f55\u7ed3\u6784<a onclick="window.location.hash = \'\u76ee\u5f55\u7ed3\u6784\'" class="anchor">#</a></h2><p>\u4ee5\u4e0b\u811a\u624b\u67b6\u76ee\u5f55\u7ed3\u6784\u6982\u7565\u56fe\uff1a</p><pre class="hljs language-null"><code>\u251c\u2500\u2500 _mock                                       # Mock \u6570\u636e\u89c4\u5219\n\u251c\u2500\u2500 src\n\u2502\xa0\xa0 \u251c\u2500\u2500 app\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 core                                # \u6838\u5fc3\u6a21\u5757\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 i18n\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 net\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 default.interceptor.ts      # \u9ed8\u8ba4HTTP\u62e6\u622a\u5668\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 services\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 startup.service.ts          # \u521d\u59cb\u5316\u9879\u76ee\u914d\u7f6e\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 core.module.ts                  # \u6838\u5fc3\u6a21\u5757\u6587\u4ef6\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 layout                              # \u901a\u7528\u5e03\u5c40\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 routes\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 **                              # \u4e1a\u52a1\u76ee\u5f55\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 routes.module.ts                # \u4e1a\u52a1\u8def\u7531\u6a21\u5757\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 routes-routing.module.ts        # \u4e1a\u52a1\u8def\u7531\u6ce8\u518c\u53e3\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 shared                              # \u5171\u4eab\u6a21\u5757\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 shared.module.ts                # \u5171\u4eab\u6a21\u5757\u6587\u4ef6\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 app.component.ts                    # \u6839\u7ec4\u4ef6\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 app.module.ts                       # \u6839\u6a21\u5757\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 delon.module.ts                     # @delon\u6a21\u5757\u5bfc\u5165\n\u2502\xa0\xa0 \u251c\u2500\u2500 assets                                  # \u672c\u5730\u9759\u6001\u8d44\u6e90\n\u2502\xa0\xa0 \u251c\u2500\u2500 environments                            # \u73af\u5883\u53d8\u91cf\u914d\u7f6e\n\u2502\xa0\xa0 \u251c\u2500\u2500 styles                                  # \u6837\u5f0f\u76ee\u5f55\n\u2514\u2500\u2500 \u2514\u2500\u2500 style.less                              # \u6837\u5f0f\u5f15\u5bfc\u5165\u53e3</code></pre><p>\u4ee5\u4e0b\u662f\u9488\u5bf9\u5404\u4e2a\u76ee\u5f55\u53ca\u6587\u4ef6\u8bf4\u660e\u53ca\u4f7f\u7528\u76ee\u7684\u3002</p><p><strong>_mock</strong></p><p>Mock \u6570\u636e\u89c4\u5219\u76ee\u5f55\uff0c\u82e5\u4f60\u901a\u8fc7 <a href="/cli" data-url="/cli">\u547d\u4ee4\u884c\u5de5\u5177</a> \u521b\u5efa\u9879\u76ee\u65f6\u53ef\u4ee5\u6307\u5b9a <code>--mock</code> \u53c2\u6570\u51b3\u5b9a\u662f\u5426\u9700\u8981 Mock \u529f\u80fd\u3002</p><p><strong>src/app/core/core.module.ts</strong></p><p>\u6838\u5fc3\u6a21\u5757\uff0c\u53ea\u4f1a\u5bfc\u5165\u4e00\u6b21\u3002\u56e0\u6b64\uff0c\u9488\u5bf9\u6574\u4e2a<strong>\u4e1a\u52a1\u6a21\u5757\u90fd\u9700\u8981</strong>\u4f7f\u7528\u7684\u7eaf\u670d\u52a1\u7c7b\uff08\u4f8b\u5982\uff1a\u6d88\u606f\u3001\u6570\u636e\u8bbf\u95ee\u7b49\uff09\uff0c\u90fd\u5e94\u8be5\u5b58\u5728\u8fd9\u91cc\u3002</p><p><strong>src/app/core/i18n</strong></p><p><a href="/docs/i18n" data-url="/docs/i18n">\u56fd\u9645\u5316</a>\u6570\u636e\u52a0\u8f7d\u53ca\u5904\u7406\u76f8\u5173\u7c7b\uff0c\u82e5\u4f60\u901a\u8fc7 <a href="/cli" data-url="/cli">\u547d\u4ee4\u884c\u5de5\u5177</a> \u521b\u5efa\u9879\u76ee\u65f6\u53ef\u4ee5\u6307\u5b9a <code>-di</code> \u53c2\u6570\u51b3\u5b9a\u662f\u5426\u9700\u8981\u56fd\u9645\u5316\u652f\u6301\u3002</p><p><strong>src/app/core/net</strong></p><p>\u9ed8\u8ba4\u62e6\u622a\u5668\uff0c\u4f60\u53ef\u4ee5\u5728\u8fd9\u91cc\u7edf\u4e00\u5904\u7406\u8bf7\u6c42\u53c2\u6570\u3001\u8bf7\u6c42\u5f02\u5e38\u3001\u4e1a\u52a1\u5f02\u5e38\u7b49\u52a8\u4f5c\u3002</p><p><strong>src/app/core/services/startup.service.ts</strong></p><p>\u5f53\u4f60\u9700\u8981\u5728 Angular \u542f\u52a8\u524d\u6267\u884c\u4e00\u4e9b\u8fdc\u7a0b\u6570\u636e\uff08\u4f8b\u5982\uff1a\u5e94\u7528\u4fe1\u606f\u3001\u7528\u6237\u4fe1\u606f\u7b49\uff09\u65f6\u975e\u5e38\u6709\u7528\u3002</p><blockquote><p>\u5b83\u662f\u4e00\u4e2a\u5355\u7eaf\u7684\u65b9\u6cd5\u4e14\u8fd4\u56de\u4e00\u4e2a <code>Promise</code> \u5bf9\u8c61\uff0c\u9664\u975e\u660e\u786e\u6267\u884c <code>resolve(null)</code> \u5426\u5219 Angular \u5c06\u4f1a\u4e2d\u6b62\u542f\u52a8\u3002</p></blockquote><p><strong>src/app/layout</strong></p><p>\u5e03\u5c40\u6587\u4ef6\u4ee3\u7801\uff0c\u53c2\u8003\u9875\u9762\u7ed3\u6784\u5c0f\u8282\u3002</p><p><strong>src/app/routes</strong></p><p>\u4e1a\u52a1\u6a21\u5757\uff0c\u4f60\u7684\u6240\u6709\u4e1a\u52a1\u4ee3\u7801\u90fd\u5c06\u5728\u8fd9\u91cc\u3002</p><p><strong>src/app/shared/shared.module.ts</strong></p><p>\u5171\u4eab\u6a21\u5757\uff0c\u6307\u5f53\u4f60\u9700\u8981\u9488\u5bf9\u6574\u4e2a<strong>\u4e1a\u52a1\u6a21\u5757\u90fd\u9700\u8981</strong>\u4f7f\u7528\u7684\u4e00\u4e9b\u7b2c\u4e09\u65b9\u6a21\u5757\u3001\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u3001\u81ea\u5b9a\u4e49\u6307\u4ee4\uff0c\u90fd\u5e94\u8be5\u5b58\u5728\u8fd9\u91cc\u3002</p><p><strong>src/app/delon.module.ts</strong></p><p>\u9488\u5bf9 @delon \u7cfb\u5217\u7684\u6a21\u5757\u5bfc\u5165\u96c6\u5408\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u5bfc\u5165\u6240\u6709\u6a21\u5757\uff0c\u4f60\u53ef\u4ee5\u5229\u7528<a href="/docs/performance" data-url="/docs/performance">\u4f18\u5316</a>\u7ae0\u8282\uff0c\u8fdb\u4e00\u6b65\u6309\u9700\u4f18\u5316\u3002</p><p><strong>src/styles/_alain-custom-variables.less</strong></p><p><strong>\u3010\u3010\u52ff\u5220\u3011\u3011</strong> \u53ef\u4ee5\u6839\u636e\u9700\u6c42\u8c03\u6574 alain \u7684\u9ed8\u8ba4\u53c2\u6570\u3002</p><p><strong>src/environments</strong></p><p>\u5e94\u7528\u73af\u5883\u53d8\u91cf\uff0c\u5305\u542b\u4ee5\u4e0b\u503c\uff1a</p><ul><li><p><code>SERVER_URL</code> \u6240\u6709HTTP\u8bf7\u6c42\u7684\u524d\u7f00</p></li><li><p><code>production</code> \u662f\u5426\u751f\u4ea7\u73af\u5883</p></li><li><p><code>useHash</code> \u8def\u7531\u662f\u5426useHash\u6a21\u5f0f</p></li></ul><h2 id="\u9875\u9762\u7ed3\u6784">\u9875\u9762\u7ed3\u6784<a onclick="window.location.hash = \'\u9875\u9762\u7ed3\u6784\'" class="anchor">#</a></h2><p>\u6574\u4f53\u5e03\u5c40\u662f\u6307\u5305\u542b\u5bfc\u822a\u3001\u4fa7\u8fb9\u680f\u3001\u5185\u5bb9\u533a\u57df\u3001\u9875\u811a\u7b49\u6700\u5916\u5c42\u7684\u6846\u67b6\u7ed3\u6784\u3002</p><p>\u540c\u65f6\u5728\u5185\u90e8\u533a\u57df\u5185\uff0c\u4e5f\u9700\u8981\u533a\u5757\u7684\u5e03\u5c40\u8bf8\u5982\u8868\u5355\u3001\u641c\u7d22\u6846\u3001\u5217\u8868\u9875\u7b49\uff0c\u9488\u5bf9\u6b64\u76ee\u524d NG-ZORRO \u6709\u4e24\u5957\u5e03\u5c40\u65b9\u6848\uff1a<a target="_blank" href="https://ng.ant.design/#/components/layout" data-url="https://ng.ant.design/#/components/layout">Layout</a> \u548c <a target="_blank" href="https://ng.ant.design/#/components/grid" data-url="https://ng.ant.design/#/components/grid">Grid</a>\u3002</p><p>\u811a\u624b\u67b6\u9ed8\u8ba4\u63d0\u4f9b\u4e09\u79cd\u6574\u4f53\u5e03\u5c40\u65b9\u6848\uff1a</p><table><thead><tr><th>\u7c7b\u578b</th><th>\u4f4d\u7f6e</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td>\u57fa\u7840</td><td><a target="_blank" href="https://github.com/ng-alain/ng-alain/tree/master/src/app/layout/default" data-url="https://github.com/ng-alain/ng-alain/tree/master/src/app/layout/default">LayoutDefaultComponent</a></td><td>-</td></tr><tr><td>\u5168\u5c4f</td><td><a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/layout/fullscreen" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/layout/fullscreen">LayoutFullScreenComponent</a></td><td>-</td></tr><tr><td>\u7528\u6237\u6388\u6743</td><td><a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/layout/passport" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/layout/passport">LayoutPassportComponent</a></td><td>-</td></tr></tbody></table><h3 id="\u57fa\u7840\u5e03\u5c40">\u57fa\u7840\u5e03\u5c40<a onclick="window.location.hash = \'\u57fa\u7840\u5e03\u5c40\'" class="anchor">#</a></h3><p>\u6309\u4e0a-\u5de6-\u53f3\u5e03\u5c40\u65b9\u5f0f\uff0c\u8fd0\u7528\u4e8e<strong>\u4e1a\u52a1\u9875</strong>\u7684\u5f00\u53d1\u3002\u5176\u89c4\u8303\u7ec6\u8282\uff1a</p><ul><li><p>\u9876\u90e8\u533a\u57df\u9ad8\u5ea6 <code>64px</code>\uff08\u53c2\u6570\uff1a<code>@header-hg</code>\uff09</p></li><li><p>\u4fa7\u8fb9\u533a\u57df\u5bbd\u5ea6 <code>200px</code>\uff08\u53c2\u6570\uff1a<code>@aside-wd</code>\uff09</p><ul><li><p>\u5f53\u5c4f\u5e55\u4f4e\u4e8e <code>1140px</code> \u5bbd\u65f6\u9690\u85cf\u4fa7\u8fb9\u5bfc\u822a</p></li><li><p>\u5f53\u5c4f\u5e55\u4f4e\u4e8e <code>1140px</code> \u5bbd\u65f6\u6253\u5f00\u4fa7\u8fb9\u5bfc\u822a\u4e3a <code>fixed</code> \u72b6\u6001</p></li><li><p>\u4e3b\u8981\u5305\u62ec\u4e00\u4e2a <a href="/components/sidebar-nav" data-url="/components/sidebar-nav">sidebar-nav\uff08\u70b9\u51fb\u67e5\u770bAPI\uff09</a> \u7ec4\u4ef6</p></li></ul></li></ul><blockquote><p>\u53c2\u6570\u662f\u6307\u53ef\u4ee5\u901a\u8fc7 <code>src/styles/_alain-custom-variables.less</code> \u6587\u4ef6\u6309\u9700\u8981\u8c03\u6574\u3002</p></blockquote><p><strong>\u9876\u90e8\u533a\u57df</strong></p><p>\u4f4d\u7f6e\uff1a<em>src/app/layout/default/header</em>\u3002</p><p>\u811a\u624b\u67b6\u9ed8\u8ba4\u63d0\u4f9b\u4e86\u4e00\u4e9b\u5e38\u89c4\u9876\u90e8\u533a\u57df\u7ec4\u4ef6\uff0c\u8fd9\u4e9b\u7ec4\u4ef6\u90fd\u5b58\u653e\u4e8e <em>components</em> \u76ee\u5f55\u4e2d\u3002\u540c\u65f6 <code>@delon/abc</code> \u4e5f\u63d0\u4f9b\u82e5\u5e72\u9876\u90e8\u7ec4\u4ef6\uff08\u4f8b\u5982\uff1a<a href="/components/notice-icon" data-url="/components/notice-icon">notice-icon</a> \u901a\u77e5\u83dc\u5355\u7ec4\u4ef6\uff09\u3002\u4f60\u53ef\u4ee5\u6839\u636e\u63d0\u4f9b\u7684\u7ec4\u4ef6\u81ea\u884c\u7ec4\u5408\u6216\u81ea\u884c\u5f00\u53d1\u3002</p><blockquote><p>\u811a\u624b\u67b6\u652f\u6301\u54cd\u5e94\u5f0f\u5e03\u5c40\uff0c\u5bf9\u4e8e\u9876\u90e8\u533a\u57df\u53ef\u80fd\u4f1a\u662f\u5728\u5c0f\u5c4f\u5e55\u4e0b\u9700\u8981\u9690\u85cf\u4e00\u4e9b\u7ec4\u4ef6\uff0c\u56e0\u6b64\u4f60\u53ef\u4ee5\u5728\u5bf9\u5e94\u7684DOM\u8282\u70b9\u4e0a\u52a0\u4e0a <code>hidden-xs</code> \u8868\u793a\u5f53\u5c4f\u5e55\u5c0f\u4e8e <code>768px</code> \u65f6\u81ea\u52a8\u9690\u85cf\u3002</p></blockquote><p><strong>\u4fa7\u8fb9\u533a\u57df</strong></p><p>\u4f4d\u7f6e\uff1a<em>src/app/layout/default/sidebar</em>\u3002</p><p>\u53ea\u5305\u62ec\u4e00\u4e2a\u7528\u6237\u4fe1\u606f\u548c\u4e3b\u83dc\u5355\u3002\u4e3b\u83dc\u5355\u662f\u4e00\u4e2a <a href="/components/sidebar-nav" data-url="/components/sidebar-nav">sidebar-nav</a> \u7ec4\u4ef6\uff0c\u5177\u4f53\u4f7f\u7528\u7ec6\u8282\u8bf7\u81f3<a href="/components/sidebar-nav" data-url="/components/sidebar-nav">\u4e1a\u52a1\u7ec4\u4ef6</a>\u4e2d\u67e5\u8be2\u3002</p><p><strong>\u5185\u90e8\u533a\u57df</strong></p><p>\u5185\u5bb9\u533a\u57df\u662f\u4e1a\u52a1\u9875\u533a\u57df\uff0c\u89c4\u8303\u7ec6\u8282\uff1a</p><ul><li><p>\u5185\u5bb9\u8ddd\u79bb\u9875\u9762\u6807\u51c6\u3001\u4fa7\u8fb9\u3001\u53f3\u8fb9\u6eda\u52a8\u6761\u3001\u5e95\u90e8\uff0c\u8fd9\u56db\u8fb9\u8ddd\u4f9d\u4e00\u4e2a\u6807\u51c6Dashboard\u7684Gutter\u5bbd\u5ea6 <code>24px</code>\u3002</p></li></ul><h3 id="\u5168\u5c4f\u5e03\u5c40">\u5168\u5c4f\u5e03\u5c40<a onclick="window.location.hash = \'\u5168\u5c4f\u5e03\u5c40\'" class="anchor">#</a></h3><p>\u7528\u4e8e\u65e0\u987b\u4efb\u4f55\u9876\u90e8\u548c\u4fa7\u8fb9\u533a\u57df\uff0c\u4e00\u822c\u7528\u4e8e\u9ad8\u5b9a\u5236\u6027\u9875\u9762\uff0c\u8bf8\u5982\u5927\u5c4f\u5e55\u6570\u636e\u7b49\u3002</p><h3 id="\u7528\u6237\u6388\u6743\u5e03\u5c40">\u7528\u6237\u6388\u6743\u5e03\u5c40<a onclick="window.location.hash = \'\u7528\u6237\u6388\u6743\u5e03\u5c40\'" class="anchor">#</a></h3><p>\u7528\u4e8e <code>/passport/login</code> \u7cfb\u5217\u7528\u6237\u76f8\u5173\u9875\u3002</p><h3 id="\u81ea\u5b9a\u4e49\u5e03\u5c40">\u81ea\u5b9a\u4e49\u5e03\u5c40<a onclick="window.location.hash = \'\u81ea\u5b9a\u4e49\u5e03\u5c40\'" class="anchor">#</a></h3><p>\u5982\u679c\u63d0\u4f9b\u7684\u5e03\u5c40\u4e0d\u80fd\u6ee1\u8db3\u4f60\u7684\u8981\u6c42\uff0c\u5c31\u9700\u8981\u81ea\u5df1\u65b0\u5efa Layout \u6a21\u677f\u4e86\u3002\u53ea\u9700\u8981\u5728 layout.module.ts \u4e2d\u5b9a\u4e49\u5373\u53ef\u3002</p></article></section>',meta:{order:30,title:{"en-US":"Scaffold","zh-CN":"\u811a\u624b\u67b6\u7ed3\u6784"},type:"Basic"},toc:[{id:"\u76ee\u5f55\u7ed3\u6784",title:"\u76ee\u5f55\u7ed3\u6784",h:2},{id:"\u9875\u9762\u7ed3\u6784",title:"\u9875\u9762\u7ed3\u6784",h:2},{id:"\u57fa\u7840\u5e03\u5c40",title:"\u57fa\u7840\u5e03\u5c40",h:3},{id:"\u5168\u5c4f\u5e03\u5c40",title:"\u5168\u5c4f\u5e03\u5c40",h:3},{id:"\u7528\u6237\u6388\u6743\u5e03\u5c40",title:"\u7528\u6237\u6388\u6743\u5e03\u5c40",h:3},{id:"\u81ea\u5b9a\u4e49\u5e03\u5c40",title:"\u81ea\u5b9a\u4e49\u5e03\u5c40",h:3}]}},demo:!1},this.codes=[]},N=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/server.en-US.md","zh-CN":"docs/server.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>NG-ALAIN is a single-page application based on the Angular technology stack. We provide development models for front-end code and native analog data.\nWork in the form of the Restful API with the server application of any technology stack. The basics of interacting with the server are briefly described below.</p><h2 id="Front-end-request-process">Front-end request process<a onclick="window.location.hash = \'Front-end-request-process\'" class="anchor">#</a></h2><p>In NG-ALAIN, a complete front-end UI interaction to the server-side processing flow looks like this:</p><ol><li><p>Start Angular for the first time to execute <code>APP_INITIALIZER</code>;</p></li><li><p>UI component interaction;</p></li><li><p>Send the request using the encapsulated <a href="/theme/http" data-url="/theme/http">_HttpClient</a>;</p></li><li><p>Trigger the user authentication interceptor <a href="/auth/getting-started" data-url="/auth/getting-started">@delon/auth</a> and add the <code>token</code> parameter uniformly;</p><ul><li><p>If there is no <code>token</code> or an expired interrupt subsequent request, jump directly to the login page;</p></li></ul></li><li><p>Trigger the default interceptor to process the prefix and other information;</p></li><li><p>Get the server back;</p></li><li><p>Trigger the default interceptor to handle request exceptions, business exceptions, etc.</p></li><li><p>Update the data and refresh the UI.</p></li></ol><h3 id="Interceptor">Interceptor<a onclick="window.location.hash = \'Interceptor\'" class="anchor">#</a></h3><p>By default, two interceptors are registered in the root module.<a target="_blank" href="https://github.com/ng-alain/delon/blob/master/packages/auth/token/simple/simple.interceptor.ts" data-url="https://github.com/ng-alain/delon/blob/master/packages/auth/token/simple/simple.interceptor.ts">SimpleInterceptor</a> with <a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/core/net/default.interceptor.ts" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/core/net/default.interceptor.ts">DefaultInterceptor</a>And the execution order is executed in the registration order.</p><p><strong>SimpleInterceptor</strong></p><p><a href="/auth" data-url="/auth">User Authentication</a> has built-in interceptors for automatically adding <code>token</code> parameters to requests. There is also a <a target="_blank" href="https://github.com/ng-alain/delon/blob/master/packages/auth/token/jwt/jwt.interceptor.ts" data-url="https://github.com/ng-alain/delon/blob/master/packages/auth/token/jwt/jwt.interceptor.ts">JWTInterceptor</a> interceptor, which is a standard JWT specification. If the backend uses standard JWT, it can be directly replaced with a JWTInterceptor interceptor.</p><p><strong>DefaultInterceptor</strong></p><p><a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/core/net/default.interceptor.ts" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/core/net/default.interceptor.ts">DefaultInterceptor</a> The interceptor simply provides an interceptor. By default, it contains sample code that handles server request prefixes, handles request exceptions, and business exceptions. You can make adjustments based on your own needs.</p><p><strong>Important point</strong></p><p>We can put the <code>next.handle(req)</code> as the demarcation point in the interceptor <code>intercept</code> method. The first part is the request and the <code>pipe</code> part is the post. This will make it clearer which part is to be done before the request and which part will be executed after the request. For more information on interceptors, please refer to the official website.</p><h2 id="Development-environment">Development environment<a onclick="window.location.hash = \'Development-environment\'" class="anchor">#</a></h2><p>Under normal circumstances, the development environment and the production environment are not the same back-end request source. You can actually configure it under the <a target="_blank" href="https://github.com/ng-alain/ng-alain/tree/master/src/environments" data-url="https://github.com/ng-alain/ng-alain/tree/master/src/environments">environment</a> directory. <a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/environments/environment.ts" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/environments/environment.ts">environment.ts</a> and <a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/environments/environment.prod.ts" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/environments/environment.prod.ts">environment.prod.ts</a> Change the request source for different environments.</p><blockquote><p>environment is actually a JSON object, you can organize different forms to meet the problem of multiple request sources.</p></blockquote><h2 id="Mock">Mock<a onclick="window.location.hash = \'Mock\'" class="anchor">#</a></h2><p>Sometimes when you want to develop the front-end first, you can use @delon/mock to simulate the request data. The actual principle is to use the interceptor to directly return the data to the matching URL instead of sending an HTTP request. By default, it is only valid for the test environment. Of course, you usually need to make sure that the data of the Mock interface is consistent with the backend. You can create the corresponding Mock interface in the <code>_mock</code> directory:</p><pre class="hljs language-ts"><code>export const USERS = {\n  \'GET /users\': { users: [1, 2], total: 2 }\n}</code></pre><p>So for the test environment, when the <code>/users</code> request is encountered, the <code>{users: [1, 2], total: 2 }</code> data is returned directly. See <a href="/mock" data-url="/mock">here</a> for more Mock syntax and usage.</p><p><strong>Note: </strong> When you don\'t need a Mock interface for a request, be sure to comment out or remove it.</p><h2 id="Common-problem">Common problem<a onclick="window.location.hash = \'Common-problem\'" class="anchor">#</a></h2><p><strong>Q:</strong> The request may be rejected or returned directly to <code>401</code>?</p><p>Scaffolding uses the <code>SimpleInterceptor</code> interceptor of <code>@delon/auth</code> by default, which causes an error to be returned directly if a token cannot be obtained during the request.</p><p><a href="/auth" data-url="/auth">User Authentication</a> This process is a must for the middle office.</p></article></section>',meta:{order:40,title:{"en-US":"Work with Server","zh-CN":"\u548c\u670d\u52a1\u7aef\u8fdb\u884c\u4ea4\u4e92"},type:"Dev"},toc:[{id:"Front-end-request-process",title:"Front-end request process",h:2},{id:"Interceptor",title:"Interceptor",h:3},{id:"Development-environment",title:"Development environment",h:2},{id:"Mock",title:"Mock",h:2},{id:"Common-problem",title:"Common problem",h:2}]},"zh-CN":{content:'<section class="markdown"><article><p>NG-ALAIN \u662f\u4e00\u5957\u57fa\u4e8e Angular \u6280\u672f\u6808\u7684\u5355\u9875\u9762\u5e94\u7528\uff0c\u6211\u4eec\u63d0\u4f9b\u7684\u662f\u524d\u7aef\u4ee3\u7801\u548c\u672c\u5730\u6a21\u62df\u6570\u636e\u7684\u5f00\u53d1\u6a21\u5f0f\uff0c\n\u901a\u8fc7 Restful API \u7684\u5f62\u5f0f\u548c\u4efb\u4f55\u6280\u672f\u6808\u7684\u670d\u52a1\u7aef\u5e94\u7528\u4e00\u8d77\u5de5\u4f5c\u3002\u4e0b\u9762\u5c06\u7b80\u5355\u4ecb\u7ecd\u548c\u670d\u52a1\u7aef\u4ea4\u4e92\u7684\u57fa\u672c\u5199\u6cd5\u3002</p><h2 id="\u524d\u7aef\u8bf7\u6c42\u6d41\u7a0b">\u524d\u7aef\u8bf7\u6c42\u6d41\u7a0b<a onclick="window.location.hash = \'\u524d\u7aef\u8bf7\u6c42\u6d41\u7a0b\'" class="anchor">#</a></h2><p>\u5728 NG-ALAIN \u4e2d\uff0c\u4e00\u4e2a\u5b8c\u6574\u7684\u524d\u7aef UI \u4ea4\u4e92\u5230\u670d\u52a1\u7aef\u5904\u7406\u6d41\u7a0b\u662f\u8fd9\u6837\u7684\uff1a</p><ol><li><p>\u9996\u6b21\u542f\u52a8 Angular \u6267\u884c <code>APP_INITIALIZER</code>\uff1b</p></li><li><p>UI \u7ec4\u4ef6\u4ea4\u4e92\u64cd\u4f5c\uff1b</p></li><li><p>\u4f7f\u7528\u5c01\u88c5\u7684 <a href="/theme/http" data-url="/theme/http">_HttpClient</a> \u53d1\u9001\u8bf7\u6c42\uff1b</p></li><li><p>\u89e6\u53d1\u7528\u6237\u8ba4\u8bc1\u62e6\u622a\u5668 <a href="/auth/getting-started" data-url="/auth/getting-started">@delon/auth</a>\uff0c\u7edf\u4e00\u52a0\u5165 <code>token</code> \u53c2\u6570\uff1b</p><ul><li><p>\u82e5\u672a\u5b58\u5728 <code>token</code> \u6216\u5df2\u8fc7\u671f\u4e2d\u65ad\u540e\u7eed\u8bf7\u6c42\uff0c\u76f4\u63a5\u8df3\u8f6c\u81f3\u767b\u5f55\u9875\uff1b</p></li></ul></li><li><p>\u89e6\u53d1\u9ed8\u8ba4\u62e6\u622a\u5668\uff0c\u7edf\u4e00\u5904\u7406\u524d\u7f00\u7b49\u4fe1\u606f\uff1b</p></li><li><p>\u83b7\u53d6\u670d\u52a1\u7aef\u8fd4\u56de\uff1b</p></li><li><p>\u89e6\u53d1\u9ed8\u8ba4\u62e6\u622a\u5668\uff0c\u7edf\u4e00\u5904\u7406\u8bf7\u6c42\u5f02\u5e38\u3001\u4e1a\u52a1\u5f02\u5e38\u7b49\uff1b</p></li><li><p>\u6570\u636e\u66f4\u65b0\uff0c\u5e76\u5237\u65b0 UI\u3002</p></li></ol><h3 id="\u62e6\u622a\u5668">\u62e6\u622a\u5668<a onclick="window.location.hash = \'\u62e6\u622a\u5668\'" class="anchor">#</a></h3><p>\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u5728\u6839\u6a21\u5757\u6ce8\u518c\u4e86\u4e24\u4e2a\u62e6\u622a\u5668 <a target="_blank" href="https://github.com/ng-alain/delon/blob/master/packages/auth/token/simple/simple.interceptor.ts" data-url="https://github.com/ng-alain/delon/blob/master/packages/auth/token/simple/simple.interceptor.ts">SimpleInterceptor</a> \u548c <a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/core/net/default.interceptor.ts" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/core/net/default.interceptor.ts">DefaultInterceptor</a>\uff0c\u4e14\u6267\u884c\u987a\u5e8f\u6309\u6ce8\u518c\u987a\u5e8f\u6267\u884c\u3002</p><p><strong>SimpleInterceptor</strong></p><p><a href="/auth" data-url="/auth">\u7528\u6237\u8ba4\u8bc1</a>\u5185\u7f6e\u7528\u4e8e\u81ea\u52a8\u4e3a\u8bf7\u6c42\u6dfb\u52a0 <code>token</code> \u53c2\u6570\u7684\u62e6\u622a\u5668\u3002\u8fd9\u91cc\u8fd8\u6709\u4e00\u4e2a\u53eb <a target="_blank" href="https://github.com/ng-alain/delon/blob/master/packages/auth/token/jwt/jwt.interceptor.ts" data-url="https://github.com/ng-alain/delon/blob/master/packages/auth/token/jwt/jwt.interceptor.ts">JWTInterceptor</a> \u62e6\u622a\u5668\uff0c\u662f\u4e00\u4e2a\u6807\u51c6 JWT \u89c4\u8303\uff0c\u82e5\u540e\u7aef\u91c7\u7528\u6807\u51c6JWT\u53ef\u4ee5\u76f4\u63a5\u6362\u6210JWTInterceptor\u62e6\u622a\u5668\u3002</p><p><strong>DefaultInterceptor</strong></p><p><a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/app/core/net/default.interceptor.ts" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/app/core/net/default.interceptor.ts">DefaultInterceptor</a> \u62e6\u622a\u5668\u53ea\u662f\u63d0\u4f9b\u4e00\u4e2a\u62e6\u622a\u5668\u7684\u5199\u6cd5\uff0c\u9ed8\u8ba4\u5305\u542b\u4e86\u7edf\u4e00\u5904\u7406\u670d\u52a1\u5668\u8bf7\u6c42\u524d\u7f00\u3001\u5904\u7406\u8bf7\u6c42\u5f02\u5e38\u53ca\u4e1a\u52a1\u5f02\u5e38\u7684\u793a\u4f8b\u4ee3\u7801\uff0c\u4f60\u53ef\u4ee5\u6839\u636e\u4f60\u81ea\u5df1\u7684\u9700\u6c42\u505a\u8c03\u6574\u3002</p><p><strong>\u6ce8\u610f\u70b9</strong></p><p>\u6211\u4eec\u53ef\u4ee5\u628a\u62e6\u622a\u5668 <code>intercept</code> \u65b9\u6cd5\u5185\uff0c\u4ee5 <code>next.handle(req)</code> \u4e3a\u5206\u754c\u70b9\uff0c\u524d\u90e8\u5206\u4e3a\u8bf7\u6c42\u524d\uff0c<code>pipe</code> \u90e8\u5206\u4e3a\u63a5\u6536\u540e\u3002\u8fd9\u6837\u4f1a\u66f4\u660e\u786e\u77e5\u9053\u54ea\u4e00\u90e8\u5206\u662f\u8bf7\u6c42\u524d\u8981\u505a\uff0c\u54ea\u4e00\u90e8\u5206\u662f\u8bf7\u6c42\u540e\u4f1a\u6267\u884c\u7684\u3002\u6709\u5173\u66f4\u591a\u62e6\u622a\u5668\u77e5\u8bc6\u8bf7\u53c2\u8003\u5b98\u7f51\u3002</p><h2 id="\u5f00\u53d1\u73af\u5883">\u5f00\u53d1\u73af\u5883<a onclick="window.location.hash = \'\u5f00\u53d1\u73af\u5883\'" class="anchor">#</a></h2><p>\u6b63\u5e38\u60c5\u51b5\u4e0b\u5f00\u53d1\u73af\u5883\u548c\u751f\u4ea7\u73af\u5883\u4e0d\u662f\u540c\u4e00\u4e2a\u540e\u7aef\u8bf7\u6c42\u6e90\uff0c\u5b9e\u9645\u53ef\u4ee5\u901a\u8fc7\u914d\u7f6e <a target="_blank" href="https://github.com/ng-alain/ng-alain/tree/master/src/environments" data-url="https://github.com/ng-alain/ng-alain/tree/master/src/environments">environment</a> \u76ee\u5f55\u4e0b <a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/environments/environment.ts" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/environments/environment.ts">environment.ts</a> \u548c <a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/master/src/environments/environment.prod.ts" data-url="https://github.com/ng-alain/ng-alain/blob/master/src/environments/environment.prod.ts">environment.prod.ts</a> \u6539\u53d8\u4e0d\u540c\u73af\u5883\u7684\u8bf7\u6c42\u6e90\u3002</p><blockquote><p>environment \u5b9e\u9645\u662f\u4e00\u4e2aJSON\u5bf9\u8c61\uff0c\u4f60\u53ef\u4ee5\u7ec4\u7ec7\u4e0d\u540c\u5f62\u5f0f\u6765\u6ee1\u8db3\u591a\u8bf7\u6c42\u6e90\u7684\u95ee\u9898\u3002</p></blockquote><h2 id="Mock">Mock<a onclick="window.location.hash = \'Mock\'" class="anchor">#</a></h2><p>\u6709\u65f6\u5019\u5e0c\u671b\u4f18\u5148\u5f00\u53d1\u524d\u7aef\u65f6\uff0c\u53ef\u4ee5\u5229\u7528 @delon/mock \u6765\u6a21\u62df\u8bf7\u6c42\u6570\u636e\uff0c\u5b9e\u9645\u539f\u7406\u662f\u5229\u7528\u62e6\u622a\u5668\uff0c\u5bf9\u5339\u914d\u7684URL\u76f4\u63a5\u8fd4\u56de\u6570\u636e\uff0c\u800c\u4e0d\u662f\u53d1\u9001\u4e00\u4e2aHTTP\u8bf7\u6c42\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u53ea\u5bf9\u6d4b\u8bd5\u73af\u5883\u6709\u6548\u3002\u5f53\u7136\u901a\u5e38\u60c5\u51b5\u4e0b\u4f60\u9700\u8981\u786e\u4fdd Mock \u63a5\u53e3\u7684\u6570\u636e\u4e0e\u540e\u7aef\u4fdd\u6301\u4e00\u81f4\uff0c\u4f60\u53ef\u4ee5\u5728 <code>_mock</code> \u76ee\u5f55\u4e0b\u521b\u5efa\u76f8\u5e94\u7684 Mock \u63a5\u53e3\uff1a</p><pre class="hljs language-ts"><code>export const USERS = {\n  \'GET /users\': { users: [1, 2], total: 2 }\n}</code></pre><p>\u56e0\u6b64\u5bf9\u4e8e\u6d4b\u8bd5\u73af\u5883\u4e0b\u5f53\u9047\u5230 <code>/users</code> \u8bf7\u6c42\u76f4\u63a5\u8fd4\u56de <code>{ users: [1, 2], total: 2 }</code> \u6570\u636e\u3002\u6709\u5173\u66f4\u591a Mock \u8bed\u6cd5\u548c\u4f7f\u7528\u65b9\u5f0f\u53c2\u8003<a href="/mock" data-url="/mock">\u8fd9\u91cc</a>\u3002</p><p><strong>\u6ce8\uff1a</strong> \u5f53\u4f60\u4e0d\u9700\u8981\u67d0\u4e2a\u8bf7\u6c42\u7684 Mock \u63a5\u53e3\u65f6\uff0c\u52a1\u5fc5\u8981\u6ce8\u91ca\u6389\u6216\u79fb\u9664\u5b83\u3002</p><h2 id="\u5e38\u89c1\u95ee\u9898">\u5e38\u89c1\u95ee\u9898<a onclick="window.location.hash = \'\u5e38\u89c1\u95ee\u9898\'" class="anchor">#</a></h2><p><strong>Q\uff1a</strong> \u8bf7\u6c42\u53ef\u80fd\u88ab\u62d2\u7edd\u6216\u76f4\u63a5\u8fd4\u56de <code>401</code> ?</p><p>\u811a\u624b\u67b6\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u4f7f\u7528\u4e86 <code>@delon/auth</code> \u7684 <code>SimpleInterceptor</code> \u62e6\u622a\u5668\uff0c\u5bfc\u81f4\u5728\u8bf7\u6c42\u8fc7\u7a0b\u4e2d\u82e5\u53d1\u73b0\u65e0\u6cd5\u83b7\u53d6 Token \u65f6\u4f1a\u76f4\u63a5\u8fd4\u56de\u9519\u8bef\u3002</p><p><a href="/auth" data-url="/auth">\u7528\u6237\u8ba4\u8bc1</a>\u8fd9\u4e2a\u8fc7\u7a0b\u662f\u4e2d\u53f0\u5fc5\u5907\u7684\u3002</p></article></section>',meta:{order:40,title:{"en-US":"Work with Server","zh-CN":"\u548c\u670d\u52a1\u7aef\u8fdb\u884c\u4ea4\u4e92"},type:"Dev"},toc:[{id:"\u524d\u7aef\u8bf7\u6c42\u6d41\u7a0b",title:"\u524d\u7aef\u8bf7\u6c42\u6d41\u7a0b",h:2},{id:"\u62e6\u622a\u5668",title:"\u62e6\u622a\u5668",h:3},{id:"\u5f00\u53d1\u73af\u5883",title:"\u5f00\u53d1\u73af\u5883",h:2},{id:"Mock",title:"Mock",h:2},{id:"\u5e38\u89c1\u95ee\u9898",title:"\u5e38\u89c1\u95ee\u9898",h:2}]}},demo:!1},this.codes=[]},x=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/style-guide.en-US.md","zh-CN":"docs/style-guide.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>The project built by Angular CLI is already very good in terms of its directory structure. Official website also has an <a target="_blank" href="https://angular.io/guide/styleguide" data-url="https://angular.io/guide/styleguide">Angular Style Guide</a> (<a target="_blank" href="https://angular.cn/guide/styleguide" data-url="https://angular.cn/guide/styleguide">Chinese version</a>) Style guide. It is recommended to read it several times. In addition, NG-ALAIN also has a part of the coding style, the following instructions may be useful for reading the code.</p><h2 id="Style-guide">Style guide<a onclick="window.location.hash = \'Style-guide\'" class="anchor">#</a></h2><h3 id="Region">Region<a onclick="window.location.hash = \'Region\'" class="anchor">#</a></h3><p>Use a <code>// #region</code> & <code>// #endregion</code> free folding code preprocessor directive (limited to VSCODE) for a set of identical properties, using the <code>shared.module.ts</code> file as an example:</p><pre class="hljs language-ts"><code>// #region third libs\nimport { NzSchemaFormModule } from \'nz-schema-form\';\nconst THIRDMODULES = [ NzSchemaFormModule ];\n// #endregion</code></pre><p>Place all third-party modules in the <code>third libs</code> area and unify the registration module into the <code>THIRDMODULES</code> variable. You don\'t have to worry about importing and exporting anymore, because the <code>THIRDMODULES</code> array is added by default to the import and export rows and columns.</p><p>When we are reading a long file, we can fold some of the code in VSCODE, which is more helpful for reading.</p><h3 id="API-documentation">API documentation<a onclick="window.location.hash = \'API-documentation\'" class="anchor">#</a></h3><p>Applications are always inevitable for the development of business components. We can not guarantee that you can remember these after a certain time. So, make sure to include the <code>README.md</code> document in each business component and describe the API, DEMO and other information. </p><p>For example:</p><pre class="hljs language-markdown"><code>## When do you use it?\n\nInstruction\n\n## DEMO\n\nInstruction\n\n## API\n\nParameter | Description | Type | Default\n----|------|-----|------\nsrc | The map\'s address  | `string` | -</code></pre><h3 id="Module-registration">Module registration<a onclick="window.location.hash = \'Module-registration\'" class="anchor">#</a></h3><p>Please parameter <a href="/docs/module" data-url="/docs/module">module registration guidelines</a>.</p><h2 id="Auxiliary-item">Auxiliary item<a onclick="window.location.hash = \'Auxiliary-item\'" class="anchor">#</a></h2><p>NG-ALAIN is configured with some options for the CLI to better code.</p><h3 id="CLI">CLI<a onclick="window.location.hash = \'CLI\'" class="anchor">#</a></h3><p>Vscode is the best choice for writing Angular. You can type: <code>ng g c list</code> in any directory of the project to generate the corresponding files for the component.</p><p>NG-ALAIN is configured by default without generating style files & unit tests. So you will see that only <code>.ts</code>, <code>.html</code> are generated. This is because NG-ALAIN provides a very rich style API, and custom styles are not just needed on most pages. At the same time, unit tests.</p><p>Of course, you can easily adjust the default configuration in <code>angular.json</code>.</p><h3 id="VSCode-snippets">VSCode snippets<a onclick="window.location.hash = \'VSCode-snippets\'" class="anchor">#</a></h3><p>VSCode is the best choice for writing Angular. Naturally NG-ALAIN also created the corresponding snippets extension: <a target="_blank" href="//marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode" data-url="//marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode">ng-zorro-vscode</a> and <a target="_blank" href="//marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode" data-url="//marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode">ng-alain-vscode</a>.</p><h2 id="Consistent-code-style">Consistent code style<a onclick="window.location.hash = \'Consistent-code-style\'" class="anchor">#</a></h2><p>NG-ALAIN uses <a target="_blank" href="https://prettier.io/" data-url="https://prettier.io/">Prettier</a> to optimize the code style and match the results to <code>tslint.json</code>.</p><p>It is recommended to install several plugins for more friendly development in vscode:</p><ul><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode">ng-zorro snippets</a></p></li><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode">ng-alain snippets</a></p></li><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier - Code formatter</a></p></li><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig" data-url="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig">EditorConfig for VS Code</a></p></li><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=joelday.docthis" data-url="https://marketplace.visualstudio.com/items?itemName=joelday.docthis">Document This</a></p></li></ul><blockquote><p>You can automatically fix the code style when the file is saved by configuring <code>.vscode/settings.json</code> with <code>formatOnSave</code>.</p></blockquote><h2 id="Git">Git<a onclick="window.location.hash = \'Git\'" class="anchor">#</a></h2><h3 id="pre-commit">pre commit<a onclick="window.location.hash = \'pre-commit\'" class="anchor">#</a></h3><p><code>lint</code> can be very effective in helping us find bugs and readability earlier. Isn\'t it cool if we can guarantee that the lint of the file in staged is automatically done before each commit in the team development process?</p><p>NG-ALAIN is configured to do lint each time you commit to staged and you can\'t commit if you find an error.</p><p>By default, the <code>*.ts</code>, <code>*.less</code> commit process forces the formatting of the code. You can change the rules by modifying the <code>lint-staged</code> node of <code>package.json</code> (for example: <code>prettier --write</code>)</p></article></section>',meta:{order:90,title:{"en-US":"Style Guide","zh-CN":"\u7f16\u7801\u89c4\u8303\u5efa\u8bae"},type:"Advance"},toc:[{id:"Style-guide",title:"Style guide",h:2},{id:"Region",title:"Region",h:3},{id:"API-documentation",title:"API documentation",h:3},{id:"Module-registration",title:"Module registration",h:3},{id:"Auxiliary-item",title:"Auxiliary item",h:2},{id:"CLI",title:"CLI",h:3},{id:"VSCode-snippets",title:"VSCode snippets",h:3},{id:"Consistent-code-style",title:"Consistent code style",h:2},{id:"Git",title:"Git",h:2},{id:"pre-commit",title:"pre commit",h:3}]},"zh-CN":{content:'<section class="markdown"><article><p>Angular CLI \u6784\u5efa\u7684\u9879\u76ee\u5c31\u5176\u76ee\u5f55\u7ed3\u6784\u800c\u8a00\u5df2\u7ecf\u975e\u5e38\u68d2\u4e86\uff0c\u540c\u65f6\u5b98\u7f51\u4e5f\u6709\u4e00\u4efd <a target="_blank" href="https://angular.io/guide/styleguide" data-url="https://angular.io/guide/styleguide">Angular Style Guide</a>\uff08<a target="_blank" href="https://angular.cn/guide/styleguide" data-url="https://angular.cn/guide/styleguide">\u4e2d\u6587\u7248</a>\uff09\u98ce\u683c\u6307\u5357\uff0c\u5efa\u8bae\u597d\u597d\u9605\u8bfb\u51e0\u904d\u3002\u9664\u6b64\u4e4b\u5916\uff0cNG-ALAIN \u4e5f\u6709\u4e00\u90e8\u5206\u7f16\u7801\u98ce\u683c\uff0c\u5982\u4e0b\u8bf4\u660e\u53ef\u80fd\u5bf9\u4e8e\u4f60\u9605\u8bfb\u4ee3\u7801\u65f6\u6709\u7528\u3002</p><h2 id="\u98ce\u683c\u6307\u5357">\u98ce\u683c\u6307\u5357<a onclick="window.location.hash = \'\u98ce\u683c\u6307\u5357\'" class="anchor">#</a></h2><h3 id="\u533a\u57df">\u533a\u57df<a onclick="window.location.hash = \'\u533a\u57df\'" class="anchor">#</a></h3><p>\u5c06\u4e00\u7ec4\u76f8\u540c\u5c5e\u6027\u4f7f\u7528 <code>// #region</code> & <code>// #endregion</code> \u81ea\u7531\u6298\u53e0\u4ee3\u7801\u9884\u5904\u7406\u6307\u4ee4\uff08\u9650VSCODE\uff09\uff0c\u4ee5 <code>shared.module.ts</code> \u6587\u4ef6\u4e3a\u4f8b\uff1a</p><pre class="hljs language-ts"><code>// #region third libs\nimport { NzSchemaFormModule } from \'nz-schema-form\';\nconst THIRDMODULES = [ NzSchemaFormModule ];\n// #endregion</code></pre><p>\u5c06\u6240\u6709\u7b2c\u4e09\u65b9\u6a21\u5757\u653e\u5728 <code>third libs</code> \u533a\u57df\u5f53\u4e2d\uff0c\u5e76\u7edf\u4e00\u5c06\u6ce8\u518c\u6a21\u5757\u653e\u8fdb <code>THIRDMODULES</code> \u53d8\u91cf\u4e2d\u3002\u4f60\u65e0\u987b\u518d\u5173\u5fc3\u5bfc\u5165\u548c\u5bfc\u51fa\u7684\u95ee\u9898\uff0c\u56e0\u4e3a <code>THIRDMODULES</code> \u6570\u7ec4\u9ed8\u8ba4\u52a0\u5165\u5bfc\u5165\u548c\u5bfc\u51fa\u884c\u5217\u4e2d\u3002</p><p>\u5f53\u6211\u4eec\u5728\u9605\u8bfb\u4e00\u4e2a\u6bd4\u8f83\u957f\u6587\u4ef6\u65f6\uff0c\u53ef\u4ee5\u5728VSCODE\u91cc\u6298\u53e0\u90e8\u5206\u4ee3\u7801\uff0c\u66f4\u6709\u52a9\u4e8e\u9605\u8bfb\u3002</p><h3 id="API\u6587\u6863">API\u6587\u6863<a onclick="window.location.hash = \'API\u6587\u6863\'" class="anchor">#</a></h3><p>\u5e94\u7528\u603b\u662f\u514d\u4e0d\u4e86\u4e1a\u52a1\u7ec4\u4ef6\u7684\u5f00\u53d1\uff0c\u6211\u4eec\u65e0\u6cd5\u4fdd\u8bc1\u82e5\u5e72\u65f6\u95f4\u4e4b\u540e\u4f60\u8fd8\u80fd\u8bb0\u5f97\u8fd9\u4e9b\uff0c\u56e0\u6b64\u52a1\u5fc5\u5728\u6bcf\u4e00\u4e2a\u4e1a\u52a1\u7ec4\u4ef6\u9644\u5e26 <code>README.md</code> \u6587\u6863\uff0c\u5e76\u63cf\u8ff0API\u3001DEMO\u7b49\u4fe1\u606f\uff0c\u4f8b\u5982\uff1a</p><pre class="hljs language-markdown"><code>## \u4f55\u65f6\u4f7f\u7528\uff1f\n\n\u7565\n\n## DEMO\n\n\u7565\n\n## API\n\n\u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c\n----|------|-----|------\nsrc | \u56fe\u7247\u5730\u5740  | `string` | -</code></pre><h3 id="\u6a21\u5757\u6ce8\u518c">\u6a21\u5757\u6ce8\u518c<a onclick="window.location.hash = \'\u6a21\u5757\u6ce8\u518c\'" class="anchor">#</a></h3><p>\u8bf7\u53c2\u6570<a href="/docs/module" data-url="/docs/module">\u6a21\u5757\u6ce8\u518c\u6307\u5bfc\u539f\u5219</a>\u3002</p><h2 id="\u8f85\u52a9\u9879">\u8f85\u52a9\u9879<a onclick="window.location.hash = \'\u8f85\u52a9\u9879\'" class="anchor">#</a></h2><p><code>ng-alain</code> \u914d\u7f6e\u4e86\u4e00\u4e9b\u9488\u5bf9 CLI \u9009\u9879\uff0c\u4ee5\u4fbf\u66f4\u597d\u8fdb\u884c\u7f16\u7801\u5de5\u4f5c\u3002</p><h3 id="CLI">CLI<a onclick="window.location.hash = \'CLI\'" class="anchor">#</a></h3><p>vscode \u662f\u7f16\u5199 Angular \u6700\u4f73\u7684\u9009\u62e9\uff0c\u4f60\u53ef\u4ee5\u5728\u9879\u76ee\u7684\u4efb\u4f55\u76ee\u5f55\u91cc\u8f93\u5165\uff1a<code>ng g c list</code> \u751f\u6210\u7ec4\u4ef6\u7684\u76f8\u5e94\u7684\u6587\u4ef6\u3002</p><p><code>ng-alain</code> \u9ed8\u8ba4\u914d\u7f6e\u4e86\u4e0d\u751f\u6210\u6837\u5f0f\u6587\u4ef6&\u5355\u5143\u6d4b\u8bd5\uff0c\u56e0\u6b64\uff0c\u4f60\u4f1a\u770b\u5230\u751f\u6210\u7684\u53ea\u6709 <code>.ts</code>\u3001<code>.html</code>\u3002\u8fd9\u662f\u56e0\u4e3a <code>ng-alain</code> \u63d0\u4f9b\u4e86\u975e\u5e38\u4e30\u5bcc\u7684\u6837\u5f0fAPI\uff0c\u5728\u5927\u591a\u6570\u9875\u9762\u4e2d\u81ea\u5b9a\u4e49\u6837\u5f0f\u5e76\u4e0d\u662f\u521a\u9700\u7684\uff1b\u540c\u65f6\uff0c\u5355\u5143\u6d4b\u8bd5\u4e5f\u662f\u5982\u6b64\u3002</p><p>\u5f53\u7136\uff0c\u4f60\u53ef\u4ee5\u5f88\u5bb9\u6613\u5728 <code>angular.json</code> \u4e2d\u8c03\u6574\u9ed8\u8ba4\u914d\u7f6e\u3002</p><h3 id="vscode-snippets">vscode snippets<a onclick="window.location.hash = \'vscode-snippets\'" class="anchor">#</a></h3><p>vscode \u662f\u7f16\u5199 Angular \u6700\u4f73\u7684\u9009\u62e9\uff0c\u81ea\u7136 NG-ALAIN \u4e5f\u5236\u4f5c\u4e86\u76f8\u5e94 snippets \u6269\u5c55\u63d2\u4ef6\uff1a<a target="_blank" href="//marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode" data-url="//marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode">ng-zorro-vscode</a> \u548c <a target="_blank" href="//marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode" data-url="//marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode">ng-alain-vscode</a>\u3002</p><h2 id="\u4e00\u81f4\u7684\u4ee3\u7801\u98ce\u683c">\u4e00\u81f4\u7684\u4ee3\u7801\u98ce\u683c<a onclick="window.location.hash = \'\u4e00\u81f4\u7684\u4ee3\u7801\u98ce\u683c\'" class="anchor">#</a></h2><p>NG-ALAIN \u4f7f\u7528 <a target="_blank" href="https://prettier.io/" data-url="https://prettier.io/">Prettier</a> \u6765\u4f18\u5316\u4ee3\u7801\u98ce\u683c\uff0c\u5e76\u4e14\u4f7f\u5176\u7ed3\u679c\u7b26\u5408 <code>tslint.json</code>\u3002</p><p>\u63a8\u8350\u5b89\u88c5\u51e0\u4e2a\u63d2\u4ef6\u5728 vscode \u4e2d\u66f4\u53cb\u597d\u7684\u5f00\u53d1\uff1a</p><ul><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode">ng-zorro snippets</a></p></li><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode">ng-alain snippets</a></p></li><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier - Code formatter</a></p></li><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig" data-url="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig">EditorConfig for VS Code</a></p></li><li><p><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=joelday.docthis" data-url="https://marketplace.visualstudio.com/items?itemName=joelday.docthis">Document This</a></p></li></ul><blockquote><p>\u53ef\u4ee5\u901a\u8fc7\u914d\u7f6e <code>.vscode/settings.json</code> \u7684 <code>formatOnSave</code> \u5728\u6587\u4ef6\u4fdd\u5b58\u65f6\u81ea\u52a8\u4fee\u590d\u4ee3\u7801\u98ce\u683c\u3002</p></blockquote><h2 id="Git">Git<a onclick="window.location.hash = \'Git\'" class="anchor">#</a></h2><h3 id="pre-commit">pre commit<a onclick="window.location.hash = \'pre-commit\'" class="anchor">#</a></h3><p><code>lint</code> \u53ef\u4ee5\u975e\u5e38\u6709\u6548\u7684\u5e2e\u52a9\u6211\u4eec\u66f4\u65e9\u53d1\u73b0bug\u3001\u66f4\u9ad8\u7684\u53ef\u8bfb\u6027\uff1b\u5982\u679c\u6211\u4eec\u80fd\u591f\u4fdd\u8bc1\u56e2\u961f\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u6bcf\u4e00\u6b21 commit \u524d\u90fd\u81ea\u52a8\u505a\u4e00\u6b21 staged \u4e2d\u6587\u4ef6\u7684 lint \u7684\u8bdd\uff0c\u90a3\u4e0d\u662f\u975e\u5e38\u9177\u5417\uff1f</p><p>NG-ALAIN \u914d\u7f6e\u4e86\u6bcf\u6b21\u5bf9 staged \u8fdb\u884c commit \u65f6\u4f1a\u9884\u5148\u505a lint\uff0c\u82e5\u53d1\u73b0\u9519\u8bef\u5219\u65e0\u6cd5\u63d0\u4ea4\u3002</p><p>\u9ed8\u8ba4\u5f00\u542f\u4e86 <code>*.ts</code>\u3001<code>*.less</code> \u7684\u63d0\u4ea4\u8fc7\u7a0b\u4e2d\u5f3a\u5236\u5bf9\u4ee3\u7801\u8fdb\u884c\u683c\u5f0f\u5316\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u4fee\u6539 <code>package.json</code> \u7684 <code>lint-staged</code> \u8282\u70b9\u6765\u6539\u53d8\u4e9b\u89c4\u5219\uff08\u4f8b\u5982\uff1a<code>prettier --write</code>\uff09\u3002</p></article></section>',meta:{order:90,title:{"en-US":"Style Guide","zh-CN":"\u7f16\u7801\u89c4\u8303\u5efa\u8bae"},type:"Advance"},toc:[{id:"\u98ce\u683c\u6307\u5357",title:"\u98ce\u683c\u6307\u5357",h:2},{id:"\u533a\u57df",title:"\u533a\u57df",h:3},{id:"API\u6587\u6863",title:"API\u6587\u6863",h:3},{id:"\u6a21\u5757\u6ce8\u518c",title:"\u6a21\u5757\u6ce8\u518c",h:3},{id:"\u8f85\u52a9\u9879",title:"\u8f85\u52a9\u9879",h:2},{id:"CLI",title:"CLI",h:3},{id:"vscode-snippets",title:"vscode snippets",h:3},{id:"\u4e00\u81f4\u7684\u4ee3\u7801\u98ce\u683c",title:"\u4e00\u81f4\u7684\u4ee3\u7801\u98ce\u683c",h:2},{id:"Git",title:"Git",h:2},{id:"pre-commit",title:"pre commit",h:3}]}},demo:!1},this.codes=[]},S=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"zh-CN":"docs/theme.md"},content:{"zh-CN":{content:'<section class="markdown"><article></article></section>',meta:{order:10,title:{"en-US":"Theme","zh-CN":"\u4e3b\u9898\u7cfb\u7edf"},type:"Advance",url:"/theme/getting-started"},toc:[]}},demo:!1},this.codes=[]},I=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/upgrade-v2.en-US.md","zh-CN":"docs/upgrade-v2.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>The NG-ALAIN 2.0 changed is mainly demonstrated from two aspects:</p><ul><li><p>Make CURD operations more "natural" development experience(<a target="_blank" href="https://github.com/ng-alain/ng-alain/issues/588" data-url="https://github.com/ng-alain/ng-alain/issues/588">#588</a>)</p></li><li><p>More friendly responsive development</p></li></ul><p>Original <code>simple-table</code>, <code>sf</code> is popular with developer, so NG-ALAIN 2.0 refactors and new three Simple series components:</p><ul><li><p><a href="/components/table" data-url="/components/table">st</a> <= <code>simple-table</code></p><ul><li><p>Input attribute changes, if you use <strong>general configuration priority</strong>, that changes will be much less</p></li><li><p>Column define is compatibled</p></li></ul></li><li><p><a href="/form" data-url="/form">sf</a> Dynamic form</p></li><li><p><a href="/components/view" data-url="/components/view">sv</a> View</p></li><li><p><a href="/components/edit" data-url="/components/edit">se</a> Edit</p></li><li><p><a href="/components/grid" data-url="/components/grid">sg</a> Grid Layout</p></li></ul><p>NG-ALAIN 2.0 enabled new <a target="_blank" href="https://github.com/ng-alain/" data-url="https://github.com/ng-alain/">NG-ALAIN organization</a> and has migrated to the organization, so some links have changed:</p><ul><li><p><a target="_blank" href="https://ng-alain.github.io/ng-alain/" data-url="https://ng-alain.github.io/ng-alain/">DEMO</a></p></li><li><p>1.x <a target="_blank" href="https://ng-alain.github.io/1.x-doc/" data-url="https://ng-alain.github.io/1.x-doc/">Document</a></p></li></ul><p>Note: This migration guide is based on the latest v1 version, Current beta version, the <code>ng update</code> will be supported after release. Changes scaffolding and <code>@delon/*</code> class library, The following is a detailed description of the two parts.</p><h2 id="Scaffold">Scaffold<a onclick="window.location.hash = \'Scaffold\'" class="anchor">#</a></h2><p>Scaffolding has some <strong>BREAKING CHANGES</strong>, We refactoring layout styles using BEM naming, All changes in pull <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files" data-url="https://github.com/ng-alain/ng-alain/pull/673/files">#673</a>, All <strong>#diff</strong> and links can be opened directly to the specific details of the change.</p><h3 id="1.-Dependency-package">1. Dependency package<a onclick="window.location.hash = \'1.-Dependency-package\'" class="anchor">#</a></h3><p>Upgrade <code>@angular</code> and <code>@delon</code> dependencies to the latest version.</p><ol><li><p>Cancel downgrade less <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2">#diff</a></p></li></ol><h3 id="2.-Layout">2. Layout<a onclick="window.location.hash = \'2.-Layout\'" class="anchor">#</a></h3><p>Because of the BEM style naming, you need to modify style name of <code>src/app/layout/default</code>.</p><h4 id="BREAKING-CHANGES">BREAKING CHANGES<a onclick="window.location.hash = \'BREAKING-CHANGES\'" class="anchor">#</a></h4><p><strong>Default Layout</strong></p><ol><li><p><code>default.component.html</code> remove <code>wrapper</code>, And add <code>alain-default__</code> prefix to all styles <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-9612c23254b7dc14e5c53e51b1bca111" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-9612c23254b7dc14e5c53e51b1bca111">#diff</a></p></li><li><p><code>default.component.ts</code> add <code>alain-default</code> class name <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-22fe6ac5f1a555ff396d16fabf60a675R25" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-22fe6ac5f1a555ff396d16fabf60a675R25">#diff</a></p></li><li><p>Other <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-1f3f3064a6d8f8166fcc1942f89ff05f" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-1f3f3064a6d8f8166fcc1942f89ff05f">header</a> and <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-769b589ea25ae4b5a6f1cce29a2ce63d" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-769b589ea25ae4b5a6f1cce29a2ce63d">sidebar</a></p></li><li><p>Use <code>alain-default__content-title</code> instead of <code>content__title</code>, can be searched for and replaced it.</p></li></ol><p><strong>Fullscreen Layout</strong></p><ol><li><p><code>fullscreen.component.ts</code> add <code>alain-fullscreen</code> class name <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-d8f5e3ca4fcf1fd0a9b262a0bb0ceefa" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-d8f5e3ca4fcf1fd0a9b262a0bb0ceefa">#diff</a></p></li></ol><h4 id="New-features">New features<a onclick="window.location.hash = \'New-features\'" class="anchor">#</a></h4><ul><li><p>Add <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-eb34ac4377d878ea489b5c2c9f498f03R17" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-eb34ac4377d878ea489b5c2c9f498f03R17">SettingDrawer</a> panel</p><ul><li><p>Only for development mode</p></li><li><p>Dependent on <a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/4cd7fac7c83f7ee9907c94819087bce347726cc7/src/assets/alain-default.less" data-url="https://github.com/ng-alain/ng-alain/blob/4cd7fac7c83f7ee9907c94819087bce347726cc7/src/assets/alain-default.less">src/assets/alain-default.less</a></p></li></ul></li><li><p>Add color-weak <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-5c26d2c8f8838f32ace87fdecd6344eaR31" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-5c26d2c8f8838f32ace87fdecd6344eaR31">#diff</a></p></li><li><p>Force close all <code>NzModel</code> when switching routes <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-5c26d2c8f8838f32ace87fdecd6344eaR61" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-5c26d2c8f8838f32ace87fdecd6344eaR61">#diff</a></p></li></ul><h2 id="delon-library">delon library<a onclick="window.location.hash = \'delon-library\'" class="anchor">#</a></h2><h3 id="New-library">New library<a onclick="window.location.hash = \'New-library\'" class="anchor">#</a></h3><table><thead><tr><th>Old</th><th>New</th><th>Description</th></tr></thead><tbody><tr><td><code>abc/chart</code></td><td><code>chart</code></td><td>G2 chart <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-6c960904023c582a766661950a35b283R8" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-6c960904023c582a766661950a35b283R8">#diff</a></td></tr><tr><td><code>abc/number-info</code></td><td><code>chart</code></td><td>-</td></tr><tr><td><code>abc/trend</code></td><td><code>chart</code></td><td>-</td></tr></tbody></table><h3 id="Component-name-of-abc">Component name of abc<a onclick="window.location.hash = \'Component-name-of-abc\'" class="anchor">#</a></h3><table><thead><tr><th>Old</th><th>New</th><th>ng update</th><th>Description</th></tr></thead><tbody><tr><td><code>simple-table</code></td><td><code>st</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>desc-list</code></td><td><code>sv</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>simple-html-form</code></td><td><code>se</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>standard-form-row</code></td><td><code>se</code></td><td>\u221a</td><td>Error reminder</td></tr></tbody></table><p>e.g:</p><pre class="hljs language-diff"><code>- <simple-table></simple-table>\n+ <st></st></code></pre><h3 id="Use-input-instead-of-ContentChild">Use input instead of ContentChild<a onclick="window.location.hash = \'Use-input-instead-of-ContentChild\'" class="anchor">#</a></h3><table><thead><tr><th>Component</th><th>Old ContentChild</th><th>New Property</th><th>ng update</th><th>Description</th></tr></thead><tbody><tr><td><code>st</code></td><td><code>body</code></td><td><code>body</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>st</code></td><td><code>expand</code></td><td><code>expand</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>footer-toolbar</code></td><td><code>extra</code></td><td><code>extra</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>page-header</code></td><td><code>breadcrumb</code></td><td><code>breadcrumb</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>page-header</code></td><td><code>logo</code></td><td><code>logo</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>page-header</code></td><td><code>action</code></td><td><code>action</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>page-header</code></td><td><code>content</code></td><td><code>content</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>page-header</code></td><td><code>extra</code></td><td><code>extra</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>page-header</code></td><td><code>tab</code></td><td><code>tab</code></td><td>\u221a</td><td>-</td></tr></tbody></table><p>e.g:</p><pre class="hljs language-diff"><code>- <page-header>\n+ <page-header [action]="action">\n-   <ng-template #action></ng-template>\n- </page-header></code></pre><h3 id="Component-property-of-abc">Component property of abc<a onclick="window.location.hash = \'Component-property-of-abc\'" class="anchor">#</a></h3><table><thead><tr><th>Component</th><th>Old</th><th>New</th><th>ng update</th><th>Description</th></tr></thead><tbody><tr><td><code>page-header</code></td><td><code>home_link</code></td><td><code>homeLink</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>page-header</code></td><td><code>home_i18n</code></td><td><code>homeI18n</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>st</code></td><td><code>sortReName</code></td><td>Removed</td><td>\u221a</td><td>Error reminder, Just only via <code>STColumn.sort.reName</code></td></tr></tbody></table><p>e.g:</p><pre class="hljs language-diff"><code>- <page-header home_link="/">\n+ <page-header homeLink="/"></code></pre><h3 id="Configuration-of-abc">Configuration of abc<a onclick="window.location.hash = \'Configuration-of-abc\'" class="anchor">#</a></h3><table><thead><tr><th>Injection Token</th><th>New</th><th>ng update</th><th>Description</th></tr></thead><tbody><tr><td><code>DA_XLSX_CONFIG</code></td><td><code>XlsxConfig</code></td><td>\xd7</td><td>-</td></tr><tr><td><code>DA_ZIP_CONFIG</code></td><td><code>ZipConfig</code></td><td>\xd7</td><td>-</td></tr></tbody></table><h3 id="simple-table">simple-table<a onclick="window.location.hash = \'simple-table\'" class="anchor">#</a></h3><p><code>simple-table</code> component changed to <code>st</code>, includes attributes and column changes.</p><h4 id="Attributes">Attributes<a onclick="window.location.hash = \'Attributes\'" class="anchor">#</a></h4><table><thead><tr><th>Old Property</th><th>New Property</th><th>Sub Property</th><th>ng update</th><th>Compatible 1.x</th><th>Description</th></tr></thead><tbody><tr><td><code>[extraParams]</code></td><td><code>req</code></td><td><code>params</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[reqReName]</code></td><td><code>req</code></td><td><code>reName</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[reqMethod]</code></td><td><code>req</code></td><td><code>method</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[reqHeader]</code></td><td><code>req</code></td><td><code>header</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[reqBody]</code></td><td><code>req</code></td><td><code>body</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[resReName]</code></td><td><code>res</code></td><td><code>reName</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[preDataChange]</code></td><td><code>res</code></td><td><code>process</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[frontPagination]</code></td><td><code>page</code></td><td><code>front</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[zeroIndexedOnPage]</code></td><td><code>page</code></td><td><code>zeroIndexed</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[pagePlacement]</code></td><td><code>page</code></td><td><code>placement</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[showPagination]</code></td><td><code>page</code></td><td><code>show</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[showSizeChanger]</code></td><td><code>page</code></td><td><code>showSize</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[pageSizeOptions]</code></td><td><code>page</code></td><td><code>pageSizes</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[showQuickJumper]</code></td><td><code>page</code></td><td><code>showQuickJumper</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[showTotal]</code></td><td><code>page</code></td><td><code>total</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[isPageIndexReset]</code></td><td><code>page</code></td><td><code>indexReset</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[toTopInChange]</code></td><td><code>page</code></td><td><code>toTop</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[toTopOffset]</code></td><td><code>page</code></td><td><code>toTopOffset</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>(checkboxChange)</code></td><td><code>(change)</code></td><td>-</td><td>\u221a</td><td>\xd7</td><td>Error reminder</td></tr><tr><td><code>(radioChange)</code></td><td><code>(change)</code></td><td>-</td><td>\u221a</td><td>\xd7</td><td>Error reminder</td></tr><tr><td><code>(sortChange)</code></td><td><code>(change)</code></td><td>-</td><td>\u221a</td><td>\xd7</td><td>Error reminder</td></tr><tr><td><code>(filterChange)</code></td><td><code>(change)</code></td><td>-</td><td>\u221a</td><td>\xd7</td><td>Error reminder</td></tr><tr><td><code>(rowClick)</code></td><td><code>(change)</code></td><td>-</td><td>\u221a</td><td>\xd7</td><td>Error reminder</td></tr><tr><td><code>(rowDblClick)</code></td><td><code>(change)</code></td><td>-</td><td>\u221a</td><td>\xd7</td><td>Error reminder</td></tr></tbody></table><blockquote><p>A demo <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-f573fc0900f21b377dac432f1668c584L164" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-f573fc0900f21b377dac432f1668c584L164">#diff</a></p></blockquote><p>e.g:</p><pre class="hljs language-diff"><code>- <simple-table [extraParams]="params" [reqReName]="reqReName">\n+ <st [req]="{params: params, reName: reqReName}"></code></pre><h4 id="Column-Schema">Column Schema<a onclick="window.location.hash = \'Column-Schema\'" class="anchor">#</a></h4><p>\u5c06\u6240\u6709 <code>type</code> \u6240\u5bf9\u5e94\u7684\u5c5e\u6027\u91cd\u65b0\u5b9a\u4e49\u4e3a\u72ec\u7acb\u5b50\u5c5e\u6027\u4f7f\u5176\u5217\u63cf\u8ff0\u7684\u5b9a\u4e49\u66f4\u5185\u805a\uff0c\u539f <code>SimpleTableColumn</code> \u66ff\u6362 <code>STColumn</code>\u3002</p><blockquote><p>\u540c\u65f6\u4fdd\u6301 <code>simple-table</code> \u5217\u63cf\u8ff0\u7684\u517c\u5bb9\u6027\uff0c\u4e14\u517c\u5bb9\u4f1a\u5728 <code>3.x</code> \u65f6\u88ab\u79fb\u9664\u3002</p></blockquote><table><thead><tr><th>\u539f\u5c5e\u6027\u540d</th><th>\u65b0\u5c5e\u6027\u540d</th><th>ng update</th><th>\u517c\u5bb9\u5904\u7406</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>sort</code></td><td><code>sort.default</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>sorter</code></td><td><code>sort.compare</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>sortKey</code></td><td><code>sort.key</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>sortReName</code></td><td><code>sort.reName</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filter</code></td><td><code>fitler</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filters</code></td><td><code>fitler.menus</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filtered</code></td><td><code>fitler.default</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filterIcon</code></td><td><code>fitler.icon</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filterConfirmText</code></td><td><code>fitler.confirmText</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filterClearText</code></td><td><code>fitler.clearText</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filterMultiple</code></td><td><code>fitler.multiple</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filterKey</code></td><td><code>fitler.key</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filterReName</code></td><td><code>fitler.reName</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>ynTruth</code></td><td><code>yn.truth</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>ynYes</code></td><td><code>yn.yes</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>ynNo</code></td><td><code>yn.no</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>buttons.component</code></td><td><code>buttons.modal.component</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>buttons.params</code></td><td><code>buttons.modal.params</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>buttons.paramName</code></td><td><code>buttons.modal.paramsName</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>buttons.size</code></td><td><code>buttons.modal.size</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>buttons.modalOptions</code></td><td><code>buttons.modal.modalOptions</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr></tbody></table><h4 id="SimpleTableMultiSort">SimpleTableMultiSort<a onclick="window.location.hash = \'SimpleTableMultiSort\'" class="anchor">#</a></h4><table><thead><tr><th>Old Property</th><th>New Property</th><th>ng update</th><th>Compatible 1.x</th><th>Description</th></tr></thead><tbody><tr><td><code>name_separator</code></td><td><code>nameSeparator</code></td><td>\xd7</td><td>\xd7</td><td>-</td></tr></tbody></table><h3 id="chart-library">chart library<a onclick="window.location.hash = \'chart-library\'" class="anchor">#</a></h3><table><thead><tr><th>Old Name</th><th>New Name</th><th>ng update</th><th>Description</th></tr></thead><tbody><tr><td><code>g2-chart</code></td><td><code>g2-custom</code></td><td>-</td><td>-</td></tr></tbody></table><h2 id="theme-library">theme library<a onclick="window.location.hash = \'theme-library\'" class="anchor">#</a></h2><h3 id="Layout">Layout<a onclick="window.location.hash = \'Layout\'" class="anchor">#</a></h3><p><a href="/theme/default" data-url="/theme/default">Default layout</a> and <a href="/theme/fullscreen" data-url="/theme/fullscreen">fullscreen layout</a> style naming refactored to BEM format, refer to <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files" data-url="https://github.com/ng-alain/ng-alain/pull/673/files">commit</a> for details.</p><p>So you need to specify the layout style in <code>src/styles.less</code>:</p><pre class="hljs language-less"><code>@import \'~@delon/theme/styles/index\';\n// Defualt layout\n@import \'~@delon/theme/styles/layout/default/index\';\n// Fullscreen layout\n@import \'~@delon/theme/styles/layout/fullscreen/index\';\n// @delon/abc library\n@import \'~@delon/abc/index\';\n// @delon/chart G2 Chart library\n@import \'~@delon/chart/index\';</code></pre><h3 id="Menu">Menu<a onclick="window.location.hash = \'Menu\'" class="anchor">#</a></h3><table><thead><tr><th>Old Property</th><th>New Property</th><th>ng update</th><th>Compatible 1.x</th><th>Description</th></tr></thead><tbody><tr><td><code>badge_dot</code></td><td><code>badgeDot</code></td><td>\xd7</td><td>\xd7</td><td>-</td></tr><tr><td><code>badge_status</code></td><td><code>badgeStatus</code></td><td>\xd7</td><td>\xd7</td><td>-</td></tr><tr><td><code>shortcut_root</code></td><td><code>shortcutRoot</code></td><td>\xd7</td><td>\xd7</td><td>-</td></tr></tbody></table><h2 id="ng-update">ng update<a onclick="window.location.hash = \'ng-update\'" class="anchor">#</a></h2><p>The <code>ng update</code> upgrade provided by 2.0 is based on the <a target="_blank" href="https://github.com/ng-alain/ng-alain/tree/1.x" data-url="https://github.com/ng-alain/ng-alain/tree/1.x">1.x</a> branch, please make sure commit you changing codes before running <code>ng update</code> command.</p><p><strong>NOTE:</strong></p><ul><li><p>Project size determines execution time, but can\'t (Just Angular Cli question) report notification</p></li><li><p>Do\'t changes <code>@delon/*</code>, <code>ng-alain</code> version information of <code>package.json</code>, the command line will automatically fix it</p></li><li><p>You can run <code>ng update</code> before upgrading to check if it\'s supported</p></li><li><p>When the HTML file is changed, it will be automatically HTML formatted</p></li><li><p>Log</p><ul><li><p><code>Fixed 1 error(s) in</code> Correct changed repair log</p></li><li><p><code>ERROR:</code> Need manual processing (e.g: <code>standard-form-row</code> component has been removed)</p></li></ul></li></ul><pre class="hljs language-bash"><code># 1. Removes node_modules, package-lock.json, yarn.lock\nyarn\n# 2.Forced installation of `parse5`\nyarn add parse5@^5.0.0 -D\n# 3. Running\nng update ng-alain --next</code></pre><p><strong>Uncovered part</strong></p><ul><li><p>All of the above documents are identified as <code>x</code> in the ng update column</p></li><li><p>If you use <code>g2</code> components, you need import <code>DelonChartModule</code> to <code>shared.module.ts</code></p></li><li><p>Top business menu components directory <code>header/components</code>, need to change the <code>item</code> style name to <code>alain-default__nav-item</code></p></li><li><p>Demo pages corresponding style changed reference <a target="_blank" href="https://github.com/ng-alain/ng-alain" data-url="https://github.com/ng-alain/ng-alain">ng-alain</a> repository</p></li></ul></article></section>',meta:{order:50,type:"Other",title:"Upgrade to V2"},toc:[{id:"Scaffold",title:"Scaffold",h:2},{id:"1.-Dependency-package",title:"1. Dependency package",h:3},{id:"2.-Layout",title:"2. Layout",h:3},{id:"delon-library",title:"delon library",h:2},{id:"New-library",title:"New library",h:3},{id:"Component-name-of-abc",title:"Component name of abc",h:3},{id:"Use-input-instead-of-ContentChild",title:"Use input instead of ContentChild",h:3},{id:"Component-property-of-abc",title:"Component property of abc",h:3},{id:"Configuration-of-abc",title:"Configuration of abc",h:3},{id:"simple-table",title:"simple-table",h:3},{id:"chart-library",title:"chart library",h:3},{id:"theme-library",title:"theme library",h:2},{id:"Layout",title:"Layout",h:3},{id:"Menu",title:"Menu",h:3},{id:"ng-update",title:"ng update",h:2}]},"zh-CN":{content:'<section class="markdown"><article><p>NG-ALAIN 2.0 \u53d8\u66f4\u4e3b\u8981\u4ece\u4e24\u4e2a\u65b9\u9762\uff1a</p><ul><li><p>\u4f7f CURD \u64cd\u4f5c\u66f4\u201c\u81ea\u7136\u201d\u5f00\u53d1\u4f53\u9a8c\uff08<a target="_blank" href="https://github.com/ng-alain/ng-alain/issues/588" data-url="https://github.com/ng-alain/ng-alain/issues/588">#588</a>\uff09</p></li><li><p>\u66f4\u53cb\u597d\u54cd\u5e94\u5f0f\u5f00\u53d1</p></li></ul><p>\u539f <code>simple-table</code>\u3001<code>sf</code> \u662f\u53d7\u5927\u5bb6\u559c\u6b22\u7684\u7ec4\u4ef6\u4e4b\u4e00\uff0c\u56e0\u6b64 NG-ALAIN 2.0 \u91cd\u6784\u5e76\u589e\u52a0\u4e09\u4e2a Simple \u7cfb\u5217\u7ec4\u4ef6\uff1a</p><ul><li><p><a href="/components/table" data-url="/components/table">st</a> \u539f <code>simple-table</code></p><ul><li><p>\u8f93\u5165\u5c5e\u6027\u7684\u53d8\u66f4\uff0c\u82e5\u4f60\u4e4b\u524d<strong>\u901a\u7528\u914d\u7f6e\u4f18\u5148</strong>\u6765\u4f7f\u7528\u7684\u8bdd\uff0c\u8fd9\u4e9b\u6539\u53d8\u4f1a\u5c11\u975e\u5e38\u591a</p></li><li><p>\u5217\u63cf\u8ff0\u6240\u6709\u7684\u53d8\u66f4\u90fd\u505a\u517c\u5bb9\u5904\u7406</p></li></ul></li><li><p><a href="/form" data-url="/form">sf</a> \u52a8\u6001\u8868\u5355</p></li><li><p><a href="/components/view" data-url="/components/view">sv</a> \u67e5\u770b</p></li><li><p><a href="/components/edit" data-url="/components/edit">se</a> \u7f16\u8f91</p></li><li><p><a href="/components/grid" data-url="/components/grid">sg</a> \u6805\u683c\u5e03\u5c40</p></li></ul><p>NG-ALAIN 2.0 \u542f\u7528\u5168\u65b0\u7684 <a target="_blank" href="https://github.com/ng-alain/" data-url="https://github.com/ng-alain/">NG-ALAIN \u7ec4\u7ec7</a>\uff0c\u5e76\u5df2\u7ecf\u5c06\u76f8\u5173\u7684\u7c7b\u5e93\u4ee3\u7801\u8fc1\u79fb\u81f3\u8be5\u7ec4\u7ec7\u4e0b\uff0c\u56e0\u6b64\u90e8\u5206\u793a\u4f8b\u94fe\u63a5\u4e5f\u505a\u6539\u53d8\uff1a</p><ul><li><p><a target="_blank" href="https://ng-alain.github.io/ng-alain/" data-url="https://ng-alain.github.io/ng-alain/">DEMO</a></p></li><li><p>\u539f 1.x <a target="_blank" href="https://ng-alain.github.io/1.x-doc/" data-url="https://ng-alain.github.io/1.x-doc/">\u6587\u6863\u7ad9</a></p></li></ul><p>\u6b64\u6587\u6863\u662f\u4e3a\u4e86\u66f4\u597d\u5c06\u4f60\u7684\u9879\u76ee\u8fc1\u79fb\u81f3 2.0\uff0c\u5f53\u524d\u7248\u672c\u8fd8\u662f Beta \u7248\u672c\uff0c\u4f1a\u5728\u6b63\u5f0f\u7248\u540e\u53d1\u5e03\u90e8\u5206\u7ec4\u4ef6\u53d8\u66f4\u7684 <code>ng update</code> \u652f\u6301\uff0c\u53d8\u66f4\u5206\u4e3a\u4e24\u4e2a\u5927\u90e8\u5206\uff1a\u811a\u624b\u67b6\u548c <code>@delon/*</code> \u7c7b\u5e93\uff0c\u4ee5\u4e0b\u662f\u9488\u5bf9\u4e24\u4e2a\u90e8\u5206\u7684\u7ec6\u8282\u8bf4\u660e\u3002</p><h2 id="\u811a\u624b\u67b6">\u811a\u624b\u67b6<a onclick="window.location.hash = \'\u811a\u624b\u67b6\'" class="anchor">#</a></h2><p>\u811a\u624b\u67b6\u7684\u53d8\u66f4\u5e26\u6709\u4e00\u4e9b\u7834\u574f\u6027\uff0c\u4e3b\u8981\u662f\u91cd\u6784\u5e03\u5c40\u6837\u5f0f\u91c7\u7528 BEM \u547d\u540d\uff0c\u6240\u6709\u53d8\u66f4\u90fd\u5728 <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files" data-url="https://github.com/ng-alain/ng-alain/pull/673/files">#673</a> \u5185\uff08\u5efa\u8bae\u5728 Github \u4e0a\u5b89\u88c5 <a target="_blank" href="https://github.com/buunguyen/octotree" data-url="https://github.com/buunguyen/octotree">octotree</a> \u53ef\u4ee5\u66f4\u597d\u7684\u4e86\u89e3\u53d8\u66f4\u7ec6\u8282\uff09\uff0c\u6240\u6709 <strong>#diff</strong> \u548c\u6709\u6548\u94fe\u63a5\u90fd\u53ef\u4ee5\u76f4\u63a5\u6253\u5f00\u5b9a\u4f4d\u5230\u53d8\u66f4\u5177\u4f53\u7ec6\u8282\u3002</p><h3 id="1\u3001\u4f9d\u8d56\u5305">1\u3001\u4f9d\u8d56\u5305<a onclick="window.location.hash = \'1\u3001\u4f9d\u8d56\u5305\'" class="anchor">#</a></h3><p>\u5347\u7ea7 <code>@angular</code> \u548c <code>@delon</code> \u4f9d\u8d56\u5305\u81f3\u6700\u65b0\u7248\u672c</p><ul><li><p>\u53d6\u6d88\u964d\u7ea7 less <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2">#diff</a></p></li></ul><h3 id="2\u3001\u5e03\u5c40">2\u3001\u5e03\u5c40<a onclick="window.location.hash = \'2\u3001\u5e03\u5c40\'" class="anchor">#</a></h3><p>\u7531\u4e8e\u91cd\u65b0\u91c7\u7528 BEM \u6765\u547d\u540d\u9ed8\u8ba4\u5e03\u5c40\uff0c\u8fd9\u5bfc\u81f4\u6240\u6709 <code>src/app/layout/default</code> \u9700\u8981\u4fee\u6539\u76f8\u5e94\u6837\u5f0f\u540d\u79f0\u3002</p><h4 id="\u4fee\u6539\u90e8\u5206">\u4fee\u6539\u90e8\u5206<a onclick="window.location.hash = \'\u4fee\u6539\u90e8\u5206\'" class="anchor">#</a></h4><p><strong>\u9ed8\u8ba4\u5e03\u5c40</strong></p><ol><li><p><code>default.component.html</code> \u79fb\u9664 <code>wrapper</code>\uff0c\u5e76\u5bf9\u6240\u6709\u6837\u5f0f\u589e\u52a0 <code>alain-default__</code> \u524d\u7f00 <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-9612c23254b7dc14e5c53e51b1bca111" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-9612c23254b7dc14e5c53e51b1bca111">#diff</a></p></li><li><p><code>default.component.ts</code> \u589e\u52a0 <code>alain-default</code> \u6837\u5f0f <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-22fe6ac5f1a555ff396d16fabf60a675R25" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-22fe6ac5f1a555ff396d16fabf60a675R25">#diff</a></p></li><li><p>\u5176\u4ed6 <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-1f3f3064a6d8f8166fcc1942f89ff05f" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-1f3f3064a6d8f8166fcc1942f89ff05f">header</a> <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-769b589ea25ae4b5a6f1cce29a2ce63d" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-769b589ea25ae4b5a6f1cce29a2ce63d">sidebar</a> \u7ec6\u8282</p></li><li><p>\u6807\u9898 <code>content__title</code> \u53d8\u6210 <code>alain-default__content-title</code>\uff0c\u53ef\u4ee5\u76f4\u63a5\u641c\u7d22\u66ff\u6362\u3002</p></li></ol><p><strong>\u5168\u5c4f\u5e03\u5c40</strong></p><ol><li><p><code>fullscreen.component.ts</code> \u589e\u52a0 <code>alain-fullscreen</code> \u6837\u5f0f <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-d8f5e3ca4fcf1fd0a9b262a0bb0ceefa" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-d8f5e3ca4fcf1fd0a9b262a0bb0ceefa">#diff</a></p></li></ol><h4 id="\u65b0\u589e\u529f\u80fd">\u65b0\u589e\u529f\u80fd<a onclick="window.location.hash = \'\u65b0\u589e\u529f\u80fd\'" class="anchor">#</a></h4><ul><li><p>\u589e\u52a0 <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-eb34ac4377d878ea489b5c2c9f498f03R17" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-eb34ac4377d878ea489b5c2c9f498f03R17">SettingDrawer</a> \u9762\u677f</p><ul><li><p>\u53ea\u5bf9\u5f00\u53d1\u6a21\u5f0f\u6709\u6548</p></li><li><p>\u9700\u8981\u4f9d\u8d56 <a target="_blank" href="https://github.com/ng-alain/ng-alain/blob/4cd7fac7c83f7ee9907c94819087bce347726cc7/src/assets/alain-default.less" data-url="https://github.com/ng-alain/ng-alain/blob/4cd7fac7c83f7ee9907c94819087bce347726cc7/src/assets/alain-default.less">src/assets/alain-default.less</a></p></li></ul></li><li><p>\u589e\u52a0\u8272\u5f31\u6a21\u5f0f <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-5c26d2c8f8838f32ace87fdecd6344eaR31" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-5c26d2c8f8838f32ace87fdecd6344eaR31">#diff</a></p></li><li><p>\u589e\u52a0\u5207\u6362\u8def\u7531\u65f6\u5f3a\u5236\u5173\u6389\u6240\u6709\u5df2\u6253\u5f00 <code>NzModel</code> <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-5c26d2c8f8838f32ace87fdecd6344eaR61" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-5c26d2c8f8838f32ace87fdecd6344eaR61">#diff</a></p></li></ul><h2 id="delon-\u7c7b\u5e93">delon \u7c7b\u5e93<a onclick="window.location.hash = \'delon-\u7c7b\u5e93\'" class="anchor">#</a></h2><h3 id="\u65b0\u7c7b\u5e93">\u65b0\u7c7b\u5e93<a onclick="window.location.hash = \'\u65b0\u7c7b\u5e93\'" class="anchor">#</a></h3><table><thead><tr><th>\u539f\u6240\u5728\u5e93</th><th>\u65b0\u5e93</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>abc/chart</code></td><td><code>chart</code></td><td>G2 \u56fe\u8868\uff0c\u9700\u8981\u91cd\u65b0\u5f15\u5165 <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-6c960904023c582a766661950a35b283R8" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-6c960904023c582a766661950a35b283R8">#diff</a></td></tr><tr><td><code>abc/number-info</code></td><td><code>chart</code></td><td>-</td></tr><tr><td><code>abc/trend</code></td><td><code>chart</code></td><td>-</td></tr></tbody></table><h3 id="abc-\u7c7b\u5e93\u7ec4\u4ef6\u540d\u53d8\u66f4">abc \u7c7b\u5e93\u7ec4\u4ef6\u540d\u53d8\u66f4<a onclick="window.location.hash = \'abc-\u7c7b\u5e93\u7ec4\u4ef6\u540d\u53d8\u66f4\'" class="anchor">#</a></h3><table><thead><tr><th>\u539f\u7ec4\u4ef6\u540d</th><th>\u65b0\u7ec4\u4ef6\u540d</th><th>ng update</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>simple-table</code></td><td><code>st</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>desc-list</code></td><td><code>sv</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>simple-html-form</code></td><td><code>se</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>standard-form-row</code></td><td><code>se</code></td><td>\u221a</td><td>\u8fc7\u671f\u63d0\u9192</td></tr></tbody></table><p>\u4f8b\u5982\uff1a</p><pre class="hljs language-diff"><code>- <simple-table></simple-table>\n+ <st></st></code></pre><h3 id="\u4f7f\u7528-Input-\u66ff\u4ee3-ContentChild">\u4f7f\u7528 <code>Input</code> \u66ff\u4ee3 <code>ContentChild</code><a onclick="window.location.hash = \'\u4f7f\u7528-Input-\u66ff\u4ee3-ContentChild\'" class="anchor">#</a></h3><table><thead><tr><th>\u6240\u5c5e\u7ec4\u4ef6</th><th>\u539fContentChild</th><th>\u65b0\u5c5e\u6027\u540d</th><th>ng update</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>st</code></td><td><code>body</code></td><td><code>body</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>st</code></td><td><code>expand</code></td><td><code>expand</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>footer-toolbar</code></td><td><code>extra</code></td><td><code>extra</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>page-header</code></td><td><code>breadcrumb</code></td><td><code>breadcrumb</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>page-header</code></td><td><code>logo</code></td><td><code>logo</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>page-header</code></td><td><code>action</code></td><td><code>action</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>page-header</code></td><td><code>content</code></td><td><code>content</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>page-header</code></td><td><code>extra</code></td><td><code>extra</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>page-header</code></td><td><code>tab</code></td><td><code>tab</code></td><td>\u221a</td><td>-</td></tr></tbody></table><p>\u4f8b\u5982\uff1a</p><pre class="hljs language-diff"><code>- <page-header>\n+ <page-header [action]="action">\n-   <ng-template #action></ng-template>\n- </page-header></code></pre><h3 id="abc-\u7c7b\u5e93\u7ec4\u4ef6\u5c5e\u6027\u540d\u53d8\u66f4">abc \u7c7b\u5e93\u7ec4\u4ef6\u5c5e\u6027\u540d\u53d8\u66f4<a onclick="window.location.hash = \'abc-\u7c7b\u5e93\u7ec4\u4ef6\u5c5e\u6027\u540d\u53d8\u66f4\'" class="anchor">#</a></h3><table><thead><tr><th>\u6240\u5c5e\u7ec4\u4ef6</th><th>\u539f\u5c5e\u6027\u540d</th><th>\u65b0\u5c5e\u6027\u540d</th><th>ng update</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>page-header</code></td><td><code>home_link</code></td><td><code>homeLink</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>page-header</code></td><td><code>home_i18n</code></td><td><code>homeI18n</code></td><td>\u221a</td><td>-</td></tr><tr><td><code>st</code></td><td><code>sortReName</code></td><td>\u79fb\u9664</td><td>\u221a</td><td>\u8fc7\u671f\u63d0\u9192\uff0c\u4ec5\u4f7f\u7528 <code>STColumn.sort.reName</code> \u503c</td></tr></tbody></table><p>\u4f8b\u5982\uff1a</p><pre class="hljs language-diff"><code>- <page-header home_link="/">\n+ <page-header homeLink="/"></code></pre><h3 id="abc-\u7c7b\u5e93\u7ec4\u4ef6\u914d\u7f6e\u53d8\u66f4">abc \u7c7b\u5e93\u7ec4\u4ef6\u914d\u7f6e\u53d8\u66f4<a onclick="window.location.hash = \'abc-\u7c7b\u5e93\u7ec4\u4ef6\u914d\u7f6e\u53d8\u66f4\'" class="anchor">#</a></h3><table><thead><tr><th>Injection Token</th><th>\u65b0\u65b9\u5f0f</th><th>ng update</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>DA_XLSX_CONFIG</code></td><td><code>XlsxConfig</code></td><td>\xd7</td><td>-</td></tr><tr><td><code>DA_ZIP_CONFIG</code></td><td><code>ZipConfig</code></td><td>\xd7</td><td>-</td></tr></tbody></table><h3 id="simple-table">simple-table<a onclick="window.location.hash = \'simple-table\'" class="anchor">#</a></h3><p><code>simple-table</code> \u7ec4\u4ef6\u53d8\u66f4\u4e3a <code>st</code>\uff0c\u5176\u4e2d\u5305\u62ec\u5c5e\u6027\u3001\u5217\u63cf\u8ff0\u53d8\u66f4\u3002</p><h4 id="\u5c5e\u6027">\u5c5e\u6027<a onclick="window.location.hash = \'\u5c5e\u6027\'" class="anchor">#</a></h4><table><thead><tr><th>\u539f\u5c5e\u6027\u540d</th><th>\u65b0\u5c5e\u6027\u540d</th><th>\u5b50\u53c2\u6570</th><th>ng update</th><th>\u517c\u5bb9\u5904\u7406</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>[extraParams]</code></td><td><code>req</code></td><td><code>params</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[reqReName]</code></td><td><code>req</code></td><td><code>reName</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[reqMethod]</code></td><td><code>req</code></td><td><code>method</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[reqHeader]</code></td><td><code>req</code></td><td><code>header</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[reqBody]</code></td><td><code>req</code></td><td><code>body</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[resReName]</code></td><td><code>res</code></td><td><code>reName</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[preDataChange]</code></td><td><code>res</code></td><td><code>process</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[frontPagination]</code></td><td><code>page</code></td><td><code>front</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[zeroIndexedOnPage]</code></td><td><code>page</code></td><td><code>zeroIndexed</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[pagePlacement]</code></td><td><code>page</code></td><td><code>placement</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[showPagination]</code></td><td><code>page</code></td><td><code>show</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[showSizeChanger]</code></td><td><code>page</code></td><td><code>showSize</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[pageSizeOptions]</code></td><td><code>page</code></td><td><code>pageSizes</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[showQuickJumper]</code></td><td><code>page</code></td><td><code>showQuickJumper</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[showTotal]</code></td><td><code>page</code></td><td><code>total</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[isPageIndexReset]</code></td><td><code>page</code></td><td><code>indexReset</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[toTopInChange]</code></td><td><code>page</code></td><td><code>toTop</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>[toTopOffset]</code></td><td><code>page</code></td><td><code>toTopOffset</code></td><td>\u221a</td><td>-</td><td>-</td></tr><tr><td><code>(checkboxChange)</code></td><td><code>(change)</code></td><td>-</td><td>\u221a</td><td>\xd7</td><td>\u8fc7\u671f\u63d0\u9192</td></tr><tr><td><code>(radioChange)</code></td><td><code>(change)</code></td><td>-</td><td>\u221a</td><td>\xd7</td><td>\u8fc7\u671f\u63d0\u9192</td></tr><tr><td><code>(sortChange)</code></td><td><code>(change)</code></td><td>-</td><td>\u221a</td><td>\xd7</td><td>\u8fc7\u671f\u63d0\u9192</td></tr><tr><td><code>(filterChange)</code></td><td><code>(change)</code></td><td>-</td><td>\u221a</td><td>\xd7</td><td>\u8fc7\u671f\u63d0\u9192</td></tr><tr><td><code>(rowClick)</code></td><td><code>(change)</code></td><td>-</td><td>\u221a</td><td>\xd7</td><td>\u8fc7\u671f\u63d0\u9192</td></tr><tr><td><code>(rowDblClick)</code></td><td><code>(change)</code></td><td>-</td><td>\u221a</td><td>\xd7</td><td>\u8fc7\u671f\u63d0\u9192</td></tr></tbody></table><blockquote><p>\u4e00\u4e2a\u793a\u4f8b\u8bf4\u660e <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files#diff-f573fc0900f21b377dac432f1668c584L164" data-url="https://github.com/ng-alain/ng-alain/pull/673/files#diff-f573fc0900f21b377dac432f1668c584L164">#diff</a></p></blockquote><p>\u4f8b\u5982\uff1a</p><pre class="hljs language-diff"><code>- <simple-table [extraParams]="params" [reqReName]="reqReName">\n+ <st [req]="{params: params, reName: reqReName}"></code></pre><h4 id="\u5217\u63cf\u8ff0">\u5217\u63cf\u8ff0<a onclick="window.location.hash = \'\u5217\u63cf\u8ff0\'" class="anchor">#</a></h4><p>\u5c06\u6240\u6709 <code>type</code> \u6240\u5bf9\u5e94\u7684\u5c5e\u6027\u91cd\u65b0\u5b9a\u4e49\u4e3a\u72ec\u7acb\u5b50\u5c5e\u6027\u4f7f\u5176\u5217\u63cf\u8ff0\u7684\u5b9a\u4e49\u66f4\u5185\u805a\uff0c\u539f <code>SimpleTableColumn</code> \u66ff\u6362 <code>STColumn</code>\u3002</p><blockquote><p>\u540c\u65f6\u4fdd\u6301 <code>simple-table</code> \u5217\u63cf\u8ff0\u7684\u517c\u5bb9\u6027\uff0c\u4e14\u517c\u5bb9\u4f1a\u5728 <code>3.x</code> \u65f6\u88ab\u79fb\u9664\u3002</p></blockquote><table><thead><tr><th>\u539f\u5c5e\u6027\u540d</th><th>\u65b0\u5c5e\u6027\u540d</th><th>ng update</th><th>\u517c\u5bb9\u5904\u7406</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>sort</code></td><td><code>sort.default</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>sorter</code></td><td><code>sort.compare</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>sortKey</code></td><td><code>sort.key</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>sortReName</code></td><td><code>sort.reName</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filter</code></td><td><code>fitler</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filters</code></td><td><code>fitler.menus</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filtered</code></td><td><code>fitler.default</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filterIcon</code></td><td><code>fitler.icon</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filterConfirmText</code></td><td><code>fitler.confirmText</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filterClearText</code></td><td><code>fitler.clearText</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filterMultiple</code></td><td><code>fitler.multiple</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filterKey</code></td><td><code>fitler.key</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>filterReName</code></td><td><code>fitler.reName</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>ynTruth</code></td><td><code>yn.truth</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>ynYes</code></td><td><code>yn.yes</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>ynNo</code></td><td><code>yn.no</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>buttons.component</code></td><td><code>buttons.modal.component</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>buttons.params</code></td><td><code>buttons.modal.params</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>buttons.paramName</code></td><td><code>buttons.modal.paramsName</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>buttons.size</code></td><td><code>buttons.modal.size</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr><tr><td><code>buttons.modalOptions</code></td><td><code>buttons.modal.modalOptions</code></td><td>\xd7</td><td>\u221a</td><td>-</td></tr></tbody></table><h4 id="SimpleTableMultiSort">SimpleTableMultiSort<a onclick="window.location.hash = \'SimpleTableMultiSort\'" class="anchor">#</a></h4><table><thead><tr><th>\u539f\u5c5e\u6027\u540d</th><th>\u65b0\u5c5e\u6027\u540d</th><th>ng update</th><th>\u517c\u5bb9\u5904\u7406</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>name_separator</code></td><td><code>nameSeparator</code></td><td>\xd7</td><td>\xd7</td><td>-</td></tr></tbody></table><h3 id="chart-\u7c7b\u5e93\u7ec4\u4ef6\u540d\u53d8\u66f4">chart \u7c7b\u5e93\u7ec4\u4ef6\u540d\u53d8\u66f4<a onclick="window.location.hash = \'chart-\u7c7b\u5e93\u7ec4\u4ef6\u540d\u53d8\u66f4\'" class="anchor">#</a></h3><table><thead><tr><th>\u539f\u7ec4\u4ef6\u540d</th><th>\u65b0\u7ec4\u4ef6\u540d</th><th>ng update</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>g2-chart</code></td><td><code>g2-custom</code></td><td>\u221a</td><td>-</td></tr></tbody></table><h2 id="theme-\u7c7b\u5e93\u53d8\u66f4">theme \u7c7b\u5e93\u53d8\u66f4<a onclick="window.location.hash = \'theme-\u7c7b\u5e93\u53d8\u66f4\'" class="anchor">#</a></h2><h3 id="\u5e03\u5c40">\u5e03\u5c40<a onclick="window.location.hash = \'\u5e03\u5c40\'" class="anchor">#</a></h3><p><a href="/theme/default" data-url="/theme/default">\u9ed8\u8ba4\u5e03\u5c40</a>\u548c<a href="/theme/fullscreen" data-url="/theme/fullscreen">\u5168\u5c4f\u5e03\u5c40</a>\u6837\u5f0f\u547d\u540d\u91cd\u65b0\u91c7\u7528 BEM \u5f62\u5f0f\uff0c\u8fd9\u5012\u7f6e\u5e03\u5c40\u7684\u6837\u5f0f\u540d\u90fd\u88ab\u6539\u53d8\uff0c\u4f46\u5f88\u5bb9\u6613\u5347\u7ea7\uff0c\u6709\u5173\u7ec6\u8282\u53c2\u8003 <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/673/files" data-url="https://github.com/ng-alain/ng-alain/pull/673/files">commit</a>\u3002</p><p>\u62bd\u79bb\u8fd9\u4e24\u79cd\u5e03\u5c40\u6837\u5f0f\u6210\u72ec\u7acb\u7684\u5f62\u5f0f\u5b58\u5728\uff0c\u56e0\u6b64\u9700\u8981\u5728 <code>src/styles.less</code> \u5355\u72ec\u72ec\u7acb\u5bf9\u5e94\u5e03\u5c40\u7684\u6837\u5f0f\uff1a</p><pre class="hljs language-less"><code>@import \'~@delon/theme/styles/index\';\n// \u9ed8\u8ba4\u5e03\u5c40\n@import \'~@delon/theme/styles/layout/default/index\';\n// \u5168\u5c4f\u5e03\u5c40\n@import \'~@delon/theme/styles/layout/fullscreen/index\';\n// @delon/abc \u4e1a\u52a1\u7ec4\u4ef6\u5e93\n@import \'~@delon/abc/index\';\n// @delon/chart G2\u56fe\u8868\u7ec4\u4ef6\u5e93\n@import \'~@delon/chart/index\';</code></pre><h3 id="Menu">Menu<a onclick="window.location.hash = \'Menu\'" class="anchor">#</a></h3><table><thead><tr><th>\u539f\u5c5e\u6027\u540d</th><th>\u65b0\u5c5e\u6027\u540d</th><th>ng update</th><th>\u517c\u5bb9\u5904\u7406</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>badge_dot</code></td><td><code>badgeDot</code></td><td>\xd7</td><td>\xd7</td><td>-</td></tr><tr><td><code>badge_status</code></td><td><code>badgeStatus</code></td><td>\xd7</td><td>\xd7</td><td>-</td></tr><tr><td><code>shortcut_root</code></td><td><code>shortcutRoot</code></td><td>\xd7</td><td>\xd7</td><td>-</td></tr></tbody></table><h2 id="ng-update">ng update<a onclick="window.location.hash = \'ng-update\'" class="anchor">#</a></h2><p>2.0 \u63d0\u4f9b\u7684 <code>ng update</code> \u5347\u7ea7\u662f\u57fa\u4e8e <a target="_blank" href="https://github.com/ng-alain/ng-alain/tree/1.x" data-url="https://github.com/ng-alain/ng-alain/tree/1.x">1.x</a> \u5206\u652f\u6a21\u677f\uff0c\u4e8b\u5b9e\u4e0a\uff0c\u591a\u591a\u5c11\u5c11\u5df2\u7ecf\u4f1a\u6709\u4e00\u4e9b\u53d8\u66f4\uff0c\u56e0\u6b64\uff0c<code>ng update</code> \u547d\u4ee4\u662f\u65e0\u6cd5\u4fdd\u8bc1\u811a\u624b\u67b6\u8fd9\u4e00\u90e8\u5206\u7684\u51c6\u786e\u6027\uff0c\u56e0\u6b64\u5728\u5347\u7ea7\u4e4b\u524d\u8bf7<strong>\u786e\u4fdd\u7b7e\u5165\u6240\u6709\u4ee3\u7801</strong>\uff0c\u4ee5\u4fbf\u66f4\u597d\u7684\u89c2\u5bdf\u53d8\u66f4\u7eaa\u5f55\u3002</p><p><strong>\u6ce8\u610f\uff1a</strong></p><ul><li><p>\u53d7\u9879\u76ee\u5927\u5c0f\u6267\u884c\u65f6\u95f4\u4f1a\u8d8a\u957f\uff0c\u4f46\u7531\u4e8e\u65e0\u6cd5\uff08\u53d7\u9650Angular Cli\uff09\u62a5\u544a\u901a\u77e5\uff0c\u4f1a\u770b\u8d77\u6765\u50cf\u662f\u5047\u6b7b\u72b6\u6001</p></li><li><p>\u4e0d\u8981\u624b\u52a8\u53d8\u66f4 <code>package.json</code> \u4efb\u4f55 <code>@delon/*</code>\u3001<code>ng-alain</code> \u7248\u672c\u4fe1\u606f\u81f3 <code>2.x</code>\uff0c\u547d\u4ee4\u884c\u4f1a\u81ea\u884c\u5b8c\u6210\u6240\u6709\u7684\u4e00\u5207</p></li><li><p>\u5347\u7ea7\u4e4b\u524d\u53ef\u4ee5\u5c1d\u8bd5\u8fd0\u884c <code>ng update</code> \u4e86\u89e3\u5f53\u524d\u9879\u76ee\u662f\u5426\u652f\u6301</p></li><li><p>\u5f53HTML\u6587\u4ef6\u88ab\u53d8\u66f4\u540e\uff0c\u4f1a\u81ea\u52a8HTML\u683c\u5f0f\u5316\uff0c\u56e0\u6b64\u53ef\u80fd\u4f1a\u66f4\u591a Git Diff \u4fe1\u606f</p></li><li><p>\u65e5\u5fd7\u8bf4\u660e</p><ul><li><p><code>Fixed 1 error(s) in</code> \u8868\u793a\u6b63\u786e\u4fee\u590d\u4e86\u51e0\u9879\u9519\u8bef</p></li><li><p><code>ERROR:</code> \u8868\u793a\u9700\u8981\u624b\u52a8\u5904\u7406\u8be5\u9519\u8bef\uff08\u4f8b\u5982\u5df2\u79fb\u9664\u7ec4\u4ef6\uff40standard-form-row\uff40\uff09</p></li></ul></li></ul><pre class="hljs language-bash"><code># 1\u3001\u5220\u9664 node_modules\u3001package-lock.json \u6216 yarn.lock\nyarn\n# 2\u3001\u5f3a\u5236\u6307\u5b9a `parse5` \u7248\u672c\nyarn add parse5@^5.0.0 -D\n# 3\u3001\u6267\u884c\u5b89\u88c5\nng update ng-alain --next</code></pre><p><strong>\u672a\u8986\u76d6\u90e8\u5206</strong></p><ul><li><p>\u4e0a\u8ff0\u6587\u6863\u6240\u6709\u5728 ng update \u5217\u6807\u8bc6\u4e3a <code>\xd7</code> \u90fd\u9700\u8981\u624b\u52a8\u5904\u7406</p></li><li><p>\u82e5\u4f7f\u7528 <code>g2</code>\uff0c\u9700\u8981\u5bfc\u5165 <code>DelonChartModule</code> \u81f3 <code>shared.module.ts</code></p></li><li><p>\u9876\u90e8\u53f3\u8fb9\u90e8\u5206\u4e1a\u52a1\u83dc\u5355\u7ec4\u4ef6 <code>header/components</code> \u4e0b\u9700\u8981\u5c06 <code>item</code> \u6837\u5f0f\u540d\u53d8\u66f4\u4e3a <code>alain-default__nav-item</code></p></li><li><p>\u90e8\u5206\u793a\u4f8b\u9875\u76f8\u5bf9\u5e94\u7684\u6837\u5f0f\u53d8\u66f4\u81ea\u884c\u53c2\u8003 <a target="_blank" href="https://github.com/ng-alain/ng-alain" data-url="https://github.com/ng-alain/ng-alain">ng-alain</a> \u4ed3\u5e93</p></li></ul></article></section>',meta:{order:50,type:"Other",title:"\u5347\u7ea7\u5230 2.0 \u7248\u672c"},toc:[{id:"\u811a\u624b\u67b6",title:"\u811a\u624b\u67b6",h:2},{id:"1\u3001\u4f9d\u8d56\u5305",title:"1\u3001\u4f9d\u8d56\u5305",h:3},{id:"2\u3001\u5e03\u5c40",title:"2\u3001\u5e03\u5c40",h:3},{id:"delon-\u7c7b\u5e93",title:"delon \u7c7b\u5e93",h:2},{id:"\u65b0\u7c7b\u5e93",title:"\u65b0\u7c7b\u5e93",h:3},{id:"abc-\u7c7b\u5e93\u7ec4\u4ef6\u540d\u53d8\u66f4",title:"abc \u7c7b\u5e93\u7ec4\u4ef6\u540d\u53d8\u66f4",h:3},{id:"\u4f7f\u7528-Input-\u66ff\u4ee3-ContentChild",title:"\u4f7f\u7528 Input \u66ff\u4ee3 ContentChild",h:3},{id:"abc-\u7c7b\u5e93\u7ec4\u4ef6\u5c5e\u6027\u540d\u53d8\u66f4",title:"abc \u7c7b\u5e93\u7ec4\u4ef6\u5c5e\u6027\u540d\u53d8\u66f4",h:3},{id:"abc-\u7c7b\u5e93\u7ec4\u4ef6\u914d\u7f6e\u53d8\u66f4",title:"abc \u7c7b\u5e93\u7ec4\u4ef6\u914d\u7f6e\u53d8\u66f4",h:3},{id:"simple-table",title:"simple-table",h:3},{id:"chart-\u7c7b\u5e93\u7ec4\u4ef6\u540d\u53d8\u66f4",title:"chart \u7c7b\u5e93\u7ec4\u4ef6\u540d\u53d8\u66f4",h:3},{id:"theme-\u7c7b\u5e93\u53d8\u66f4",title:"theme \u7c7b\u5e93\u53d8\u66f4",h:2},{id:"\u5e03\u5c40",title:"\u5e03\u5c40",h:3},{id:"Menu",title:"Menu",h:3},{id:"ng-update",title:"ng update",h:2}]}},demo:!1},this.codes=[]},z=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/upgrade-v8.en-US.md","zh-CN":"docs/upgrade-v8.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>NG-ALAIN 8.0 changes of three parts:</p><table><thead><tr><th>Library</th><th>Support Cli Upgrade</th><th>Description</th></tr></thead><tbody><tr><td>Angular</td><td>Yes</td><td>-</td></tr><tr><td>NG-ZORRO</td><td>No</td><td>Maybe the official version will provide partial support</td></tr><tr><td>Delon</td><td>No</td><td>Only one ACL class library reference</td></tr></tbody></table><h1 id="Requirements">Requirements<a onclick="window.location.hash = \'Requirements\'" class="anchor">#</a></h1><p>Remove unused class libraries:</p><ul><li><p><code>tslint-language-service</code></p></li><li><p><code>core-js</code> Support differential loading after Angular auto management polyfills</p></li></ul><h1 id="Upgrade">Upgrade<a onclick="window.location.hash = \'Upgrade\'" class="anchor">#</a></h1><h2 id="1.Angular">1.Angular<a onclick="window.location.hash = \'1.Angular\'" class="anchor">#</a></h2><p>Angular upgrades can be check each step according to <a target="_blank" href="https://update.angular.io/#7.0:8.0" data-url="https://update.angular.io/#7.0:8.0">update.angular.io</a>, and the following commands can almost seamlessly upgrade breaking changes:</p><pre class="hljs language-bash"><code>ng update @angular/cli @angular/core</code></pre><p>Some changes to the details:</p><ol><li><p>Update the <code>package.json</code> dependency package version information, but not latest version number, you can use <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/1165/files#diff-10" data-url="https://github.com/ng-alain/ng-alain/pull/1165/files#diff-10">#diff-10</a> learn the details</p></li><li><p><strong>Adjust to support differential loading</strong> Update <code>tsconfig.json</code> with <code>module</code> for <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/1165/files#diff-e5e546dd2eb0351f813d63d1b39dbc48R8" data-url="https://github.com/ng-alain/ng-alain/pull/1165/files#diff-e5e546dd2eb0351f813d63d1b39dbc48R8">esnext</a>, and remove all related introductions of <code>core-js</code> under <code>polyfills.ts</code></p></li><li><p>Auto handle breaking changes: <code>ViewChild</code> or <code>ContentChild</code>. For details please refer to <a target="_blank" href="https://angular.io/guide/static-query-migration" data-url="https://angular.io/guide/static-query-migration">Static Query Migration Guide</a></p></li><li><p>Auto handle breaking changes: route lazy loading module. For details please refer to <a target="_blank" href="https://angular.io/guide/deprecations#loadchildren-string-syntax" data-url="https://angular.io/guide/deprecations#loadchildren-string-syntax">loadChildren string syntax</a></p></li></ol><h2 id="2.NG-ZORRO">2.NG-ZORRO<a onclick="window.location.hash = \'2.NG-ZORRO\'" class="anchor">#</a></h2><p>Contains two breaking changes: <code>nz-dropdown</code> and <code>form</code>, still keeping the old API to the <code>9.x</code> version, and there will be a warning in the development environment.</p><p>NG-ZORRO <strong>don\'t</strong> provide Cli tool upgrades. For more details, please refer to <a target="_blank" href="https://ng-zorro-master.netlify.com/docs/introduce/zh" data-url="https://ng-zorro-master.netlify.com/docs/introduce/zh">8.x Documentation</a>. The following are examples before and after the change:</p><h3 id="nz-dropdown">nz-dropdown<a onclick="window.location.hash = \'nz-dropdown\'" class="anchor">#</a></h3><pre class="hljs language-html"><code>&lt;nz-dropdown nzPlacement="bottomRight"&gt;\n  &lt;div nz-dropdown&gt;Button&lt;/div&gt;\n  &lt;ul nz-menu&gt;\n    &lt;li nz-menu-item&gt;Item 1&lt;/li&gt;\n    &lt;li nz-menu-item&gt;Item 2&lt;/li&gt;\n  &lt;/ul&gt;\n&lt;/nz-dropdown&gt;</code></pre><p>After:</p><pre class="hljs language-html"><code>&lt;div nz-dropdown nzPlacement="bottomRight" [nzDropdownMenu]="menuTpl"&gt;Button&lt;/div&gt;\n&lt;nz-dropdown-menu #menuTpl="nzDropdownMenu"&gt;\n  &lt;ul nz-menu&gt;\n    &lt;li nz-menu-item&gt;Item 1&lt;/li&gt;\n    &lt;li nz-menu-item&gt;Item 2&lt;/li&gt;\n  &lt;/ul&gt;\n&lt;/nz-dropdown-menu&gt;</code></pre><h3 id="form">form<a onclick="window.location.hash = \'form\'" class="anchor">#</a></h3><pre class="hljs language-html"><code>&lt;form nz-form [nzLayout]="\'inline\'" [formGroup]="validateForm" (ngSubmit)="submitForm()"&gt;\n  &lt;nz-form-item&gt;\n    &lt;nz-form-control&gt;\n      &lt;nz-input-group [nzPrefix]="prefixUser"&gt;\n        &lt;input formControlName="userName" nz-input placeholder="Username" /&gt;\n      &lt;/nz-input-group&gt;\n      &lt;nz-form-explain *ngIf="validateForm.get(\'userName\')?.dirty && validateForm.get(\'userName\')?.errors"\n      &gt;Please input your username!&lt;/nz-form-explain\n      &gt;\n    &lt;/nz-form-control&gt;\n  &lt;/nz-form-item&gt;\n&lt;/form&gt;</code></pre><p>After:</p><pre class="hljs language-html"><code>&lt;form nz-form [nzLayout]="\'inline\'" [formGroup]="validateForm" (ngSubmit)="submitForm()"&gt;\n  &lt;nz-form-item&gt;\n    &lt;nz-form-control nzErrorTip="Please input your username!"&gt;\n      &lt;nz-input-group nzPrefixIcon="user"&gt;\n        &lt;input formControlName="userName" nz-input placeholder="Username" /&gt;\n      &lt;/nz-input-group&gt;\n    &lt;/nz-form-control&gt;\n  &lt;/nz-form-item&gt;\n&lt;/form&gt;</code></pre><h2 id="3\u3001Delon">3\u3001Delon<a onclick="window.location.hash = \'3\u3001Delon\'" class="anchor">#</a></h2><p>Muse manually modify the <code>@delon/*</code> and <code>ng-alain</code> dependencies in <code>package.json</code> to be the version number: <code>^8.0.0</code>:</p><pre class="hljs language-bash"><code>yarn</code></pre><h3 id="ACL">ACL<a onclick="window.location.hash = \'ACL\'" class="anchor">#</a></h3><p><code>DelonACLModule</code> requires <code>forRoot()</code>, see <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/1165/files#diff-19" data-url="https://github.com/ng-alain/ng-alain/pull/1165/files#diff-19">delon.module.ts</a>.</p><h1 id="Optional-Upgrade">Optional Upgrade<a onclick="window.location.hash = \'Optional-Upgrade\'" class="anchor">#</a></h1><h2 id="tsconfig.json">tsconfig.json<a onclick="window.location.hash = \'tsconfig.json\'" class="anchor">#</a></h2><p>NG-ALAIN is always based on the infrastructure generated by Angular Cli, so there are some minor changes to the file structure, but it does not affect the existing structure:</p><ol><li><p>The original <code>src/tsconfig.app.json</code>, <code>src/tsconfig.spec.json</code>, <code>karma.conf.js</code> are moved to the root directory, and the corresponding path of <code>angular.json</code> needs to be modified synchronously.</p></li><li><p><code>tsconfig.app.json</code> and <code>tsconfig.spec.json</code> do not need to set the <code>paths</code> attributes.</p></li></ol><pre class="hljs language-diff"><code>- "paths": {\t\n-   "@shared": [ "app/shared/index" ],\t\n-   "@shared/*": [ "app/shared/*" ],\t\n-   "@core": [ "app/core/index" ],\t\n-   "@core/*": [ "app/core/*" ],\t\n-   "@env/*": [ "environments/*" ]\t\n- }</code></pre><ol><li><p>Fix the corresponding path of the <code>lint:ts</code> command line</p></li></ol><pre class="hljs language-diff"><code>- "lint:ts": "tslint -p src/tsconfig.app.json -c tslint.json \\"src/**/*.ts\\" --fix",\n+ "lint:ts": "tslint -c tslint.json \\"src/**/*.ts\\" --fix",</code></pre><h2 id="Command-Line">Command Line<a onclick="window.location.hash = \'Command-Line\'" class="anchor">#</a></h2><p>Avoid executing <code>ng build</code> when throw error <strong>JavaScript heap out of memory</strong>:</p><pre class="hljs language-diff"><code>- "build": "npm run color-less && ng build --prod --build-optimizer",\n+ "build": "npm run color-less && node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod",\n- "analyze": "ng build --prod --build-optimizer --stats-json",\n+ "analyze": "node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",</code></pre></article></section>',meta:{order:11,type:"Basic",title:"Upgrade to V8",hot:!0},toc:[{id:"Requirements",title:"Requirements",h:1},{id:"Upgrade",title:"Upgrade",h:1},{id:"1.Angular",title:"1.Angular",h:2},{id:"2.NG-ZORRO",title:"2.NG-ZORRO",h:2},{id:"nz-dropdown",title:"nz-dropdown",h:3},{id:"form",title:"form",h:3},{id:"3\u3001Delon",title:"3\u3001Delon",h:2},{id:"ACL",title:"ACL",h:3},{id:"Optional-Upgrade",title:"Optional Upgrade",h:1},{id:"tsconfig.json",title:"tsconfig.json",h:2},{id:"Command-Line",title:"Command Line",h:2}]},"zh-CN":{content:'<section class="markdown"><article><p>NG-ALAIN 8.0 \u53d8\u66f4\u5206\u4e3a\u4e09\u5927\u90e8\u5206\uff1a</p><table><thead><tr><th>\u7c7b\u5e93</th><th>\u652f\u6301Cli\u5347\u7ea7</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td>Angular</td><td>Yes</td><td>-</td></tr><tr><td>NG-ZORRO</td><td>No</td><td>\u53ef\u80fd\u6b63\u5f0f\u7248\u4f1a\u63d0\u4f9b\u90e8\u5206\u652f\u6301</td></tr><tr><td>Delon</td><td>No</td><td>\u53ea\u6d89\u53ca\u4e00\u5904 ACL \u7c7b\u5e93\u5f15\u7528</td></tr></tbody></table><h1 id="\u524d\u7f6e\u6761\u4ef6">\u524d\u7f6e\u6761\u4ef6<a onclick="window.location.hash = \'\u524d\u7f6e\u6761\u4ef6\'" class="anchor">#</a></h1><p>\u79fb\u9664\u672a\u4f7f\u7528\u7c7b\u5e93\uff1a</p><ul><li><p><code>tslint-language-service</code></p></li><li><p><code>core-js</code> \u652f\u6301\u5dee\u5f02\u52a0\u8f7d\u540e Angular \u81ea\u52a8\u7ba1\u7406 Polyfills</p></li></ul><h1 id="\u5347\u7ea7">\u5347\u7ea7<a onclick="window.location.hash = \'\u5347\u7ea7\'" class="anchor">#</a></h1><h2 id="1\u3001Angular">1\u3001Angular<a onclick="window.location.hash = \'1\u3001Angular\'" class="anchor">#</a></h2><p>Angular \u5347\u7ea7\u53ef\u4ee5\u6839\u636e <a target="_blank" href="https://update.angular.io/#7.0:8.0" data-url="https://update.angular.io/#7.0:8.0">update.angular.io</a> \u6765\u68c0\u67e5\u6bcf\u4e2a\u6b65\u9aa4\uff0c\u6267\u884c\u4e0b\u8ff0\u547d\u4ee4\u51e0\u4e4e\u53ef\u4ee5\u65e0\u7f1d\u5347\u7ea7\u7834\u574f\u6027\u53d8\u66f4\uff1a</p><pre class="hljs language-bash"><code>ng update @angular/cli @angular/core</code></pre><p>\u4e00\u4e9b\u503c\u5f97\u6ce8\u610f\u7684\u53d8\u66f4\u7ec6\u8282\uff1a</p><ol><li><p>\u66f4\u65b0 <code>package.json</code> \u7684\u4f9d\u8d56\u5305\u7248\u672c\u4fe1\u606f\uff0c\u4f46\u4e0d\u662f\u5b8c\u5168\u6700\u65b0\u7684\uff0c\u53ef\u4ee5\u901a\u8fc7 <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/1165/files#diff-10" data-url="https://github.com/ng-alain/ng-alain/pull/1165/files#diff-10">#diff-10</a> \u4e86\u89e3\u8c03\u6574\u7ec6\u8282</p></li><li><p><strong>\u8c03\u6574\u4e3a\u652f\u6301\u5dee\u5f02\u52a0\u8f7d</strong> \u66f4\u65b0 <code>tsconfig.json</code> \u7684 <code>module</code> \u4e3a <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/1165/files#diff-e5e546dd2eb0351f813d63d1b39dbc48R8" data-url="https://github.com/ng-alain/ng-alain/pull/1165/files#diff-e5e546dd2eb0351f813d63d1b39dbc48R8">esnext</a>\uff0c\u5e76\u79fb\u9664 <code>polyfills.ts</code> \u4e0b\u6240\u6709 <code>core-js</code> \u7684\u76f8\u5173\u5f15\u5165</p></li><li><p>\u81ea\u52a8\u5904\u7406 <code>ViewChild</code> \u6216 <code>ContentChild</code> \u7684\u7834\u574f\u6027\u53d8\u66f4\uff0c\u6709\u5173\u53d8\u66f4\u540e\u4f7f\u7528\u7ec6\u8282\u8bf7\u53c2\u8003<a target="_blank" href="https://angular.io/guide/static-query-migration" data-url="https://angular.io/guide/static-query-migration">Static Query Migration Guide</a></p></li><li><p>\u81ea\u52a8\u5904\u7406\u8def\u7531\u5ef6\u8fdf\u52a0\u8f7d\u6a21\u5757\uff0c\u6709\u5173\u53d8\u66f4\u540e\u4f7f\u7528\u7ec6\u8282\u8bf7\u53c2\u8003<a target="_blank" href="https://angular.io/guide/deprecations#loadchildren-string-syntax" data-url="https://angular.io/guide/deprecations#loadchildren-string-syntax">loadChildren string syntax</a></p></li></ol><h2 id="2\u3001NG-ZORRO">2\u3001NG-ZORRO<a onclick="window.location.hash = \'2\u3001NG-ZORRO\'" class="anchor">#</a></h2><p>\u5305\u542b <code>nz-dropdown</code> \u548c <code>form</code> \u4e24\u5904\u7834\u574f\u6027\u53d8\u66f4\uff0c\u4f9d\u7136\u4fdd\u6301\u65e7API\u81f3 <code>9.x</code> \u7248\u672c\uff0c\u540c\u65f6\u5728\u5f00\u53d1\u73af\u5883\u4e0b\u4f1a\u6709 warning\u3002</p><p>NG-ZORRO \u6682\u65f6\u6ca1\u6709\u63d0\u4f9b Cli \u5de5\u5177\u5347\u7ea7\uff0c\u66f4\u591a\u7ec6\u8282\u8bf7\u53c2\u8003 <a target="_blank" href="https://ng-zorro-master.netlify.com/docs/introduce/zh" data-url="https://ng-zorro-master.netlify.com/docs/introduce/zh">8.x\u6587\u6863\u7ad9</a>\uff0c\u4ee5\u4e0b\u662f\u53d8\u66f4\u524d\u540e\u7684\u793a\u4f8b\uff1a</p><h3 id="nz-dropdown">nz-dropdown<a onclick="window.location.hash = \'nz-dropdown\'" class="anchor">#</a></h3><pre class="hljs language-html"><code>&lt;nz-dropdown nzPlacement="bottomRight"&gt;\n  &lt;div nz-dropdown&gt;Button&lt;/div&gt;\n  &lt;ul nz-menu&gt;\n    &lt;li nz-menu-item&gt;Item 1&lt;/li&gt;\n    &lt;li nz-menu-item&gt;Item 2&lt;/li&gt;\n  &lt;/ul&gt;\n&lt;/nz-dropdown&gt;</code></pre><p>\u53d8\u66f4\u540e\uff1a</p><pre class="hljs language-html"><code>&lt;div nz-dropdown nzPlacement="bottomRight" [nzDropdownMenu]="menuTpl"&gt;Button&lt;/div&gt;\n&lt;nz-dropdown-menu #menuTpl="nzDropdownMenu"&gt;\n  &lt;ul nz-menu&gt;\n    &lt;li nz-menu-item&gt;Item 1&lt;/li&gt;\n    &lt;li nz-menu-item&gt;Item 2&lt;/li&gt;\n  &lt;/ul&gt;\n&lt;/nz-dropdown-menu&gt;</code></pre><h3 id="form">form<a onclick="window.location.hash = \'form\'" class="anchor">#</a></h3><pre class="hljs language-html"><code>&lt;form nz-form [nzLayout]="\'inline\'" [formGroup]="validateForm" (ngSubmit)="submitForm()"&gt;\n  &lt;nz-form-item&gt;\n    &lt;nz-form-control&gt;\n      &lt;nz-input-group [nzPrefix]="prefixUser"&gt;\n        &lt;input formControlName="userName" nz-input placeholder="Username" /&gt;\n      &lt;/nz-input-group&gt;\n      &lt;nz-form-explain *ngIf="validateForm.get(\'userName\')?.dirty && validateForm.get(\'userName\')?.errors"\n      &gt;Please input your username!&lt;/nz-form-explain\n      &gt;\n    &lt;/nz-form-control&gt;\n  &lt;/nz-form-item&gt;\n&lt;/form&gt;</code></pre><p>\u53d8\u66f4\u540e\uff1a</p><pre class="hljs language-html"><code>&lt;form nz-form [nzLayout]="\'inline\'" [formGroup]="validateForm" (ngSubmit)="submitForm()"&gt;\n  &lt;nz-form-item&gt;\n    &lt;nz-form-control nzErrorTip="Please input your username!"&gt;\n      &lt;nz-input-group nzPrefixIcon="user"&gt;\n        &lt;input formControlName="userName" nz-input placeholder="Username" /&gt;\n      &lt;/nz-input-group&gt;\n    &lt;/nz-form-control&gt;\n  &lt;/nz-form-item&gt;\n&lt;/form&gt;</code></pre><h2 id="3\u3001Delon">3\u3001Delon<a onclick="window.location.hash = \'3\u3001Delon\'" class="anchor">#</a></h2><p>\u624b\u52a8\u4fee\u6539 <code>package.json</code> \u91cc\u7684 <code>@delon/*</code>\u3001<code>ng-alain</code> \u4f9d\u8d56\u5305\u7248\u672c\u53f7\u4e3a\uff1a<code>^8.0.0</code>\uff0c\u5e76\u6267\u884c\uff1a</p><pre class="hljs language-bash"><code>yarn</code></pre><h3 id="ACL">ACL<a onclick="window.location.hash = \'ACL\'" class="anchor">#</a></h3><p><code>DelonACLModule</code> \u9700\u8981 <code>forRoot()</code> \u624d\u4f1a\u751f\u6548 <a target="_blank" href="https://github.com/ng-alain/ng-alain/pull/1165/files#diff-19" data-url="https://github.com/ng-alain/ng-alain/pull/1165/files#diff-19">delon.module.ts</a>\u3002</p><h1 id="\u53ef\u9009\u5347\u7ea7">\u53ef\u9009\u5347\u7ea7<a onclick="window.location.hash = \'\u53ef\u9009\u5347\u7ea7\'" class="anchor">#</a></h1><h2 id="tsconfig.json">tsconfig.json<a onclick="window.location.hash = \'tsconfig.json\'" class="anchor">#</a></h2><p>NG-ALAIN \u59cb\u7ec8\u4ee5 Angular Cli \u4ea7\u751f\u7684\u57fa\u7840\u7ed3\u6784\u4e3a\u57fa\u51c6\uff0c\u56e0\u6b64\u5bf9\u4e8e\u6587\u4ef6\u7ed3\u6784\u6709\u4e9b\u5c0f\u53d8\u5316 \uff0c\u4f46\u4e0d\u5f71\u54cd\u73b0\u6709\u7ed3\u6784\uff1a</p><ol><li><p>\u539f <code>src/tsconfig.app.json</code>\u3001<code>src/tsconfig.spec.json</code>\u3001<code>karma.conf.js</code> \u8f6c\u79fb\u81f3\u6839\u76ee\u5f55\uff0c\u9700\u8981\u540c\u6b65\u4fee\u6539 <code>angular.json</code> \u76f8\u5bf9\u5e94\u8def\u5f84</p></li><li><p><code>tsconfig.app.json</code> \u548c <code>tsconfig.spec.json</code> \u65e0\u987b\u518d\u5355\u72ec\u8bbe\u5b9a <code>paths</code> \u5c5e\u6027</p></li></ol><pre class="hljs language-diff"><code>- "paths": {\t\n-   "@shared": [ "app/shared/index" ],\t\n-   "@shared/*": [ "app/shared/*" ],\t\n-   "@core": [ "app/core/index" ],\t\n-   "@core/*": [ "app/core/*" ],\t\n-   "@env/*": [ "environments/*" ]\t\n- }</code></pre><ol><li><p>\u4fee\u590d <code>lint:ts</code> \u547d\u4ee4\u884c\u76f8\u5e94\u8def\u5f84</p></li></ol><pre class="hljs language-diff"><code>- "lint:ts": "tslint -p src/tsconfig.app.json -c tslint.json \\"src/**/*.ts\\" --fix",\n+ "lint:ts": "tslint -c tslint.json \\"src/**/*.ts\\" --fix",</code></pre><h2 id="\u547d\u4ee4\u884c">\u547d\u4ee4\u884c<a onclick="window.location.hash = \'\u547d\u4ee4\u884c\'" class="anchor">#</a></h2><p>\u907f\u514d\u6267\u884c <code>ng build</code> \u65f6\u629b\u51fa <strong>JavaScript heap out of memory</strong>\uff1a</p><pre class="hljs language-diff"><code>- "build": "npm run color-less && ng build --prod --build-optimizer",\n+ "build": "npm run color-less && node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod",\n- "analyze": "ng build --prod --build-optimizer --stats-json",\n+ "analyze": "node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",</code></pre></article></section>',meta:{order:11,type:"Basic",title:"\u5347\u7ea7\u5230 8.0 \u7248\u672c",hot:!0},toc:[{id:"\u524d\u7f6e\u6761\u4ef6",title:"\u524d\u7f6e\u6761\u4ef6",h:1},{id:"\u5347\u7ea7",title:"\u5347\u7ea7",h:1},{id:"1\u3001Angular",title:"1\u3001Angular",h:2},{id:"2\u3001NG-ZORRO",title:"2\u3001NG-ZORRO",h:2},{id:"nz-dropdown",title:"nz-dropdown",h:3},{id:"form",title:"form",h:3},{id:"3\u3001Delon",title:"3\u3001Delon",h:2},{id:"ACL",title:"ACL",h:3},{id:"\u53ef\u9009\u5347\u7ea7",title:"\u53ef\u9009\u5347\u7ea7",h:1},{id:"tsconfig.json",title:"tsconfig.json",h:2},{id:"\u547d\u4ee4\u884c",title:"\u547d\u4ee4\u884c",h:2}]}},demo:!1},this.codes=[]},L=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"docs/upgrade.en-US.md","zh-CN":"docs/upgrade.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>In <a href="/docs/architecture" data-url="/docs/architecture">Architecture</a> we have described the overall composition of the NG-ALAIN scaffolding. We spent a lot of time developing some infrastructure and publishing these to the <code>@delon/*</code> series to Npm. , making the upgrade very easy.</p><h2 id="Publishing-rule">Publishing rule<a onclick="window.location.hash = \'Publishing-rule\'" class="anchor">#</a></h2><p>Similar to <code>@angular/*</code>, the version number of the <code>@delon/*</code> class library will be a version number (<a target="_blank" href="https://www.npmjs.com/package/@delon/theme" data-url="https://www.npmjs.com/package/@delon/theme"><img src="https:/" alt="NPM version" /> at each iteration, regardless of whether a class library has been modified. /img.shields.io/npm/v/@delon/theme.svg)</a>).</p><p>At the same time, please follow the following publishing rules and update version number:</p><ul><li><p><code>@delon</code> as the infrastructure library, which will be slightly higher in the update frequency, usually updated at least once a week.</p></li><li><p>With <strong>BREAKING CHANGES</strong> at least one minor version number</p></li><li><p><a target="_blank" href="https://github.com/ng-alain/ng-alain/releases" data-url="https://github.com/ng-alain/ng-alain/releases">Update Log</a></p></li></ul><h2 id="How-to-upgrade?">How to upgrade?<a onclick="window.location.hash = \'How-to-upgrade?\'" class="anchor">#</a></h2><h3 id="Method-1:-Modify-the-version-number">Method 1: Modify the version number<a onclick="window.location.hash = \'Method-1:-Modify-the-version-number\'" class="anchor">#</a></h3><p>Modify <code>package.json</code> All class libraries starting with <code>@delon/</code> are the latest version number:</p><pre class="hljs language-null"><code>"@delon/theme": "^0.7.1"</code></pre><p>Replace <code>^0.7.1</code> with the latest version number.</p><p>Finally, reinstall the dependencies.</p><pre class="hljs language-bash"><code>yarn</code></pre><blockquote><p>Please read <a href="/docs/faq" data-url="/docs/faq">Frequently Asked Questions</a></p></blockquote><h3 id="Method-2:-Update-all-class-libraries">Method 2: Update all class libraries<a onclick="window.location.hash = \'Method-2:-Update-all-class-libraries\'" class="anchor">#</a></h3><p>Scaffolding in <code>package.json</code> most libraries use loose version numbers, for example:</p><p><code>^0.1.0</code> with the <code>^</code> symbol indicates that the latest minor version number is used, so <code>0.7.0</code> is also the range.</p><p>To use this update method, you need to follow these steps:</p><ul><li><p>Remove the <code>node_modules</code> folder and the <code>yarn.lock</code> file</p></li><li><p>Execute <code>yarn</code></p></li></ul><p><strong>Note:</strong> This method will install all class libraries in a newer version, but it may cause unnecessary troubles due to damaging changes of third-party types.</p></article></section>',meta:{order:80,title:{"en-US":"Upgrade scaffold","zh-CN":"\u5347\u7ea7\u811a\u624b\u67b6"},type:"Dev"},toc:[{id:"Publishing-rule",title:"Publishing rule",h:2},{id:"How-to-upgrade?",title:"How to upgrade?",h:2},{id:"Method-1:-Modify-the-version-number",title:"Method 1: Modify the version number",h:3},{id:"Method-2:-Update-all-class-libraries",title:"Method 2: Update all class libraries",h:3}]},"zh-CN":{content:'<section class="markdown"><article><p>\u5728 <a href="/docs/architecture" data-url="/docs/architecture">\u4f53\u7cfb\u7ed3\u6784</a> \u4e2d\u6211\u4eec\u5df2\u7ecf\u63cf\u8ff0\u4e86 NG-ALAIN \u811a\u624b\u67b6\u7684\u6574\u4f53\u6784\u6210\uff0c\u6211\u4eec\u82b1\u4e86\u5927\u91cf\u65f6\u95f4\u53bb\u5f00\u53d1\u4e00\u4e9b\u57fa\u7840\u5efa\u8bbe\uff0c\u5e76\u628a\u8fd9\u4e9b\u4ee5 <code>@delon/*</code> \u7cfb\u5217\u53d1\u5e03\u81f3 Npm \u5f53\u4e2d\uff0c\u4f7f\u5f97\u5347\u7ea7\u53d8\u5f97\u975e\u5e38\u8f7b\u677e\u3002</p><h2 id="\u53d1\u5e03\u89c4\u5219">\u53d1\u5e03\u89c4\u5219<a onclick="window.location.hash = \'\u53d1\u5e03\u89c4\u5219\'" class="anchor">#</a></h2><p>\u540c <code>@angular/*</code> \u7c7b\u4f3c\uff0c<code>@delon/*</code> \u7c7b\u5e93\u7684\u7248\u672c\u53f7\u5728\u6bcf\u4e00\u4e2a\u8fed\u4ee3\u65f6\uff0c\u4e0d\u7ba1\u67d0\u7c7b\u5e93\u662f\u5426\u6709\u4fee\u6539\uff0c\u90fd\u4f1a\u7edf\u4e00\u4e2a\u7248\u672c\u53f7 (<a target="_blank" href="https://www.npmjs.com/package/@delon/theme" data-url="https://www.npmjs.com/package/@delon/theme"><img src="https://img.shields.io/npm/v/@delon/theme.svg" alt="NPM version" /></a>) \u3002</p><p>\u540c\u65f6\u6309\u4ee5\u4e0b\u53d1\u5e03\u89c4\u5219\u53ca\u66f4\u65b0\u7248\u672c\u53f7\u8bf4\u660e\uff1a</p><ul><li><p><code>@delon</code> \u4f5c\u4e3a\u57fa\u7840\u5efa\u8bbe\u7c7b\u5e93\uff0c\u5728\u66f4\u65b0\u9891\u7387\u4e0a\u4f1a\u7565\u9ad8\uff0c\u4e00\u822c\u4e00\u5468\u81f3\u5c11\u66f4\u65b0\u4e00\u6b21</p></li><li><p>\u5e26\u6709 <strong>BREAKING CHANGES</strong> \u81f3\u5c11\u63d0\u5347\u4e00\u4e2a\u6b21\u7248\u672c\u53f7</p></li><li><p><a target="_blank" href="https://github.com/ng-alain/ng-alain/releases" data-url="https://github.com/ng-alain/ng-alain/releases">\u66f4\u65b0\u65e5\u5fd7</a></p></li></ul><h2 id="\u5982\u4f55\u5347\u7ea7\uff1f">\u5982\u4f55\u5347\u7ea7\uff1f<a onclick="window.location.hash = \'\u5982\u4f55\u5347\u7ea7\uff1f\'" class="anchor">#</a></h2><h3 id="\u65b9\u5f0f\u4e00\uff1a\u4fee\u6539\u7248\u672c\u53f7">\u65b9\u5f0f\u4e00\uff1a\u4fee\u6539\u7248\u672c\u53f7<a onclick="window.location.hash = \'\u65b9\u5f0f\u4e00\uff1a\u4fee\u6539\u7248\u672c\u53f7\'" class="anchor">#</a></h3><p>\u4fee\u6539 <code>package.json</code> \u6240\u6709 <code>@delon/</code> \u5f00\u5934\u7684\u7c7b\u5e93\u7248\u672c\u53f7\u4e3a\u6700\u65b0\u7248\u672c\u53f7\uff1a</p><pre class="hljs language-null"><code>"@delon/theme": "^0.7.1"</code></pre><p>\u5c06 <code>^0.7.1</code> \u66ff\u6362\u6210\u6700\u65b0\u7248\u672c\u53f7\u3002</p><p>\u6700\u540e\uff0c\u91cd\u65b0\u5b89\u88c5\u4f9d\u8d56\u5305\u3002</p><pre class="hljs language-bash"><code>yarn</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><h3 id="\u65b9\u5f0f\u4e8c\uff1a\u66f4\u65b0\u6240\u6709\u7c7b\u5e93">\u65b9\u5f0f\u4e8c\uff1a\u66f4\u65b0\u6240\u6709\u7c7b\u5e93<a onclick="window.location.hash = \'\u65b9\u5f0f\u4e8c\uff1a\u66f4\u65b0\u6240\u6709\u7c7b\u5e93\'" class="anchor">#</a></h3><p>\u811a\u624b\u67b6\u5728 <code>package.json</code> \u91cc\u591a\u6570\u7c7b\u5e93\u90fd\u662f\u4f7f\u7528\u5bbd\u677e\u7684\u7248\u672c\u53f7\uff0c\u4f8b\u5982\uff1a</p><p><code>^0.1.0</code> \u5e26\u6709 <code>^</code> \u7b26\u53f7\u8868\u793a\u4f7f\u7528\u6700\u65b0\u6b21\u7248\u672c\u53f7\uff0c\u56e0\u6b64\uff0c<code>0.7.0</code> \u4e5f\u662f\u8be5\u8303\u56f4\u4e4b\u5217\u3002</p><p>\u8981\u60f3\u91c7\u7528\u8fd9\u79cd\u66f4\u65b0\u65b9\u5f0f\u9700\u8981\u6309\u4ee5\u4e0b\u6b65\u9aa4\u8fdb\u884c\uff1a</p><ul><li><p>\u79fb\u9664 <code>node_modules</code> \u6587\u4ef6\u5939\u53ca <code>yarn.lock</code> \u6587\u4ef6</p></li><li><p>\u6267\u884c <code>yarn</code></p></li></ul><p><strong>\u6ce8\u610f\uff1a</strong> \u8fd9\u79cd\u65b9\u5f0f\u4f1a\u5bf9\u6240\u6709\u7c7b\u5e93\u6309\u6bd4\u8f83\u65b0\u7684\u7248\u672c\u5b89\u88c5\uff0c\u4f46\u6709\u53ef\u80fd\u4f1a\u5bfc\u81f4\u7531\u4e8e\u7b2c\u4e09\u65b9\u7c7b\u578b\u7684\u7834\u574f\u6027\u53d8\u66f4\u4f1a\u5bfc\u81f4\u4e00\u4e9b\u4e0d\u5fc5\u8981\u7684\u9ebb\u70e6\u3002</p></article></section>',meta:{order:80,title:{"en-US":"Upgrade scaffold","zh-CN":"\u5347\u7ea7\u811a\u624b\u67b6"},type:"Dev"},toc:[{id:"\u53d1\u5e03\u89c4\u5219",title:"\u53d1\u5e03\u89c4\u5219",h:2},{id:"\u5982\u4f55\u5347\u7ea7\uff1f",title:"\u5982\u4f55\u5347\u7ea7\uff1f",h:2},{id:"\u65b9\u5f0f\u4e00\uff1a\u4fee\u6539\u7248\u672c\u53f7",title:"\u65b9\u5f0f\u4e00\uff1a\u4fee\u6539\u7248\u672c\u53f7",h:3},{id:"\u65b9\u5f0f\u4e8c\uff1a\u66f4\u65b0\u6240\u6709\u7c7b\u5e93",title:"\u65b9\u5f0f\u4e8c\uff1a\u66f4\u65b0\u6240\u6709\u7c7b\u5e93",h:3}]}},demo:!1},this.codes=[]},G=function t(){_classCallCheck(this,t)},M=a("pMnS"),F=a("EdU/"),j=a("/Yna"),T=a("JRKe"),R=a("Ed4d"),D=a("8WaK"),E=a("QfCi"),B=a("CghO"),P=a("Sq/J"),O=a("GYi0"),q=a("EXx9"),U=a("R6D3"),H=a("WP5L"),W=a("71F0"),V=a("fE+l"),Z=a("0RMT"),K=a("QcbP"),J=a("0D9X"),Y=a("SpJI"),Q=a("hBP+"),X=a("QPFe"),$=a("RdGh"),tt=a("D9vs"),et=a("DyZ0"),at=a("TY3c"),ot=a("u+Cy"),nt=a("8+8K"),lt=a("YVZs"),it=a("F/j7"),dt=a("/EOF"),ct=a("ZKYL"),st=a("SZk1"),rt=a("5eO6"),ht=a("9BMt"),pt=a("kRch"),ut=a("QkPN"),gt=a("vBNu"),mt=a("Z7t+"),bt=a("II6v"),ft=a("MRB6"),kt=a("uU7u"),wt=a("iInd"),yt=a("cUpR"),vt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function _t(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var Ct=o.sb("app-docs-acl",l,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-acl",[],null,null,null,_t,vt)),o.vb(1,49152,null,0,l,[],null,null)],null,null)}),{},{},[]),At=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Nt(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var xt=o.sb("app-docs-architecture",i,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-architecture",[],null,null,null,Nt,At)),o.vb(1,49152,null,0,i,[],null,null)],null,null)}),{},{},[]),St=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function It(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var zt=o.sb("app-docs-auth",d,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-auth",[],null,null,null,It,St)),o.vb(1,49152,null,0,d,[],null,null)],null,null)}),{},{},[]),Lt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Gt(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var Mt=o.sb("app-docs-cache",c,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-cache",[],null,null,null,Gt,Lt)),o.vb(1,49152,null,0,c,[],null,null)],null,null)}),{},{},[]),Ft=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function jt(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var Tt=o.sb("app-docs-changelog",s,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-changelog",[],null,null,null,jt,Ft)),o.vb(1,49152,null,0,s,[],null,null)],null,null)}),{},{},[]),Rt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Dt(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var Et=o.sb("app-docs-cli",r,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-cli",[],null,null,null,Dt,Rt)),o.vb(1,49152,null,0,r,[],null,null)],null,null)}),{},{},[]),Bt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Pt(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var Ot=o.sb("app-docs-contributing",h,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-contributing",[],null,null,null,Pt,Bt)),o.vb(1,49152,null,0,h,[],null,null)],null,null)}),{},{},[]),qt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Ut(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var Ht=o.sb("app-docs-deploy",p,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-deploy",[],null,null,null,Ut,qt)),o.vb(1,49152,null,0,p,[],null,null)],null,null)}),{},{},[]),Wt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Vt(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var Zt=o.sb("app-docs-faq",u,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-faq",[],null,null,null,Vt,Wt)),o.vb(1,49152,null,0,u,[],null,null)],null,null)}),{},{},[]),Kt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Jt(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var Yt=o.sb("app-docs-getting-started",g,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-getting-started",[],null,null,null,Jt,Kt)),o.vb(1,49152,null,0,g,[],null,null)],null,null)}),{},{},[]),Qt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Xt(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var $t=o.sb("app-docs-graph",m,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-graph",[],null,null,null,Xt,Qt)),o.vb(1,49152,null,0,m,[],null,null)],null,null)}),{},{},[]),te=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function ee(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var ae=o.sb("app-docs-how-to-start",b,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-how-to-start",[],null,null,null,ee,te)),o.vb(1,49152,null,0,b,[],null,null)],null,null)}),{},{},[]),oe=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function ne(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var le=o.sb("app-docs-i18n",f,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-i18n",[],null,null,null,ne,oe)),o.vb(1,49152,null,0,f,[],null,null)],null,null)}),{},{},[]),ie=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function de(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var ce=o.sb("app-docs-import",k,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-import",[],null,null,null,de,ie)),o.vb(1,49152,null,0,k,[],null,null)],null,null)}),{},{},[]),se=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function re(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var he=o.sb("app-docs-mock",w,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-mock",[],null,null,null,re,se)),o.vb(1,49152,null,0,w,[],null,null)],null,null)}),{},{},[]),pe=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function ue(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var ge=o.sb("app-docs-module",y,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-module",[],null,null,null,ue,pe)),o.vb(1,49152,null,0,y,[],null,null)],null,null)}),{},{},[]),me=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function be(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var fe=o.sb("app-docs-new-component",v,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-new-component",[],null,null,null,be,me)),o.vb(1,49152,null,0,v,[],null,null)],null,null)}),{},{},[]),ke=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function we(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var ye=o.sb("app-docs-new-page",_,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-new-page",[],null,null,null,we,ke)),o.vb(1,49152,null,0,_,[],null,null)],null,null)}),{},{},[]),ve=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function _e(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var Ce=o.sb("app-docs-performance",C,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-performance",[],null,null,null,_e,ve)),o.vb(1,49152,null,0,C,[],null,null)],null,null)}),{},{},[]),Ae=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Ne(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var xe=o.sb("app-docs-scaffold",A,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-scaffold",[],null,null,null,Ne,Ae)),o.vb(1,49152,null,0,A,[],null,null)],null,null)}),{},{},[]),Se=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Ie(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var ze=o.sb("app-docs-server",N,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-server",[],null,null,null,Ie,Se)),o.vb(1,49152,null,0,N,[],null,null)],null,null)}),{},{},[]),Le=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Ge(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var Me=o.sb("app-docs-style-guide",x,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-style-guide",[],null,null,null,Ge,Le)),o.vb(1,49152,null,0,x,[],null,null)],null,null)}),{},{},[]),Fe=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function je(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var Te=o.sb("app-docs-theme",S,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-theme",[],null,null,null,je,Fe)),o.vb(1,49152,null,0,S,[],null,null)],null,null)}),{},{},[]),Re=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function De(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var Ee=o.sb("app-docs-upgrade-v2",I,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-upgrade-v2",[],null,null,null,De,Re)),o.vb(1,49152,null,0,I,[],null,null)],null,null)}),{},{},[]),Be=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Pe(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var Oe=o.sb("app-docs-upgrade-v8",z,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-upgrade-v8",[],null,null,null,Pe,Be)),o.vb(1,49152,null,0,z,[],null,null)],null,null)}),{},{},[]),qe=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Ue(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,mt.b,mt.a)),o.vb(1,245760,null,0,bt.a,[ft.a,kt.a,wt.p,yt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var a=e.component;t(e,1,0,a.codes,a.item)}),null)}var He=o.sb("app-docs-upgrade",L,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs-upgrade",[],null,null,null,Ue,qe)),o.vb(1,49152,null,0,L,[],null,null)],null,null)}),{},{},[]),We=a("SVse"),Ve=a("s7LF"),Ze=a("5VGP"),Ke=a("QQfA"),Je=a("IP0z"),Ye=a("POq0"),Qe=a("sAdM"),Xe=a("ekcc"),$e=a("pQl/"),ta=a("g+Fz"),ea=a("Ybye"),aa=a("NFMk"),oa=a("10Ig"),na=a("iC8E"),la=a("/HVE"),ia=a("v1Dh"),da=a("66zS"),ca=a("5Izy"),sa=a("yTpB"),ra=a("zMNK"),ha=a("hOhj"),pa=a("r19J"),ua=a("anqq"),ga=a("IYs4"),ma=a("EcpC"),ba=a("GaVp"),fa=a("/L1H"),ka=a("phDe"),wa=a("rJp6"),ya=a("Rgb0"),va=a("kS4m"),_a=a("mW00"),Ca=a("jTf7"),Aa=a("WPSl"),Na=a("YdS3"),xa=a("wQFA"),Sa=a("px0D"),Ia=a("3ZFI"),za=a("CYS+"),La=a("oBm0"),Ga=a("A7zk"),Ma=a("YRt3"),Fa=a("lAiz"),ja=a("ce6n"),Ta=a("SBNi"),Ra=a("7QIX"),Da=a("tYkK"),Ea=a("wf2+"),Ba=a("eCGT"),Pa=a("nHXS"),Oa=a("fb/r"),qa=a("zTFG"),Ua=a("JK0T"),Ha=a("JXeA"),Wa=a("0CZq"),Va=a("qU0y"),Za=a("vZsH"),Ka=a("W4B1"),Ja=a("SHEi"),Ya=a("FPpa"),Qa=a("RVNi"),Xa=a("NDed"),$a=a("5A4h"),to=a("N2O2"),eo=a("ozKM"),ao=a("OvZZ"),oo=a("z+yo"),no=a("DQmg"),lo=a("haRT"),io=a("1+nf"),co=a("XFzh"),so=a("p+Sl"),ro=a("HhpN"),ho=a("SN7N"),po=a("fwnu"),uo=a("VbP7"),go=a("gaRz"),mo=a("e15G"),bo=a("+YBk"),fo=a("9J0+"),ko=a("vIiB"),wo=a("CGSU"),yo=a("5CFV"),vo=a("GTZx"),_o=a("hS58"),Co=a("+ndR"),Ao=a("EWQH"),No=a("aq9g"),xo=a("7Dpl"),So=a("ekmu"),Io=a("vjj7"),zo=a("l/Xz"),Lo=a("sRo1"),Go=a("BQzg"),Mo=a("YQXl"),Fo=a("dZIx"),jo=a("9bzR"),To=a("WNQ9"),Ro=a("5Oon"),Do=a("lM9c"),Eo=a("OSVY"),Bo=a("MNSj"),Po=a("MZBU"),Oo=a("ev4S"),qo=a("G1y0"),Uo=a("5sGc"),Ho=a("4/RT"),Wo=a("Q1qs"),Vo=a("k5cy"),Zo=a("ceoF"),Ko=a("gQlp"),Jo=a("XYAa"),Yo=a("vrge"),Qo=a("nMAq"),Xo=a("5PV9"),$o=a("nIn3"),tn=a("xo13"),en=a("CnVV"),an=a("5p8d"),on=a("qYUw"),nn=a("JpOc"),ln=a("VRoF"),dn=a("Uto7"),cn=a("/p+U"),sn=a("ye40"),rn=a("qcxY"),hn=a("T+Em"),pn=a("ucmY"),un=a("sbFH"),gn=a("76lH"),mn=a("TSSN"),bn=a("Fg/6"),fn=a("kzz5"),kn=a("SqF5"),wn=a("Wl7g"),yn=a("+TYD"),vn=a("PCNd");a.d(e,"DocsModuleNgFactory",(function(){return _n}));var _n=o.tb(G,[],(function(t){return o.Fb([o.Gb(512,o.j,o.db,[[8,[M.a,F.a,F.b,j.a,T.a,R.a,D.a,E.a,B.a,P.a,O.a,q.a,U.a,H.a,W.a,V.a,Z.a,K.a,J.a,Y.a,Q.a,X.a,$.a,tt.a,et.a,at.a,ot.a,nt.a,lt.a,it.a,dt.a,ct.a,st.a,rt.a,ht.a,pt.a,ut.a,gt.a,Ct,xt,zt,Mt,Tt,Et,Ot,Ht,Zt,Yt,$t,ae,le,ce,he,ge,fe,ye,Ce,xe,ze,Me,Te,Ee,Oe,He]],[3,o.j],o.w]),o.Gb(4608,We.p,We.o,[o.t,[2,We.K]]),o.Gb(4608,Ve.x,Ve.x,[]),o.Gb(4608,Ve.e,Ve.e,[]),o.Gb(5120,Ze.z,Ze.M,[We.e,[3,Ze.z]]),o.Gb(4608,Ke.d,Ke.d,[Ke.k,Ke.f,o.j,Ke.i,Ke.g,o.q,o.y,We.e,Je.b,[2,We.j]]),o.Gb(5120,Ke.l,Ke.m,[Ke.d]),o.Gb(4608,Ye.c,Ye.c,[]),o.Gb(5120,Qe.b,Qe.a,[[3,Qe.b],Xe.a]),o.Gb(4608,$e.d,$e.d,[o.y]),o.Gb(4608,ta.d,ta.d,[We.e]),o.Gb(4608,ea.a,ea.a,[aa.g]),o.Gb(4608,oa.a,oa.a,[na.d]),o.Gb(1073742336,We.c,We.c,[]),o.Gb(1073742336,Ve.w,Ve.w,[]),o.Gb(1073742336,Ve.j,Ve.j,[]),o.Gb(1073742336,wt.t,wt.t,[[2,wt.y],[2,wt.p]]),o.Gb(1073742336,Ve.t,Ve.t,[]),o.Gb(1073742336,la.b,la.b,[]),o.Gb(1073742336,ia.b,ia.b,[]),o.Gb(1073742336,da.b,da.b,[]),o.Gb(1073742336,Ze.j,Ze.j,[]),o.Gb(1073742336,ca.b,ca.b,[]),o.Gb(1073742336,sa.a,sa.a,[]),o.Gb(1073742336,Je.a,Je.a,[]),o.Gb(1073742336,ra.e,ra.e,[]),o.Gb(1073742336,ha.g,ha.g,[]),o.Gb(1073742336,Ke.h,Ke.h,[]),o.Gb(1073742336,Ze.w,Ze.w,[]),o.Gb(1073742336,pa.b,pa.b,[]),o.Gb(1073742336,ua.b,ua.b,[]),o.Gb(1073742336,ga.b,ga.b,[]),o.Gb(1073742336,Ye.d,Ye.d,[]),o.Gb(1073742336,ma.b,ma.b,[]),o.Gb(1073742336,Ze.J,Ze.J,[]),o.Gb(1073742336,ba.c,ba.c,[]),o.Gb(1073742336,Ze.x,Ze.x,[]),o.Gb(1073742336,fa.e,fa.e,[]),o.Gb(1073742336,ka.i,ka.i,[]),o.Gb(1073742336,ka.a,ka.a,[]),o.Gb(1073742336,ka.f,ka.f,[]),o.Gb(1073742336,wa.c,wa.c,[]),o.Gb(1073742336,ya.b,ya.b,[]),o.Gb(1073742336,va.d,va.d,[]),o.Gb(1073742336,_a.c,_a.c,[]),o.Gb(1073742336,Ca.h,Ca.h,[]),o.Gb(1073742336,Aa.f,Aa.f,[]),o.Gb(1073742336,Na.d,Na.d,[]),o.Gb(1073742336,xa.d,xa.d,[]),o.Gb(1073742336,Ze.s,Ze.s,[]),o.Gb(1073742336,Sa.d,Sa.d,[]),o.Gb(1073742336,Ia.b,Ia.b,[]),o.Gb(1073742336,za.c,za.c,[]),o.Gb(1073742336,La.a,La.a,[]),o.Gb(1073742336,Ga.a,Ga.a,[]),o.Gb(1073742336,Ma.b,Ma.b,[]),o.Gb(1073742336,Fa.g,Fa.g,[]),o.Gb(1073742336,Fa.b,Fa.b,[]),o.Gb(1073742336,ja.a,ja.a,[]),o.Gb(1073742336,Ta.b,Ta.b,[]),o.Gb(1073742336,na.e,na.e,[]),o.Gb(1073742336,na.b,na.b,[]),o.Gb(1073742336,Ra.b,Ra.b,[]),o.Gb(1073742336,Da.b,Da.b,[]),o.Gb(1073742336,Ea.g,Ea.g,[]),o.Gb(1073742336,Ba.b,Ba.b,[]),o.Gb(1073742336,Pa.a,Pa.a,[]),o.Gb(1073742336,Oa.b,Oa.b,[]),o.Gb(1073742336,qa.d,qa.d,[]),o.Gb(1073742336,Ua.b,Ua.b,[]),o.Gb(1073742336,Ha.h,Ha.h,[]),o.Gb(1073742336,Ha.f,Ha.f,[]),o.Gb(1073742336,Ze.y,Ze.y,[]),o.Gb(1073742336,aa.h,aa.h,[]),o.Gb(1073742336,aa.d,aa.d,[]),o.Gb(1073742336,aa.e,aa.e,[]),o.Gb(1073742336,Wa.f,Wa.f,[]),o.Gb(1073742336,Wa.e,Wa.e,[]),o.Gb(1073742336,Va.a,Va.a,[]),o.Gb(1073742336,Za.b,Za.b,[]),o.Gb(1073742336,Ka.b,Ka.b,[]),o.Gb(1073742336,Ja.c,Ja.c,[]),o.Gb(1073742336,Ya.c,Ya.c,[]),o.Gb(1073742336,Qa.b,Qa.b,[]),o.Gb(1073742336,Xa.c,Xa.c,[]),o.Gb(1073742336,$a.a,$a.a,[]),o.Gb(1073742336,to.b,to.b,[]),o.Gb(1073742336,eo.d,eo.d,[]),o.Gb(1073742336,ao.a,ao.a,[]),o.Gb(1073742336,oo.c,oo.c,[]),o.Gb(1073742336,no.b,no.b,[]),o.Gb(1073742336,lo.b,lo.b,[]),o.Gb(1073742336,io.f,io.f,[]),o.Gb(1073742336,co.b,co.b,[]),o.Gb(1073742336,so.a,so.a,[]),o.Gb(1073742336,Ze.D,Ze.D,[]),o.Gb(1073742336,ro.c,ro.c,[]),o.Gb(1073742336,ho.b,ho.b,[]),o.Gb(1073742336,po.b,po.b,[]),o.Gb(1073742336,Ze.o,Ze.o,[]),o.Gb(1073742336,uo.a,uo.a,[]),o.Gb(1073742336,go.d,go.d,[]),o.Gb(1073742336,mo.a,mo.a,[]),o.Gb(1073742336,bo.a,bo.a,[]),o.Gb(1073742336,fo.a,fo.a,[da.c]),o.Gb(1073742336,ko.a,ko.a,[]),o.Gb(1073742336,wo.a,wo.a,[]),o.Gb(1073742336,yo.a,yo.a,[]),o.Gb(1073742336,vo.a,vo.a,[]),o.Gb(1073742336,_o.a,_o.a,[]),o.Gb(1073742336,Co.a,Co.a,[]),o.Gb(1073742336,Ao.a,Ao.a,[]),o.Gb(1073742336,No.a,No.a,[]),o.Gb(1073742336,xo.a,xo.a,[]),o.Gb(1073742336,So.a,So.a,[]),o.Gb(1073742336,Io.a,Io.a,[]),o.Gb(1073742336,zo.a,zo.a,[]),o.Gb(1073742336,Lo.a,Lo.a,[]),o.Gb(1073742336,Go.a,Go.a,[]),o.Gb(1073742336,$e.c,$e.c,[]),o.Gb(1073742336,Mo.a,Mo.a,[]),o.Gb(1073742336,Fo.a,Fo.a,[]),o.Gb(1073742336,jo.a,jo.a,[]),o.Gb(1073742336,To.a,To.a,[]),o.Gb(1073742336,Ro.a,Ro.a,[]),o.Gb(1073742336,Do.a,Do.a,[]),o.Gb(1073742336,Eo.a,Eo.a,[]),o.Gb(1073742336,Bo.a,Bo.a,[]),o.Gb(1073742336,Po.a,Po.a,[]),o.Gb(1073742336,Oo.a,Oo.a,[]),o.Gb(1073742336,qo.a,qo.a,[]),o.Gb(1073742336,Uo.a,Uo.a,[]),o.Gb(1073742336,Ho.a,Ho.a,[]),o.Gb(1073742336,Wo.a,Wo.a,[]),o.Gb(1073742336,Vo.a,Vo.a,[]),o.Gb(1073742336,Zo.a,Zo.a,[]),o.Gb(1073742336,Ko.a,Ko.a,[]),o.Gb(1073742336,Jo.a,Jo.a,[]),o.Gb(1073742336,Yo.a,Yo.a,[]),o.Gb(1073742336,Qo.a,Qo.a,[]),o.Gb(1073742336,Xo.a,Xo.a,[]),o.Gb(1073742336,$o.a,$o.a,[]),o.Gb(1073742336,tn.a,tn.a,[]),o.Gb(1073742336,en.a,en.a,[]),o.Gb(1073742336,an.a,an.a,[]),o.Gb(1073742336,on.a,on.a,[]),o.Gb(1073742336,nn.a,nn.a,[]),o.Gb(1073742336,ln.a,ln.a,[]),o.Gb(1073742336,dn.a,dn.a,[]),o.Gb(1073742336,cn.a,cn.a,[]),o.Gb(1073742336,sn.a,sn.a,[]),o.Gb(1073742336,rn.a,rn.a,[]),o.Gb(1073742336,hn.a,hn.a,[]),o.Gb(1073742336,pn.a,pn.a,[]),o.Gb(1073742336,un.a,un.a,[]),o.Gb(1073742336,gn.a,gn.a,[]),o.Gb(1073742336,mn.h,mn.h,[]),o.Gb(1073742336,bn.b,bn.b,[]),o.Gb(1073742336,fn.a,fn.a,[]),o.Gb(1073742336,ta.c,ta.c,[]),o.Gb(1073742336,kn.c,kn.c,[]),o.Gb(1073742336,wn.d,wn.d,[]),o.Gb(1073742336,wn.h,wn.h,[]),o.Gb(1073742336,wn.b,wn.b,[]),o.Gb(1073742336,wn.j,wn.j,[]),o.Gb(1073742336,wn.l,wn.l,[]),o.Gb(1073742336,wn.p,wn.p,[]),o.Gb(1073742336,wn.t,wn.t,[]),o.Gb(1073742336,yn.a,yn.a,[]),o.Gb(1073742336,vn.a,vn.a,[]),o.Gb(1073742336,G,G,[]),o.Gb(256,Ha.b,{nzAnimate:!0,nzDuration:3e3,nzMaxStack:7,nzPauseOnHover:!0,nzTop:24},[]),o.Gb(256,Wa.b,{nzTop:"24px",nzBottom:"24px",nzPlacement:"topRight",nzDuration:4500,nzMaxStack:7,nzPauseOnHover:!0,nzAnimate:!0},[]),o.Gb(256,Xe.a,bo.b,[]),o.Gb(1024,wt.n,(function(){return[[{path:"",component:n.a,children:[{path:"",redirectTo:"getting-started/zh",pathMatch:"full"},{path:"acl",redirectTo:"acl/zh",pathMatch:"full"},{path:"acl/:lang",component:l},{path:"architecture",redirectTo:"architecture/zh",pathMatch:"full"},{path:"architecture/:lang",component:i},{path:"auth",redirectTo:"auth/zh",pathMatch:"full"},{path:"auth/:lang",component:d},{path:"cache",redirectTo:"cache/zh",pathMatch:"full"},{path:"cache/:lang",component:c},{path:"changelog",redirectTo:"changelog/zh",pathMatch:"full"},{path:"changelog/:lang",component:s},{path:"cli",redirectTo:"cli/zh",pathMatch:"full"},{path:"cli/:lang",component:r},{path:"contributing",redirectTo:"contributing/zh",pathMatch:"full"},{path:"contributing/:lang",component:h},{path:"deploy",redirectTo:"deploy/zh",pathMatch:"full"},{path:"deploy/:lang",component:p},{path:"faq",redirectTo:"faq/zh",pathMatch:"full"},{path:"faq/:lang",component:u},{path:"getting-started",redirectTo:"getting-started/zh",pathMatch:"full"},{path:"getting-started/:lang",component:g},{path:"graph",redirectTo:"graph/zh",pathMatch:"full"},{path:"graph/:lang",component:m},{path:"how-to-start",redirectTo:"how-to-start/zh",pathMatch:"full"},{path:"how-to-start/:lang",component:b},{path:"i18n",redirectTo:"i18n/zh",pathMatch:"full"},{path:"i18n/:lang",component:f},{path:"import",redirectTo:"import/zh",pathMatch:"full"},{path:"import/:lang",component:k},{path:"mock",redirectTo:"mock/zh",pathMatch:"full"},{path:"mock/:lang",component:w},{path:"module",redirectTo:"module/zh",pathMatch:"full"},{path:"module/:lang",component:y},{path:"new-component",redirectTo:"new-component/zh",pathMatch:"full"},{path:"new-component/:lang",component:v},{path:"new-page",redirectTo:"new-page/zh",pathMatch:"full"},{path:"new-page/:lang",component:_},{path:"performance",redirectTo:"performance/zh",pathMatch:"full"},{path:"performance/:lang",component:C},{path:"scaffold",redirectTo:"scaffold/zh",pathMatch:"full"},{path:"scaffold/:lang",component:A},{path:"server",redirectTo:"server/zh",pathMatch:"full"},{path:"server/:lang",component:N},{path:"style-guide",redirectTo:"style-guide/zh",pathMatch:"full"},{path:"style-guide/:lang",component:x},{path:"theme",redirectTo:"theme/zh",pathMatch:"full"},{path:"theme/:lang",component:S},{path:"upgrade-v2",redirectTo:"upgrade-v2/zh",pathMatch:"full"},{path:"upgrade-v2/:lang",component:I},{path:"upgrade-v8",redirectTo:"upgrade-v8/zh",pathMatch:"full"},{path:"upgrade-v8/:lang",component:z},{path:"upgrade",redirectTo:"upgrade/zh",pathMatch:"full"},{path:"upgrade/:lang",component:L}]}]]}),[])])}))}}]);