如何在5分钟内将Angular教程应用程序部署到Firebase上
只要拥有Node.js和Angular CLI环境，就可以轻松地在本地运行自身 Angular 教程应用程序来理解 Angular 的基础。通过将其托管在 Firebase 上，可以感受到简单地使用 Firebase 开始使用的感觉。
重点是使用Angular命令来解决应用程序项目的依赖关系和构建，并使用Firebase命令提供将其部署到Firebase的信息。
题目要求只有一个选项，所以我提供如下翻译：
起点条件
- Firebaseのアカウントが作成済みであること
环境准备必不可少。
执行命令的客户端终端可以是Mac、Win、Linux都没问题，但这次我们将在Mac环境下执行。
安裝 Node.js
使用Angular开发的应用程序需要安装Node.js。请从https://nodejs.org/en/ 下载和安装Node.js。
截至2019年05月26日，最新的LTS版本即可，有关官方推荐版本，请查看以下内容。
Angular需要Node.js 8.x或10.x版本。
请提供一个选项，以中文对以下内容进行改写: https://angular.jp/guide/quickstart#prerequisites
安装Angular CLI
使用npm包管理器（附带安装Node.js）将Angular CLI全局安装。
sudo npm install -g @angular/cli --unsafe-perm
在我的 Mac 环境中，如果没有安装 sudo 和 –unsafe-perm，就会出现以下错误。
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/@angular/cli
版本确认命令
ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 7.3.9
Node: 10.15.3
OS: darwin x64
Angular:
...
~~
安装Firebase工具
同样地，您可以使用npm命令将其安装至全局环境。
sudo npm isntall -g firebase-tools --unsafe-perm
版本确认指令
firebase --version
6.10.0
在本地运行Angular教程应用程序
只要在Firebase上运行就可以，本来是不需要的。
然而，在实际开发中，通常会在本地进行确认，然后再部署到Firebase上，所以也会在本地运行一次。
下载已完成的教程应用程序
由于这是教程，你需要一步一步地完成一个场景。不过这次我们将直接运行最终版本。
请从 https://angular.jp/generated/zips/toh-pt6/toh-pt6.zip 下载并解压。
切换到应用程序项目的目录中。
cd /Users/hogehoge/Downloads/toh-pt6
安装依赖模块
将依赖模块安装到本地环境。由于是本地环境（位于项目目录下），因此不需要使用sudo命令。
npm install
在这个例子中，angular模块及其所依赖的构建工具将被安装在 /Users/hogehoge/Downloads/toh-pt6/node_modules 目录下。
在本地环境下启动
在本地环境中启动应用程序。
ng serve --open
因为有”open”选项，所以我认为在应用程序启动后会自动在浏览器中访问 http://localhost:4200/。
将Angular教程应用程序部署到Firebase。
Angular应用程序的生产构建
ng build --prod
由于在我的环境中出现以下错误，所以我将hero-search.component.en.ts删除或者将其重命名为hero-search.component.en.ts.back来暂时解决问题，并将其移出构建目标以避免影响。
Date: 2019-05-26T14:43:03.047Z
Hash: 47992a2e3f00b82be305
Time: 9127ms
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.9868d9b237c3a48c54da.js (main) 128 bytes [initial] [rendered]
chunk {2} polyfills.85f47f0bf59079cbc23a.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} styles.167b12e8ea2d1f694d59.css (styles) 765 bytes [initial] [rendered]
ERROR in : Cannot determine the module for class HeroSearchComponent in /Users/hogehoge/Downloads/toh-pt6/src/app/hero-search/hero-search.component.en.ts! Add HeroSearchComponent to the NgModule to fix it.
通过以上的构建命令，将生成dist目录，并且可以确认包含了具有低可读性的js文件的部署目标文件。
$ ls ./dist
3rdpartylicenses.txt main.42fecdd23b351048f441.js styles.167b12e8ea2d1f694d59.css
favicon.ico polyfills.ef261426ad5a9ac404e3.js
index.html runtime.ec2944dd8b20ec099bf3.js
登录Firebase
我将使用CLI登录Firebase。
firebase login
在确认收集以下使用情况数据后，将会跳转至使用浏览器登录Google账户的认证页面。
[? Allow Firebase to collect anonymous CLI usage and error reporting information? No
将项目进行Firebase化。
将本地应用项目初始化为Firebase应用。
firebase init
显示以下结果，并选择应用程序的特点。
这一次不使用实时数据库，只需通过按下空格键选择最简单的Hosting，然后按下回车键进行确认。
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/hogehoge/Downloads/toh-pt6
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
◯ Database: Deploy Firebase Realtime Database Rules
◯ Firestore: Deploy rules and create indexes for Firestore
◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
◯ Storage: Deploy Cloud Storage security rules
选择Firebase的公开项目。这次我们要新建一个项目。
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Select a default Firebase project for this directory:
[don't setup a default project]
my-project-xxxxx (my-project)
❯ [create a new project]
请输入要公开的本地应用项目的目录。
请指定先前构建生成的项目下的dist目录。
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? (public) dist
因为这是SPA，所以我会选择y。
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
由于index.html是使用Angular的构建命令生成的，所以不会被覆盖。（实际上与将其置为”否”可能是相同的。）
? File dist/index.html already exists. Overwrite? (y/N) N
通过这个操作，会生成一个名为firebase.json的文件，里面包含了以下所需的部署信息。
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
将应用程序部署到Firebase
将dist目录部署到Firebase。
firebase deploy
=== Deploying to 'my-project-xxxxx'...
i deploying hosting
i hosting[my-project-xxxxx]: beginning deploy...
i hosting[my-project-xxxxx]: found 7 files in dist
✔ hosting[my-project-xxxxx]: file upload complete
i hosting[my-project-xxxxx]: finalizing version...
✔ hosting[my-project-xxxxx]: version finalized
i hosting[my-project-xxxxx]: releasing new version...
✔ hosting[my-project-xxxxx]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/my-project-xxxxx/overview
Hosting URL: https://my-project-xxxxx.firebaseapp.com
请参考以下网址。
如何将Angular应用部署到Firebase Hosting
在几分钟内将Angular应用部署到Firebase
