将 Angular5 应用部署到 Firebase

引言

在本文中，我将解释如何将 Angular5 应用部署到 Firebase，以及将 Firebase 库添加到你的应用程序中。

什么是 AngularFire？

• 基于 Observable - 利用 RxJS、Angular 和 Firebase 的强大功能。
• 实时绑定 - 实时同步数据。
• 身份验证 - 使用各种提供程序登录用户，并实时监控身份验证状态。
• 离线数据 - 使用 AngularFirestore 自动存储离线数据。
• ngrx 友好 - 使用 AngularFire 的基于操作的 API 与 ngrx 集成。

添加库

作为第一步，让我们开始将库添加到我们的项目中，通过执行以下命令。但在执行之前，请确保你已安装最新版本的 Angular-cli。

$ npm install --save firebase@^4.4.0 angularfire2@^5.0.0-rc.2

接下来，在 app.module.ts 文件中，添加以下导入语句，并将 AngularFireModule、 AngularFireDatabaseModule 和 AngularFireAuthModule 添加到 @NgModule 装饰器的 imports 数组中。

import { environment } from './../environments/environment';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    AppRoutingModule
  ],

  providers: [],
  bootstrap: [AppComponent]

})

export class AppModule { }

使用代码

创建 Firebase 项目

要创建 Firebase 项目，请访问 https://console.firebase.google.com 网站。创建帐户并登录后，点击“前往控制台”，并阅读以下步骤。

步骤 1：点击“将 Firebase 添加到你的 Web 应用”图标

步骤 2：复制 config 对象中的键值对，并将其粘贴到你的项目解决方案中的 environments/environment.ts 文件中，如下所示：

export const environment = {
  production: false,
  firebase:{
    apiKey: "",
    authDomain: "example.firebaseapp.com",
    databaseURL: "https://example.firebaseio.com",
    projectId: "angular5*",
    storageBucket: "example.appspot.com",
    messagingSenderId: ""
  }
};

就这样，这就是 Firebase 设置所需的一切。

部署到 Firebase

非常简单，只需打开你的命令行并输入以下命令

$npm i -g firebase tools
$firebase login
$firebase init

然后在 firebase.json 文件中，输入以下代码

{
  "hosting": {
     "public": "dist",
     "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
     ],
     "rewrites": [
       { "source": "**", "destination": "/index.html" }
     ]
  }
} 

$ ng build --prod 

$firebase deploy

最后，你将得到如上所述的内容。只需复制链接，你就可以访问你的托管项目了。

结论

就这样，如果你有任何问题，请随时评论！谢谢！