フロントエンド初期設定
- Angular5で「俺式KOANスタック」でWebアプリ構築するための個人的な備忘録記事。
- 概要については「こちら」を参照。
- 事前に「Angular5 初期設定」が完了していることが前提。
フォルダ名およびフォルダパス設定を変更
- ルートディレクトリの「
src」フォルダを「client」に名称変更する - ルートディレクトリ直下の
.angular-cli.jsonの内容を以下の通りに変更 -
srcディレクトリを指定している箇所（apps.root,lint.project）をclientに、ビルド出力先（apps.outDir）をdist/clientに変更する
.angular-cli.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "【作成したプロジェクト名】"
},
"apps": [
{
"root": "client",
"outDir": "dist/client",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "client/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "client/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
ルートディレクトリのtsconfig.app.jsonのmoduleをes2015からcommonjsに変更（これやらないと、今後どこかで起動時にエラーになる）
フォルダ を追加
- ルートディレクトリの
client/appに対し、新規にcomponents,services,pipes, (services 直下の)sample, (pipes直下の)sampleフォルダ作成して以下のような構成にする
client/app
├─ components
├─ services
| └─ sample
├─ pipes
| └─ sample
└─ 既存のファイル群
SampleComponent を作成
- 初期ファイルを生成
cd コマンドで components にカレントディレクトリを移動し、angular-cli のコマンドでコンポーネントを作成する
モジュール生成
ng g component sample
-
components/sample直下にsample.module.tsというファイル名で以下のモジュールを作成
client/app/components/sample/sample.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { SampleComponent } from './sample.component';
/**
* サンプル コンポーネントモジュール
*/
@NgModule({
imports: [
CommonModule,
RouterModule,
FormsModule
],
declarations: [
SampleComponent,
],
exports: [
SampleComponent
]
})
export class SampleModule {}
SampleService を作成
- 初期ファイルを生成
cd コマンドで services/sample にカレントディレクトリを移動し、angular-cli のコマンドでコンポーネントを作成する
モジュール生成
ng g service sample
-
services/sample直下にsample-service.module.tsというファイル名で以下のモジュールを作成
client/app/services/sample/sample-service.module.ts
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { SampleService } from './sample.service';
/**
* サンプル サービスモジュール
*/
@NgModule({
imports: [
HttpClientModule
],
providers: [
SampleService
]
})
export class SampleServiceModule {}
SamplePipe を作成
- 初期ファイルを生成
cd コマンドで pipes/sample にカレントディレクトリを移動し、angular-cli のコマンドでコンポーネントを作成する
モジュール生成
ng g pipe sample
-
pipes/sample直下にsample-pipe.module.tsというファイル名で以下のモジュールを作成
client/app/pipes/sample/sample-pipe.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SamplePipe } from './sample.pipe';
/**
* サンプル パイプモジュール
*/
@NgModule({
imports: [
CommonModule
],
declarations: [
SamplePipe
],
exports: [
SamplePipe
]
})
export class SamplePipeModule {}
AppRoutingModule を修正
client/app/app-routing.module.ts を以下の通りに修正する
client/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SampleComponent } from './components/sample/sample.component';
const routes: Routes = [
{
path: '',
redirectTo: '',
pathMatch: 'full'
},
{
path: 'sample-page',
component: SampleComponent
}
];
@NgModule({
// URL直打ちでの画面遷移を防ぎたい場合は forRoot のオプション部分(, { useHash: true })を削除
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
AppModule を修正
client/app/app.module.ts を以下の通りに修正する
client/app/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 { SampleModule } from './components/sample/sample.module';
import { SampleServiceModule } from './services/sample/sample-service.module';
import { SamplePipeModule } from './pipes/sample/sample-pipe.module';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
SampleModule,
SampleServiceModule,
SamplePipeModule
],
declarations: [
AppComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ビルド出力テスト
ビルド出力先を変更したので、試しにビルドできるか実行
ng build --prod
-
ng buildでビルド。--prodオプションを付けると公開用にminifyされたファイルが生成される。 -
dist/clientディレクトリが生成され、中にファイル群が出来上がっていれば成功。 - 生成された「
dist」ディレクトリは、ビルドの度に自動生成/上書きされるため削除しても問題ない。
動作確認
- コンソール上でアプリのディレクトリに移動し、サーバ起動
サーバ起動
cd 作成したプロジェクト名
ng serve
-
http://localhost:4200/#/でAngularテストページ表示。 -
http://localhost:4200/#/sample-pageと打ち込み、画面遷移後のページ最下部に「sample works!」と表示されたら成功。Ctrl + Cでサーバ終了。
ここまでが フロントエンドの初期設定。