不得不說，和傳統的復制黏貼來創建組件的方法相比，使用angular-cli的腳手架功能來創建模塊、組件顯得非常高效，不僅僅有了創建了文件，還包含了一些必須的代碼，同時也將組件導入了最近的模塊，一些重復性工作就使用cli可以節省掉。angular提供了豐富的文件類型，但是總歸是有些我們自己的項目需要，我們需要創建自定義后綴的組件，這時候就不得不舍棄cli了，那么能不能使用自定義的方式來達到腳手架創建呢？

angular 腳手架創建的方式

我們首先來看看angular-cli提供的一些命令是怎么創建文件的。

看angular文檔我們可以看到這個詞：Schematic，這個詞意為原理圖。Schematic是一個腳手架庫，定義如何通過創建、修改、重構或移動文件和代碼來生成或轉換編程項目。Angular Cli使用原理圖生成和修改項目文件。庫開發人員可以創建原理圖，使Cli能夠生成其已發布的庫?？梢圆榭磆ttps://www.npmjs.com/package/@angular-devkit/schematics。

那這樣的話，我們可以知道angular是借助的Schematic來生成項目文件。再查看發現node_module里面有個@Schematics/angular，里面定義了我們可以使用cli生成的所有文件，包括components/class/enum/interface等等。

點開查看components，里面有一些ts文件，還有一個files文件夾，里面包含著所有我們生成component的文件：

__name@dasherize@if-flat__

那想想，在我們運行Cli創建組件的時候，會使用這里的模板，用file文件夾里面的文件生成項目組件。其他的先不管，我們按照這里的components是不是可以來構造我們自己的“原理圖”呢？

自定義原理圖

先看看我們的需求，我們現在項目的項目里面，頁面是page，按照angular原來的寫法，所有的page的組件都是：XXXX.component.ts。我們為了將頁面和組件進行區分，頁面的文件都是XXX.page.ts。我們先在node_module/@Schematics/angula/下面復制component新建一個page。

現在，將page下面的files文件夾中的文件名.component都改為.page（由于我們不用單元測試文件，直接刪除.spec.ts文件即可）：

page

files
__name@dasherize@if-flat__ __name@dasherize__.page.__styleext__ __name@dasherize__.page.html __name@dasherize__.page.ts
index.d.ts index.js 命令運行時會執行這個js文件 schema.d.ts schema.json 定義了這個生成器命令可以接受的參數

接下來再看page里面的index.js，這個js文件在我們跑自己的命令的時候會執行?？催@個文件，里面的代碼雖然有點看不懂，但是猜猜還是可以的，有些關鍵地方：

const componentPath = `/${options.path}/`      + (options.flat ? '' : core_1.strings.dasherize(options.name) + '/')      + core_1.strings.dasherize(options.name)      + '.component';const classifiedName = core_1.strings.classify(`${options.name}Component`);