How to add to an Angular application

Lots of people get confused when trying to use with Angular, some developers just add the script to the HTML and start using it, even though it works I don’t recommend doing this way, let me show you the right way to use it with Angular.

After creating your angular project install ng-socket-io via:

npm install ng-socket-io --save

This is an Angular specific module. After the installation is complete you have to configure in your app.module.ts, you basically just have to add the imports and inform the server url:

import { SocketIoModule, SocketIoConfig } from 'ng-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:8000', options: {} };   <-----------------
  declarations: [
  imports: [
    SocketIoModule.forRoot(config)     <-----------------
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Next, open the tsconfig.json and add the “include” attribute at the end, this will prevent some errors when building your project. Make sure the file looks like this:

  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
    "lib": [
  "include": [

That’s it! Now you just have to import it to your component and start using it:

import { Socket } from 'ng-socket-io';
//usage example
constructor(private socket: Socket) { 

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>