プロジェクト


前提


ng generate application: プロジェクト追加


プロジェクトルートの内容

projects/$PROJECT/


src/

src/environments/: ビルドターゲットの切り替え

// environment.prod.ts
export const environment = {
  production: true,
  api_url: 'https://本番URL',
};

// environment.ts
export const environment = {
  production: false,
  api_url: 'http://localhost:3000',
};

コンポーネント側で読み込む

import { environment } from '../../environments/environment'

url = environment.api_url // ngコマンドの--prodの有無で切り替わる

ビルドターゲットの追加: angular.json


アプリのブートの流れ

  1. エントリーポイント
    • src/main.ts
  2. ルートモジュールAppModule
    • src/app/app.module.ts
  3. ルートコンポーネントAppComponent
    • src/app/app.component.ts
  4. その他コンポーネント、ユーザの操作

src/main.ts

// (中略)
platformBrowserDynamic().bootstrapModule(AppModule)
  .then(success => console.log('アプリブート成功')) // ブラウザのコンソール表示
  .catch(err => console.error(err))

src/app/app.module.ts

ルートモジュールAppModule

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.ts

ルートコンポーネントAppComponent

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html', // テンプレート
  styleUrls: ['./app.component.css'] // スタイル
})
export class AppComponent {
  title = 'プロジェクト'; // プロパティ
}

特に編集するもの


src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>プロジェクト</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>