きっかけ
最近話題のPWAを試してみようと思い、メモを兼ねてQiitaへの投稿を始めてみた。
本業は組込みシステムのソフトウェアに携わっており、WEB系は初心者です。
初心者ながら少しずつ成長する姿を見守っていただければ幸いです。
アドバイス等頂けると助かります。
PART1
・Angularの雛形を作る
・angular/cliをインストール
・ブラウザに表示されるかテスト
環境
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 8.3.20
Node: 12.13.1
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.803.20
@angular-devkit/build-angular 0.803.20
@angular-devkit/build-optimizer 0.803.20
@angular-devkit/build-webpack 0.803.20
@angular-devkit/core 8.3.20
@angular-devkit/schematics 8.3.20
@angular/cli 8.3.20
@ngtools/webpack 8.3.20
@schematics/angular 8.3.20
@schematics/update 0.803.20
rxjs 6.4.0
typescript 3.5.3
webpack 4.39.2
Visual studio code/1.40.1を使用しています。
Angularの雛形を作る
md angular-pwa
cd angular-pwa
angular/cliをインストール
npm i @angular/ci
今回はローカル環境にangular/cliをインストールする。
ローカルインストールの為、-gを付けない
ng newでangular雛形を作成
npx ng new angular-pwa --directory=./ --routing=true --style=scss
プロジェクトフォルダは先に作成しているので、--directoryオプションでインストール先をカレントに指定する。
--routing, styleオプションはお好みで。
ブラウザに表示されるかテスト
npx ng serve
http://localhost:4200/にアクセスして以下のような表示になれば成功。
次回
今回は、angularのインストールから動作確認まで行いました。
次回は作成したプロジェクトをgithubにレポジトリを作成して管理します。