angular和ionic_如何在Ionic 4和Angular中设置Firebase

angular和ionic

Google Firebase is the love of my life. It’s noSQL and easily accessible online, thanks to Google’s sweet UX team. Firebase gives you functionality like analytics, auth, databases, messaging and crash reporting so you can move quickly and focus on your users.

Google Firebase是我一生的挚爱。 这是noSQL，可以轻松地在线访问，这要归功于Google出色的UX团队。 Firebase为您提供了分析，身份验证，数据库，消息传递和崩溃报告等功能，因此您可以快速移动并专注于用户。

Interested yet? Let’s get started with Firebase and Ionic 4 by showing you how to set things up.

有兴趣吗？ 让我们通过演示如何进行设置来开始使用Firebase和Ionic 4。

The setup illustrated in this post is based on an Ionic/Angular project, so this same setup will work just as well in a regular Angular project without Ionic.

这篇文章中说明的设置基于Ionic / Angular项目，因此，在没有Ionic的常规Angular项目中，同样的设置也可以正常工作。

开始一个新项目 (Starting a New Project)

Start a new Ionic 4 project that uses Angular by running the ionic start in your command line:

通过在命令行中运行ionic start ，启动一个使用Angular的新Ionic 4项目：

$ ionic start alligator_firebase --type=angular

While your new Ionic 4 project is building, let’s head over to the Firebase Console. If you are not logged into a Google account, do so now!

在构建新的Ionic 4项目时，让我们转到Firebase Console 。 如果您尚未登录Google帐户，请立即登录！

This is the easy part. Click the white and blue “Add Project” button and type in a name for your awesome new project under “Project Name”. I’m going to go with “Alligator”.

这是简单的部分。 单击白色和蓝色的“添加项目”按钮，然后在“项目名称”下为您的新项目键入一个名称。 我将选择“鳄鱼皮”。

Click “Create Project”. Once it loads, proceed to your new project.

点击“创建项目” 。 加载后，继续进行新项目。

获取配置规则 (Getting the Config Rules)

You should now be on a blue page with your project title written on the top left corner.

现在，您应该处于一个蓝页上，项目标题写在左上角。

Click the HTML div tag icon underneath your project title. You should now see a pop-up that contains a code snippet that looks very similar to the one below.

单击项目标题下HTML div标签图标。 现在，您应该看到一个弹出窗口，其中包含一个与以下代码非常相似的代码片段。

<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "djlsjdflkasjlfk__339201",
    authDomain: "alligator-9930.firebaseapp.com",
    databaseURL: "https://alligator-9930.firebaseio.com",
    projectId: "alligator-9930",
    storageBucket: "alligator-9930.appspot.com",
    messagingSenderId: "20948309483"
  };
  firebase.initializeApp(config);
</script>

The config credentials I am showing you above are not real API keys and URLs. Be wary when publishing Firebase configs in a repository or website. Anyone with those credentials, as we will soon see, may read and write to your database.

我上面显示的配置凭据不是真正的API密钥和URL。 在存储库或网站中发布Firebase配置时要当心。 我们将很快看到，拥有这些凭据的任何人都可以读写您的数据库。

Copy the portion on your Firebase project that corresponds to the highlighted code above.

你的火力地堡计划的部分复制对应于上述突出显示的代码。

安装AngularFirebase依赖项 (Install AngularFirebase Dependencies)

Before you add any Firebase to your new Ionic 4 project, make sure that you have installed AngularFire2. To do so, run the following command in your CLI:

在将任何Firebase添加到新的Ionic 4项目之前，请确保已安装AngularFire2 。 为此，请在CLI中运行以下命令：

$ npm install @angular/fire

将配置规则传输到Ionic (Transferring Config Rules to Ionic)

Now that you have your config rules, you must paste them into a few files in your Ionic 4 app. cd into the Ionic 4 app we started, and head on over to the file environment.prod.ts (the production environment file), located in the environments folder.

有了配置规则后，您必须将它们粘贴到Ionic 4应用程序的几个文件中。 光盘进入我们启动的Ionic 4应用程序，然后转到位于环境文件夹中的文件environment.prod.ts (生产环境文件)。

Add in the config credentials that you copied earlier:

添加先前复制的配置凭据：

environment.prod.ts

环境产品

export const environment = {
  production: true,
  firebase: {
    apiKey: "your_apiKey",
    authDomain: "your_authDomain",
    databaseURL: "your_databaseURL",
    projectId: "your_projectID",
    storageBucket: "your_storageBucket",
    messagingSenderId: "your_messagingSenderId"
  }
};

Next, head over to the environment.ts, located in the same folder:

接下来，转到位于同一文件夹中的environment.ts ：

environment.ts

环境

export const environment = {
  production: false,
  firebase: {
    apiKey: "your_apiKey",
    authDomain: "your_authDomain",
    databaseURL: "your_databaseURL",
    projectId: "your_projectId",
    storageBucket: "your_storageBucket",
    messagingSenderId: "your_messagingSenderId"
  }
};

Finally, locate the root module file (app.module.ts). Import your newly installed @angular/fire modules and your environment.ts file like the highlighted code snippet below.

最后，找到根模块文件( app.module.ts )。 像下面突出显示的代码片段一样，导入新安装的@ angular / fire模块和environment.ts文件。

app.module.ts

app.module.ts

// ...

// firebase imports, omit what you don't need for your app
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireStorageModule } from '@angular/fire/storage';
// environment
import { environment } from '../environments/environment';

That’s all there is to it! Go out there and make your AngularFire Ionic app a success!

这里的所有都是它的！ 到那里去，使您的AngularFire Ionic应用程序成功！

翻译自: https://www.digitalocean.com/community/tutorials/ionic-firebase-in-ionic4

angular和ionic