angular CLI 是 Angular 的命令行界面，也是启动应用程序的最简单方法之一。使用 Angular CLI 的美妙之处在于它可以让您专注于您的代码，而不必担心应用程序的结构，因为所有必要的文件都是为您生成的。
使用 Angular CLI 创建生产就绪的应用程序非常容易。另一方面，firebase 可以快速托管应用程序。此外，Firebase 具有许多功能和免费计划，可让您在不受付费计划束缚的情况下试用该平台。
免费计划具有以下特点：
A/B 测试
分析
应用索引
验证
云消息传递
崩溃分析
邀请
性能监控
预测
先决条件
为了运行 Angular CLI，您必须在系统上安装node .js 6.9 和 NPM 3 或更高版本。如果您没有安装 Node.js，请访问Node.js 网站 以查找有关如何在您的操作系统上安装 Node.js 的说明。
您还应该对以下内容有基本的了解：
面向对象 编程
安装 Angular CLI
安装 Angular CLI 很简单：
npm install -g @angular/cli
上面的命令会安装最新版本的 Angular。要验证 Angular CLI 的成功安装，只需发出以下命令：
ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 6.0.8 Node: 10.7.0 OS: linux x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.6.8 @angular-devkit/core 0.6.8 @angular-devkit/schematics 0.6.8 @schematics/angular 0.6.8 @schematics/update 0.6.8 rxjs 6.2.2 typescript 2.7.2
创建 Angular 应用程序
现在您已经安装了 Angular CLI，我们可以开始开发我们的应用程序了。在本教程中，我们不会深入研究构成 Angular CLI 项目的组件，因为这篇文章主要是关于部署到 Firebase。
要创建一个新的应用程序，只需运行 ng new [name_of_project]，您将在其中替换 name_of_project 为您的应用程序的名称。
ng new bucketlist
这将创建开始所需的所有文件。如您所见，Angular CLI 创建了许多文件，否则您将在早期版本（即 Angular v1.1）中自己创建这些文件。
运行您的应用程序
要在浏览器中查看您的应用程序，请导航到项目文件夹并运行ng -serve. 此命令用于在本地为应用程序提供服务。
cd bucketlist ng -serve
现在导航到http://localhost:4200/以查看您的应用程序的运行情况。您对应用程序所做的任何更改都会重新加载到浏览器中，因此您不必继续运行应用程序。
部署
现在我们已经创建了我们的应用程序，是时候部署它了。我们将遵循以下步骤：
创建一个 Firebase 项目
安装 Firebase 工具
为生产而建造
部署到 Firebase
创建 Firebase 应用程序
首先，您需要有一个Firebase帐户。如果您还没有，请立即注册一个免费帐户。
在 Firebase 仪表板上，创建一个新项目，如下所示。您可以简单地将其命名为与您的 Angular 应用程序相同的名称。这会很容易，尤其是当您在 Firebase 仪表板上有很多项目时。
安装 Firebase 命令工具
Firebase 让您可以轻松设置托管，因为它为您提供了所有要遵循的步骤。要安装 Firebase 命令工具，只需运行：
npm install -g firebase-tools
注意：当您发出此命令时，您应该在您的项目目录中，以便将工具安装在您的项目中。
对 Firebase 进行身份验证
登录到 Firebase。
firebase login
对交互式提示回答 “是”。
? Allow Firebase to collect anonymous CLI usage and error reporting information? Yes Visit this URL on any device to log in: https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=486130067&redirect_uri=http%3A%2F%2Flocalhost%3A9005 Waiting for authentication…
接下来，Firebase CLI 工具将打开一个浏览器，系统会要求您允许 Firebase 通过 Google Mail 进行身份验证。
如果认证成功，在浏览器中会出现如下界面 http://localhost:9005/。
初始化项目
下一步是初始化您的 Firebase 项目。这会将您的本地 Angular 应用程序链接到您刚刚创建的 Firebase 应用程序。为此，只需运行：
firebase init
选择托管作为您要为项目设置的功能，因为我们只对Firebase托管感兴趣。
######## #### ######## ######## ######## ### ###### ######## ## ## ## ## ## ## ## ## ## ## ## ###### ## ######## ###### ######## ######### ###### ###### ## ## ## ## ## ## ## ## ## ## ## ## #### ## ## ######## ######## ## ## ###### ######## You're about to initialize a Firebase project in this directory: /home/vaatiesther/Desktop/bucketlist ? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. database: Deploy Firebas e Realtime Database Rules, Hosting: Configure and deploy Firebase Hosting sites === 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: Bucketlist (bucketlist-7 2e57) === Database Setup Firebase Realtime Database Rules allow you to define how your data should be structured and when your data can be read from and written to. ? What file should be used for Database Rules? database.rules.json Database Rules for bucketlist-72e57 have been downloaded to database.rules.json. Future modifications to database.rules.json will update Database Rules when you run firebase deploy. === 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 ? Configure as a single-page app (rewrite all urls to /index.html)? Yes Wrote public/index.html i Writing configuration info to firebase.json... i Writing project information to .firebaserc... Firebase initialization complete!
此命令将创建两个文件：
.fireb aserc
.firebase.json
这两个文件包含 Firebase 配置和有关您的应用的一些重要信息。
JSON 文件应如下所示：
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}生产大楼
Angular CLI 提供了ng build --prod 启动生产构建的命令。此命令创建一个 dist文件夹，其中包含为应用程序提供服务的所有文件。这个过程对于使您的应用程序在加载网页时更轻、更快很重要。为此，只需发出：
ng build --prod
部署应用程序！
如果您到目前为止已经完成了所有步骤，那么我们的本地 Angular 应用程序现在已链接到 Firebase，您可以像使用 Git 一样轻松推送文件。只需执行firebase deploy命令即可部署您的应用程序。
firebase deploy === Deploying to 'bucketlist-72e57'... i deploying database, hosting i database: checking rules syntax... database: rules syntax for database bucketlist-72e57 is valid i hosting: preparing public directory for upload... hosting: 1 files uploaded successfully i database: releasing rules... database: rules for database bucketlist-72e57 released successfully Deploy complete!
您的应用程序现已部署，您可以通过发出以下命令来查看它。
firebase open hosting:site
结论
如您所见，使用 Firebase 非常容易上手，因为托管您的应用所需的设置非常少。与设置传统主机相比，它花费的时间要少得多！Angular 是一个很棒的应用程序开发框架——它多年来一直在发展，每次更新都带有更高级的功能和错误修复。
- 先决条件
- 安装 Angular CLI
- 创建 Angular 应用程序
- 创建 Firebase 应用程序
- 安装 Firebase 命令工具
- 对 Firebase 进行身份验证
- 初始化项目
- 生产大楼
- 部署应用程序！
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
