Angular CLI 6.0.0のng addとSchematicsを使ってAngularMaterialを簡単セットアップ

9540 ワード
TypeScript Angular angularMaterial angular-cli TypeScript テキストリンク

Angular CLI v6で追加されるng addコマンドとAngular MaterialのSchematicsを使ってAngular Materialのセットアップを行ってみました。
Angularプロジェクトの作成を含め、たった数コマンドと数行のコードで次のようなダッシュボードUIを作成することができました。

事前準備

Angular CLIのインストール

現在最新RC版のAngularCLIをインストールします。
2018/04/22 時点の最新版は、6.0.0-rc.5でしたが、以下のバグがありng addが正常に動かないようです。今回は、6.0.0-rc.4を使用して進めました。
https://github.com/angular/angular-cli/issues/10381

$ ng npm i -g @angular/[email protected]

インストールされたバージョンは次の通り。

$ ng -v                                                                                                                                      

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.0-rc.4
Node: 8.11.1
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.5.6
@angular-devkit/core         0.5.6
@angular-devkit/schematics   0.5.6
@ngtools/json-schema         1.1.0
@schematics/angular          0.5.6
@schematics/update           0.5.6
rxjs                         6.0.0-uncanny-rc.7
typescript                   2.7.2

プロジェクトの作成

ng newで事前にプロジェクトを作成しておきます。

$ ng new v6-add-demo

Angular Material & CDKのインストール

ng addコマンドを使用する際も、事前にパッケージをインストールしておく必要があります。

$ npm i --save @angular/material@next @angular/cdk@next

今回はmaterial、CDKともにv6.0.0-rc.12を使用しました。

ng addでAngularMaterialのセットアップ

いよいよ、本題のng addコマンドを使ってみます。
ng add <package>の形で、Angularプロジェクトに追加するパッケージを指定すると、Schematicsの機能で必要なインポートやテンプレートの展開などが行われます。(追加する側のパッケージもSchematics対応されている必要あり)

$ ng add @angular/material

実行すると、以下のようにファイルが更新されています。

実行結果
Installing packages for tooling via npm.
UPDATE package.json (1477 bytes)
UPDATE angular.json (4134 bytes)
UPDATE src/app/app.module.ts (423 bytes)
UPDATE src/index.html (473 bytes)
UPDATE src/styles.css (101 bytes)
angular.json
@@ -29,6 +29,9 @@
               }
             ],
             "styles": [
+              {
+                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+              },
               {
                 "input": "src/styles.css"
               }
@@ -80,6 +83,9 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
+              {
+                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+              },
               {
                 "input": "styles.css"
               }
app/app.module.ts
@@ -2,13 +2,15 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';

 import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
index.html
@@ -1,6 +1,8 @@
 <!doctype html>
 <html lang="en">
 <head>
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
   <meta charset="utf-8">
   <title>V6AddDemoMaterial</title>
   <base href="/">
style.css
@@ -1 +1,3 @@
 /* You can add global styles to this file, and also import other style files */
+
+body { margin: 0; }

Schematicsでナビゲーションを作成

次に、toolbarとsidenavを作成します。

$ ng g @angular/material:materialNav --name=main-nav
実行結果
CREATE src/app/main-nav/main-nav.component.css (110 bytes)
CREATE src/app/main-nav/main-nav.component.html (945 bytes)
CREATE src/app/main-nav/main-nav.component.spec.ts (619 bytes)
CREATE src/app/main-nav/main-nav.component.ts (489 bytes)
UPDATE src/app/app.module.ts (803 bytes)

作成したmain-navを配置します。

app/app.component.html
+ <main-nav></main-nav>

ここまでの状態で、npm startしてlocalhost:4200を確認すると、次のようにtoolbarが追加されていることが確認できます。(左上のメニュークリックでsidenavも出ます)

Schematicsでダッシュボード風のUIを作成

Angular MaterialのSchematicsには、現在(2018/04/22)ナビゲーションの他に次のコンポーネントが含まれているようです。

  • materialDashboard
  • materialTable

せっかくなので、materialDashboardも試してみました。

$ ng g @angular/material:materialDashboard --name=dashboard
実行結果
CREATE src/app/dashboard/dashboard.component.css (254 bytes)
CREATE src/app/dashboard/dashboard.component.html (927 bytes)
CREATE src/app/dashboard/dashboard.component.spec.ts (632 bytes)
CREATE src/app/dashboard/dashboard.component.ts (397 bytes)
UPDATE src/app/app.module.ts (1007 bytes)

作成したdashboardを配置します。

app/app.component.html
<main-nav></main-nav>
+ <dashboard></dashboard>

次のように、複数のmat-cardが自動で配置されています。

以上です🙃

注意

今回は使用したAngularおよび、AngularMaterialはまだRCのため、今後仕様が変更になる可能性もあります。実際に使用する際は、その時点での公式ドキュメントを確認することをおすすめします。

参考

https://github.com/angular/angular-cli/wiki/add
https://github.com/angular/angular-cli/releases/tag/v6.0.0-beta.5
https://qiita.com/puku0x/items/1024af7860588caafcc6