Angular & Bootstrap tutorial

angular-bootstrap.md

Angular & Play

Install

# Install angular/cli
npm install -g @angular/cli

# Create projects
ng new angular-bootstrap
cd angular-bootstrap

# Install compornents
ng add @ng-bootstrap/ng-bootstrap
npm install --save jquery popper.js@^1.16.0 bootstrap-scss

2020/7/8現在、angular 10.0.1ではng-bootstrapのインストールにおいてエラーが発生するようなので、angular 9.1.10のインストール推奨
これについての詳細は、ng-bootstrap issue3788を参照

npm uninstall -g @angular/cli
npm install -g @angular/cli@^9.0.0

Playとの連携

Angular6とPlayFramework2.6でWebアプリの雛形制作

# application.conf
play.filters.enabled += "play.filters.cors.CORSFilter"

Angular9とPlay2.8の場合、この記述がないとビルドは通るが、動作しないので必ず記述する

Angular form問題

Angularでformを扱う場合

# app.module.ts

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

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

上記のように、import {FormsModule} from '@angular/forms';とNgModuleのFormsModuleが必須