Again, we are going to create our Angular application using the ng new command. We are going to be providing routing support, but when we get around to doing the routing part, we will see how we can ensure that users cannot bypass our authentication:

ng new Client --style scss --prefix atp --routing true

Since our Angular client will be making regular use of Socket.IO, we are going to bring support in for Socket.IO using an Angular-specific Socket.IO module:

npm install --save ngx-socket-io

In app.module.ts, we will create a connection to our Socket.IO server by creating a configuration that points to the server URL:

import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:3000', options: {}}

This configuration is passed into the static SocketIoModule.forRoot method when we import the module, which will configure the client-side socket for us. As soon as our client starts, it will establish a connection, triggering the connect message sequence we described in the server code:

imports: [
  BrowserModule,
  AppRoutingModule,
  SocketIoModule.forRoot(config),