触发因素

我最近想要試試PWA這個熱門話題，所以開始在Qiita上發表文章，也順便當作筆記。
我的主業是從事嵌入式系統軟體的工作，對於網頁開發還只是初學者。
希望大家能夠看著我一點一點成長，如果能給予一些建議就太好了。

第一部分

・创建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仓库来管理我们创建的项目。

第二部分：GitHub仓库注册