Skip to content

Instantly share code, notes, and snippets.

@okanon
Last active July 10, 2020 06:31
Show Gist options
  • Save okanon/4fe28c76894c307ecbb6bae98ad4ab76 to your computer and use it in GitHub Desktop.
Save okanon/4fe28c76894c307ecbb6bae98ad4ab76 to your computer and use it in GitHub Desktop.
Angular & Bootstrap tutorial

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が必須

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment