在NiceFish項目中關於Echarts組件和指令是直接註冊在appModule根模塊中的，這樣路由只需這樣寫就可以讓瀏覽器加載圖標組件：

在chart組件視圖中：

<div class="row" [@fadeIn]>
    <div class="col-sm-12">
        <echart [chartType]="pieChart" class="nf-chart"></echart>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <echart [chartType]="barChart" class="nf-chart"></echart>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <echart [chartType]="lineChart" class="nf-chart"></echart>
    </div>
</div>

chartType是封裝了Echarts的angular指令，pieChart，barChart，lineChart是各種圖標的配置對象，這裏angular2對於指令用中括號來識別。

chart組件定義代碼如下：

這裏的chart組件不是公用組件，是針對項目具體功能模塊而定義的組件，裏面的三個配置對象pieChart，barChart，lineChart是根據具體情況定義的Echarts圖表配置信息，這裏真正抽象出來的是EchartsOptionDirective1這個指令，這個指令會根據輸入的配置信息來構造指定的Echarts圖表，

EchartsOptionDirective1指令如下：

這個指令在本地引入Echarts庫，在AOT編譯的時候，項目會將Echarts包合並到核心js文件中，在這個例子中由於Chart組件和EchartsOption指令註冊在了AppModule根模塊應用中，當初次請求頁面時，包含有Echarts內容的js文件會被加載進來，但是如果初始頁面中沒有運用到Echarts功能，那加載進來的Echarts內容就是多余的了，這會加重前端性能負擔。

像這樣的情況，可以利用Chart組件和EchartsOption指令構造一個模塊EchartsModule，項目在AOT的時候只會將和該模塊相關的js合並成一個js文件，當瀏覽器初始時候下載js文件時就不會將Echarts內容下載下來，減少網頁加載的時間。

當用戶點擊想要查看Echarts功能時，項目會根據上面的路由信息找到對應的EchartsModule，從而加載Echarts功能相關的js文件，然後將Echarts功能組件反應到頁面上，這就是按需加載模式。這種模式在體積越來越大，功能越來越多，對性能要求越來越高的WebApp上

應用越來越重要。

angular2項目關於Echarts圖標的處理