shou2017.com
JP / EN

Angularをローカルにインストールする方法

Sun Jul 7, 2019
Sat Aug 10, 2024
Angular

angular appをローカルで開発 Angular Material導入まで

Angular CLIをグローバルにインストールする方法ではなく、ローカルでやる方法のメモ。

ローカルにAngular CLIをインストール

作業ホルダーを作成後、Angular CLIをインストール。

$ mkdir sample
$ cd sample
$ npm i @angular/cli
$ npx ng version //正しくインストールされたか確認

ng new コマンドを実行

sampleの部分にプロジェクト名を。

$ npx ng new sample --directory=./

正常に行けばnpx ng serveコマンドでサーバーを起動させる。

$ npx ng serve

Angular Materialのインストール

公式サイト通りに作成していきます。

$ npm install --save @angular/material @angular/cdk @angular/animations
+ @angular/[email protected]
+ @angular/[email protected]
+ @angular/[email protected]
added 3 packages from 1 contributor, updated 1 package and audited 19202 packages in 5.838s
found 0 vulnerabilities

ただインストールしただけでは使えないので、BrowserAnimationsModuleをインポートする。app.module.tsにインポートした場合は以下のようになる。Angular CLIを使ってインストールしたからといって自動で追記される訳ではない。

// app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// 追記 ↓
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

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

コンポーネントモジュールにインポートする

Angular Materialはインポートして、宣言すれば使えるようになるわけではなく、ボタンならボタンをインポートするみたいなこと、そのつどやる必要がある。bootstrapみたいにインストールすれば、後はhtml側で使うやつを宣言すればいいというものではない。

// app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
// 追加↓ ボタンのモジュール、チェックボックのモジュールをインポート
import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    // 追加↓ ボタンのモジュール、チェックボックのモジュールをインポート
    MatButtonModule,
    MatCheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

CSSをインポート

/* ./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";

toggleやsliderが使えるようにする

toggleやsliderが使えるようにする為にhammerJSをインストール

$ npm install --save hammerjs

インポートはsrc/main.tsでする。

// src/main.ts

import 'hammerjs';

Material Iconの設定

./src/index.htmlに追記する。

<!-- ./src/index.html -->

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

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

Angular Materialをモジュールに分割する

このままapp.module.tsにAngular Materialをインポートしても特に問題はないですが、インポートする部品の数が増えてくるとapp.module.tsがゴチャゴチャしてくるので、分割します。

app配下にmaterial.module.tsを作成。

 // material.module.ts

import {NgModule} from '@angular/core';

import {
  MatButtonModule,
  MatCheckboxModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatCheckboxModule
  ],
  exports: [
    MatButtonModule,
    MatCheckboxModule
  ]
})
export class MaterialModule {}

あとは、app.module.tsにmaterial.module.tsをインポートするだけ。

// app.module.ts

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

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

import { MaterialModule } from './material.module';

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

注意したいのは、material.module.tsを作るとAngular CLIのng generateコマンドを使ってコンポーネントを作ろうとすると、More than one module matches. Use skip-import option to skip importing the component into the closest module.と怒られるので、ng generateコマンドのオプションを使う必要があります。

$ npx ng g c test --module=app.module.ts

まとめ

基本的な設定が終わればあとは、使いたい部品を公式サイトから探してきてインポートして使う。

Angularアプリケーションプログラミング

Amazon
楽天
See Also