要创建一个使用Angular Web App和Firebase Cloud Messaging的解决方案，你可以遵循以下步骤：

1. 设置Firebase项目：

   • 在Firebase控制台上创建一个新的项目。
   • 在项目设置中，选择“添加应用程序”并选择Web应用程序。
   • 将Firebase提供的配置信息复制到你的Angular环境文件中（例如environment.ts）。

2. 安装Firebase依赖项：

   • 运行以下命令安装Firebase和Angular Fire依赖项：

     npm install firebase @angular/fire
     

3. 在Angular应用程序中配置Firebase：

   • 打开你的Angular环境文件（例如src/environments/environment.ts）并将Firebase配置信息添加到environment对象中：

     export const environment = {
       production: false,
       firebase: {
         apiKey: 'YOUR_API_KEY',
         authDomain: 'YOUR_AUTH_DOMAIN',
         projectId: 'YOUR_PROJECT_ID',
         storageBucket: 'YOUR_STORAGE_BUCKET',
         messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
         appId: 'YOUR_APP_ID',
       },
     };
     

   • 在你的Angular根模块（如app.module.ts）中导入必要的Angular Fire模块并配置Firebase：

     import { AngularFireModule } from '@angular/fire';
     import { AngularFireMessagingModule } from '@angular/fire/messaging';
     import { environment } from '../environments/environment';
     
     // ...
     
     imports: [
       // ...
       AngularFireModule.initializeApp(environment.firebase),
       AngularFireMessagingModule,
     ],
     

4. 创建Firebase Cloud Messaging服务：

   • 在你的Angular应用程序中创建一个新的服务（例如fcm.service.ts）来处理与Firebase Cloud Messaging相关的操作：

     import { Injectable } from '@angular/core';
     import { AngularFireMessaging } from '@angular/fire/messaging';
     
     @Injectable()
     export class FcmService {
       constructor(private afMessaging: AngularFireMessaging) {}
     
       requestPermission() {
         this.afMessaging.requestToken.subscribe(
           (token) => {
             console.log('Permission granted! Save token to your server:', token);
             // 在这里将令牌发送到你的服务器以供后续使用
           },
           (error) => {
             console.error('Unable to get permission to notify.', error);
           }
         );
       }
     
       receiveMessage() {
         this.afMessaging.messages.subscribe((message) => {
           console.log('Received message:', message);
           // 在这里处理收到的消息
         });
       }
     }
     

5. 在应用程序中使用Firebase Cloud Messaging：

   • 在你的Angular组件中导入并使用FcmService：

     import { Component, OnInit } from '@angular/core';
     import { FcmService } from './fcm.service';
     
     @Component({
       // ...
     })
     export class MyComponent implements OnInit {
       constructor(private fcmService: FcmService) {}
     
       ngOnInit() {
         this.fcmService.requestPermission();
         this.fcmService.receiveMessage();
       }
     }
     

6. 执行应用程序：

   • 运行你的Angular应用程序并在浏览器中打开开发者工具。
   • 查看控制台输出以查看有关Firebase Cloud Messaging的日志信息。

这是一个基本的使用Angular Web App和Firebase Cloud Messaging的解决方案。你可以根据你的需求进行进一步的定制和扩展。