More than 5 years have passed since last update.

Angular7 + AngularMaterial 環境構築

Angular

Last updated at 2018-11-03Posted at 2018-10-29

はじめに

AngularCLIを使って、最近(2018/10/19)出たAngularのバージョン７とデザインフレームワークのAngularMaterialで環境構築していきたいと思います。
基本的には公式通り。(Angular CLI、Angular Material)
(追記）
GitHubにあげた。(AngularMaterialのSchematicsを試しに入れるぐらいまで）
ついでにバージョンが上がってたので記述を7.03から7.04にバージョンアップした。

環境構築

Step1〜Step3:AngularCLIでハローワールドみたいな(Welcome to App！）まで
Step4〜Step6:AngularMaterial入れる。
(おまけ)Step7〜Step8:AngularMaterialのスキーマ(自動生成されるコンポーネント)を入れて実行する。

Step1.AngularCLI入れる（バージョン確認）

何はともあれAngularCLIを入れる。

(ターミナル)インストールする

$ npm install -g @angular/cli

(ターミナル)現在のバージョン

$ ng v

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


Angular CLI: 7.0.4
Node: 8.11.4
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.10.4
@angular-devkit/core         7.0.4
@angular-devkit/schematics   7.0.4
@schematics/angular          7.0.4
@schematics/update           0.10.4
rxjs                         6.3.3
typescript                   3.1.3

Step2.プロジェクト作成

demo-material-appとして作成する。
以前まではオプションで--style=scssとかやっていたけど聞かれれる様になったのでそのまま実行する。ルーティングも自動で作成してくれる。
ルーティングはyでスタイルシートはSCSSで作成する。

(ターミナル)プロジェクト作成

$ ng new demo-material-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use?
  CSS
❯ SCSS   [ http://sass-lang.com   ]
  SASS   [ http://sass-lang.com   ]
  LESS   [ http://lesscss.org     ]
  Stylus [ http://stylus-lang.com ]

(・・・省略・・・)

    Successfully initialized git.
$

Step3.実行してみる。Welcome to demo-material-app!

作成したプロジェクトに移動し、実行する。

(ターミナル)移動して実行。

$ cd demo-material-app/
$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

(・・・省略・・・)

ℹ ｢wdm｣: Compiled successfully.

書いてある通り、 http://localhost:4200/ にアクセスし確認する。

Step4.Angular Materialのインストール

Step3でローカルサーバーを実行中であればCtrl+Cで一度止める。
作成したプロジェクトの場所にいる状態で実行していく。(demo-material-app直下)
必要なものをインストールしていく。

(ターミナル)Materialインストール

$ npm install --save @angular/material @angular/cdk @angular/animations

全部のコンポーネント使いたいので、hammerjsもインストールする。

(ターミナル)hammerjsインストール

$ npm install --save hammerjs

Step5.ファイルを編集していく。スタイル適用。

demo-material-app/srcを編集していく。

スタイルを適用する。

deeppurple-amber、indigo-pink、pink-bluegrey、purple-greenが用意されている。
公式通りにインディゴとピンクのものを適用する。

src/style.scss

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

hammerjsをインポートする。

src/main.ts(抜粋)

import 'hammerjs';

(全文)src/main.ts

src/main.ts

import 'hammerjs';

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

マテリアルアイコンも使いたいので、src/index.htmlのheadタグに加える。

src/index.html(抜粋)

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

(全文)src/index.html

src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DemoApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

アニメーションのモジュールを入れる

動きを持ったスタイルにしたい場合、BrowserAnimationsModuleをインポートする。そうでない場合は、NoopAnimationsModuleをインポートする。

src/app/app.module.ts(抜粋)

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
・・・
@NgModule({
  ・・・
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    //NoopAnimationsModule,
    AppRoutingModule
  ],
・・・

(全文)src/app/app.module.ts

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    //NoopAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step6.マテリアル用のモジュールを作成する。

公式のサンプルソースにもある様な感じのマテリアルのモジュールを作る。

(ターミナル)モジュール作成

$ ng generate module shared/material --flat

実行するとsrc/app/shared/material.module.tsが作成される。
作成したモジュールを下記の様に編集する。

(全文)src/app/shared/material.module.ts

src/app/shared/material.module.ts

import {DragDropModule} from '@angular/cdk/drag-drop';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
import {NgModule} from '@angular/core';
import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule,
} from '@angular/material';

@NgModule({
  exports: [
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    ScrollingModule,
  ]
})
export class MaterialModule {}


/**  Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

(おまけ)

Step6まででAngular Materialを利用する準備は整ったので、環境構築としては終了。
Step7ではサンプルモジュール作成して、そこにコンポーネントを入れていく。

Step7.サンプルモジュール作成

公式のマテリアルデザインのセットを利用する。(参考：AngularMaterialのschematics)

スタイルの編集

src/styles.scss

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

body {
    margin: 0;
}

html, body{
    height: 100%;
}

モジュール、ダッシュボードのコンポーネント作成。

ルーティングありでモジュール作成。

コンポーネントはダッシュボードの物を作成する。似た様な場所に作れば勝手にコンポーネントはモジュールに紐づいてくれる。
(使用するモジュール類も入ってくれて便利すぎて、Step6で作成したshared/material.module.tsを使わずに済んでしまった。)

(ターミナル)モジュール作成

$ ng generate module pages/samples --routing
$ ng generate @angular/material:dashboard pages/samples/sample-dash

作成したsamples-routing.module.tsのルーティングを設定する。

src/app/pages/samples/samples-routing.module.ts(抜粋)

import { SampleDashComponent } from './sample-dash/sample-dash.component';
・・・
const routes: Routes = [
  { path: '', component: SampleDashComponent }
];
・・・

(全文)src/app/pages/samples/samples-routing.module.ts

src/app/pages/samples/samples-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SampleDashComponent } from './sample-dash/sample-dash.component';

const routes: Routes = [
  { path: '', component: SampleDashComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SamplesRoutingModule { }

ルートのsrc/app/app-routing.module.tsのルーティングを設定する

src/app/app-routing.module.ts(抜粋)

・・・
const routes: Routes = [
  { path: '', loadChildren: './pages/samples/samples.module#SamplesModule' }
];
・・・

(全文)src/app/app-routing.module.ts

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './pages/samples/samples.module#SamplesModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html編集

src/app/app.component.htmlのWelcome〜の部分を全部削除してrouter-outletのみにする。

src/app/app.component.html

<router-outlet></router-outlet>

Step8.実行する。

Step3と同じ様に実行する。　http://localhost:4200/ にアクセス。

(ターミナル)

$ ng serve
・・・
ℹ ｢wdm｣: Compiled successfully.

おわり。
はじめにでも書いたけど、GitHubのソースは色々入れて試した。(demo-material-app)

ngコマンドのgenerate等々は、１文字に省略できる。

省略できる

$ ng generate module pages/samples
$ ng generate component pages/samples
$ ng serve

↓（省略するとこんな感じ）

$ ng g m pages/samples
$ ng g c pages/samples
$ ng s

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up