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) { 

Recommended for you

Creating a Live Auction App with Angular 2, Node.js and Socket.IO Angular 2 Auction App In this tutorial we're going to build a very cool Live Auction Application, my goal is to demonstrate how Angular 2, Node.js and work together, and as everyone knows Angular 2 will soon come out so I thought it would be great to write a tutorial involving it. Of c...
@angular/cli error when creating project: Unexpected token = After installing @angular/cli lots of people get this error when trying to create the fist angular project: SyntaxError: Unexpected token = at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:373:25) at Object.Module._extensions..js (module.js:416:10) at Modu...
Angular2 Tutorial: Developing a Realtime Chat App Angular 2 Chat Application Hi guys, today we're going to make an awesome chat application with Angular2, NodeJS and, this tutorial will involve quite a lot of things, and there are also lots of small details, so it will be a little bit longer than usual. To easily understand and make t...
Tutorial: Creating a Realtime Notification System in Angular and Nodejs Notification System Demo In this post I'm going to show you how to create a simple realtime notification system using Angular, Nodejs and It will offer a page where we will be able to create notifications and broadcast it to all the online users. I'll be making it as basic as possible...

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>