本文是关于使用Angular+Firebase创建聊天应用的文章。
下一篇文章：使用Angular创建视图（聊天界面）。
相关内容：Angular2环境的搭建（使用yoeman进行搭建）。

在这篇文章中要做的事情

• Angular CLIをインストール

プロジェクトを作成

「Angular Cli」的意思是什么？

在进行Angular环境的构建时，“Angular CLI”是必不可少的。
与其他JavaScript框架进行比较时，有意选择Angular的理由可能包括以下几点。

1. 与设计师合作更容易。

1. 由于有丰富的官方文档，遇到困难时可以依靠官方文档。

1. 组件、服务、路由、模块、管道、HTTP通信等所有构建应用所需的功能都齐备，无需使用第三方库。

1. 命名规则和目录结构已经预先确定，无需为每个项目准备文档，代码的可维护性更高。

不需要花时间进行环境设置，可以立即开始编码。

可以确保4和5这当中的其中一点的是“Angular CLI”。
使用这个库可以通过一个命令进行环境搭建，它会安装所需的库，创建项目的基本目录结构，以及基于webpack的构建和测试等基本设置。

（补充：2020/6）我正在更新为目前（2020年6月）的最新内容。

实施步骤

安装 Angular CLI

npm install -g @angular/cli
// ハンズオンを進める場合はバージョンを合わせるため、
// npm install -g @angular/cli@9.1.8
// でインストールしてください。

2020/6补充
获得与Google Angular团队共享使用情况数据的确认。如果没有问题，请输入“是”。

? Would you like to share anonymous usage data with the Angular Team at Google u
 nder Google’s Privacy Policy at https://policies.google.com/privacy? 
 For more details and how to change this setting, see http://angular.io/analytics.
y

如果已经安装了Angular CLI ver.0.XX的话

随着Angular升级至4版，Angular CLI也升级至”ver1.XX”，同时将库的表示从”angular-cli”更改为”@angular/cli”。

只是简单地运行npm update命令并不能更新库，所以需要先卸载再重新安装才可以更新。

// グローバル環境のアップデート
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

// ローカル環境のアップデート
rm -rf node_modules dist
npm install --save-dev @angular/cli@latest
npm install

创建项目

执行ng new命令。
（npm install也会自动执行。）

ng new MyApp // newの後に作成したいプロジェクト名を入れる。
? Would you like to add Angular routing? (y/N) y
? Which stylesheet format would you like to use? (Use arrow keys) css

2020/6追述：现在可以默认选择不同类型的CSS了。如果想使用Sass，请按照以下方式操作：

bash
ng new my-app –style=sass // SASS
ng new my-app –style=scss // SCSS

使用ng serve进行测试

使用ng serve命令在本地启动服务器，并访问http://localhost:4200/以确认其运行情况。

cd MyApp
ng serve

ng命令（angular-cli的快捷命令）

我会从中提取出常用的东西。
请参考官方文档获取剩下的命令。

执行相关

ng serve // ローカル環境で実行。デフォルトでライブリロードしてくれる。
ng serve --aot // ローカル環境で実行。事前コンパイルしてくれる。
ng build --prod　// 製品版のビルド。minify＋事前コンパイルしてくれる。
ng test // 単体テスト(jasmin + karma)。
ng e2e // e2eテスト（jasmin + protractor）。
ng lint // Typescriptのtslintを実行。記法、エラーのチェック。
ng help // ヘルプを表示。
ng version // バージョンを表示。
ng update // package.jsonのアップデートを勧めてくれる。[ver6~]
ng add // angular機能の追加、更新。[ver6~]

环境构建相关

ng generate component my-new-component // コンポーネントの作成。基本となる部品。
ng g component my-new-component // エイリアス。この表記でもよい。
ng g module my-module　// モジュールの作成。コンポーネントやサービスなどの部品をまとめる。
ng g pipe my-new-pipe // パイプの作成。AngularJSで言うfilter。文字列変換。
ng g service my-new-service // サービスの作成。ロジックにかかる部品。
ng g class my-new-class // クラスの作成。TypeScriptのクラス。
ng g guard my-new-guard // ガードの作成。認証機能には必須。
ng g library my-new-library // 自作ライブラリの作成。[ver6~]

关于 ng update 的说明

自Angular6起，新增了ng update命令，它除了可以更新npm、yarn等依赖关系外，还可以执行项目所需的转换操作。

例如，ng update @angular/core命令会更新RxJS、TypeScript和Angular框架的所有内容，以保持它们的最新状态，并在这些包中执行可用的优化。执行此命令还会自动安装rxjs-compat，以更顺利地引入RxJS v6。

关于ng add

ng add是一个命令，它可以为项目添加一些最初状态下未实现的Angular库，例如@angular/pwa和@angular/material。

同时进行附加和安装脚本的执行，添加依赖项（例如polyfill），进行项目优化等处理，以便立即使用该库。

项目的构成

├── .editorconfig.json
├── .gitignore
├── angular.json
├── browserslist
├── karma.conf.js
├── package.json
├── package-lock.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
├── tslint.json
├── e2e
├── node_modules
└── src
    ├── app
    │    ├── app.component.css
    │    ├── app.component.html
    │    ├── app.component.spec.ts
    │    ├── app.component.ts
    │    ├── app.module.ts
    │    └── app-routing.module.ts
    ├── assets
    ├── environments
    │    ├── environment.prod.ts
    │    └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    ├── styles.css
    └── test.ts

源代码

在该阶段的源代码