How to Install Angular Locally

Developing an Angular app locally up to Angular Material implementation

This is a note on how to work with Angular locally instead of installing Angular CLI globally.

Installing Angular CLI Locally

After creating a working folder, install Angular CLI.

$ mkdir sample
$ cd sample
$ npm i @angular/cli
$ npx ng version //Check if installed correctly

Execute ng new command

Replace sample with your project name.

$ npx ng new sample --directory=./

If everything goes well, you can start the server with the npx ng serve command.

$ npx ng serve

Installing Angular Material

We’ll follow the steps from the official site.

$ 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

Just installing is not enough to use it. You need to import BrowserAnimationsModule. When importing it into app.module.ts, it will look like the following. Note that installing with Angular CLI doesn’t automatically add these imports.

// 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';
// Added ↓
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

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

Importing Component Modules

Angular Material is not ready to use just by importing and declaring it. You need to import specific components like buttons each time you need them. It’s not like Bootstrap where you just install it and then declare the components you want to use in your 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';
// Added↓ Import button module and checkbox module
import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    // Added↓ Import button module and checkbox module
    MatButtonModule,
    MatCheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Importing 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";

Enabling toggle and slider

To enable toggle and slider, install hammerJS

$ npm install --save hammerjs

Import it in src/main.ts.

// src/main.ts

import 'hammerjs';

Setting up Material Icons

Add the following to ./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>

Modularizing Angular Material

While there’s no specific issue with importing Angular Material directly into app.module.ts, as the number of components you import increases, app.module.ts will become cluttered. So we’ll split it up.

Create material.module.ts under the app directory.

 // material.module.ts

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

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

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

Then, all you need to do is import material.module.ts into app.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 { }

Note that when you create material.module.ts, if you try to create components using the ng generate command of Angular CLI, you’ll get an error saying More than one module matches. Use skip-import option to skip importing the component into the closest module. So you need to use options with the ng generate command.

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

Summary

Once the basic setup is complete, you can find the components you want to use from the official site, import them, and use them.

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

Amazon

楽天