1. 安装socket.io-client：

在项目根目录下运行以下命令：

npm install socket.io-client --save

2. 导入Socket.io-client模块：

在app.module.ts文件中导入socket.io-client模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SocketIoModule, SocketIoConfig } from 'socket.io-client';

import { AppComponent } from './app.component';

const config: SocketIoConfig = { url: 'http://localhost:3000', options: {} };

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SocketIoModule.forRoot(config)],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. 在组件中使用Socket.io-client：

在组件中使用Socket.io-client时，需要导入对应的库：

import * as io from 'socket.io-client';

在组件类中定义socket连接和事件处理程序：

import { Component } from '@angular/core';
import * as io from 'socket.io-client';

@Component({
  selector: 'app-root',
  template: `
{{ message }}
`,
})
export class AppComponent {
  socket: any;
  message: string;

  constructor() {
    this.socket = io.connect('http://localhost:3000');
    this.socket.on('message', (data: { message: string }) => {
      this.message = data.message;
    });
  }
}

上述代码中，我们定义了socket连接和message事件的处理程序。当收到message事件时，我们将消息赋值给组件中的message属性，以在模板中显示消息。

执行以上步骤后Socket.io-client即可以在Angular 12应用中进行侦听。