Angular14: 画面1を表示する

環境

• VirtualBox 6.1.36
• Debian 11.4

• nvm v0.39.1
• Node.js v16.16.0 (LTS)
• Angular v14.1.2

1. 環境設定

1-1. Node.jsをインストールする

ホームディレクトリに移動する。

$ cd /home/mizuki
        

nvmを使ってインストール可能なNode.jsのバージョンを確認する。

$ nvm ls-remote

v16.16.0 (Latest LTS: Gallium)
        

nvmを使って最新のLTSのNode.jsをインストールする。

$ nvm install --lts
$ node -v

v16.16.0
        

参考情報

• nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

1-2. Angularをインストールする

インストールするディレクトリに移動する。

$ cd /home/mizuki/workspace/aws-amplify-budget
        

インストール可能なAngularのバージョンを確認する。

$ npm view @angular/cli versions

[
    '14.1.2'
]
        

ローカルにAngularをインストールする。

$ npm install @angular/cli@14.1.2
$ npx ng version

Angular CLI: 14.1.2
Node: 16.16.0
Package Manager: npm 8.11.0
        

2. 画面1を表示する

2-1. ワークスペースを作成する

ワークスペースを作成するディレクトリに移動する。

$ cd /home/mizuki/workspace/aws-amplify-budget
        

ワークスペースを作成する。

$ npx ng new budget

? Would you like to add Angular routing? (y/N) Yes
? Which stylesheet format would you like to use? SCSS
        

ローカルで実行する。

$ npx ng serve
        

ブラウザで表示する。

http://localhost:4200/
          

参考情報

• Running your application locally - Deploying an application - Angular

2-2. 画面1のコンポーネントを追加する

画面1のコンポーネントを追加する。

$ npx ng generate component gamen1
        

画面が見つからない場合のコンポーネントを追加する。

$ npx ng generate component page-not-found
        

参考情報

• Creating a component - Angular Components Overview - Angular

2-3. 画面1のコンポーネントを表示する

<router-outlet/>でコンポーネントを描画する。

src/app/app.component.html

<router-outlet></router-outlet>
          

ルーティング情報を記述する。

src/app/app-routing.module.ts

const routes: Routes = [
    { path: 'gamen1', component: Gamen1Component },
    { path: '', redirectTo: '/gamen1', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
];
          

enableTracingでブラウザのコンソールにデバッグ出力を行う。

src/app/app-routing.module.ts

@NgModule({
    imports: [RouterModule.forRoot(routes, { enableTracing: true })],
    exports: [RouterModule]
})
          

ローカルで実行する。

$ npx ng serve
        

ブラウザで表示する。

http://localhost:4200/
          

参考情報

• Router tutorial: tour of heroes - Angular