尝试使用 AngularFire 的云消息传递 Angular 模块会抛出缺少的应用程序配置值

Question

我正在使用AngularFire2在我的Angular应用程序上设置Firebase Cloud Messaging 来接收和发送通知。但是，尝试获取用户的当前令牌时，应用会返回错误。

我已经创建了"firebase-messaging-sw.js"和"manifest.json"文件来注册服务工作者，并正确添加了所有内容，但没有成功。

我订阅可观察量的组件。

export class HomeComponent implements OnInit {
constructor(
private afMessaging: AngularFireMessaging,
private afStore: AngularFirestore,
private afAuth: AngularFireAuth,
) {}
ngOnInit() {
this.afAuth.user.pipe(
exhaustMap(
user => {
return this.afMessaging.getToken.pipe(
tap(
token => {
console.log(token);
this.afStore.collection('users').doc(user.uid).update({
fcmToken: token
});
}
)
);
}
)
).subscribe();
this.afMessaging.messages
.subscribe((message) => { console.log(message); });
}
}

服务辅助角色：

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts("https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/6.3.4/firebase-messaging.js");
// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
messagingSenderId: "231973795174"
});
// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload) {
console.log(
"[firebase-messaging-sw.js] Received background message ",
payload
);
// Customize notification here
const notificationTitle = "Background Message Title";
const notificationOptions = {
body: "Background Message body.",
icon: "/firebase-logo.png"
};
return self.registration.showNotification(
notificationTitle,
notificationOptions
);
});

清单

{
"name": "App",
"gcm_sender_id": "103953800507"
}

The Angular.json

"assets": [
"src/favicon.ico",
"src/assets",
"src/firebase-messaging-sw.js",
"src/manifest.json"
],

详细地说，我得到的错误如下：

未捕获(承诺(：Firebase 错误：安装：缺少应用配置值。(安装/缺少应用程序配置值(。 Firebase 错误：安装：缺少应用配置值。(安装/缺少应用程序配置值(。 at extractAppConfig (index.esm.js：89( at Object.factoryMethod [as installations] (index.esm.js：1110( at FirebaseAppImpl.push../node_modules/@firebase/app/dist/index.cjs.js.FirebaseAppImpl._getService (index.cjs.js：191( at FirebaseAppImpl.firebaseAppImpl.[作为装置](索引.cjs.js：458( at index.esm.js：415 在步骤(tslib.es6.js：99( at Object.next (tslib.es6.js：80( 在 tslib.es6.js：73 at new ZoneAwarePromise (zone-evergreen.js：876( 在__awaiter (tslib.es6.js：69( at resolvePromise (zone-evergreen.js：797( 常青区.js：707 常青区.js：723 at ZoneDelegate.invoke (zone-evergreen.js：359( at Object.onInvoke (core.js：39698( at ZoneDelegate.invoke (zone-evergreen.js：358( at Zone.run (zone-evergreen.js：124( 常青区.js：855 at ZoneDelegate.invokeTask (zone-evergreen.js：391( at Object.onInvokeTask (core.js：39679(

Answer 1

您需要在初始化应用程序调用中填写所有必需的详细信息：

const firebaseConfig = {
apiKey: "",
authDomain: "<your app>.firebaseapp.com",
databaseURL: "https://<your app>.firebaseio.com",
projectId: "<your app>",
storageBucket: "<your app>.appspot.com",
messagingSenderId: "<your sender id>",
appId: "<your app id>",
measurementId: "<your measurement id>"
};

您可以从 Firebase 控制台获取这些详细信息。