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/material@8.0.1
+ @angular/cdk@8.0.1
+ @angular/animations@8.0.3
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側で使うやつを宣言すればいいというものではない。

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>

まとめ


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





See Also