Integrating Angular (4) with Sails.js

Update #6 April 13, 2017: I have updated this post as well as the sample code repo to use Angular 4.0.2.

Update #5 November 23, 2016: I have updated this post as well as the sample code repo to use Angular 2.2.1.

Update #4 September 23, 2016: I have updated this post as well as the sample code repo to use Angular 2.0.0.

Update #3 September 4, 2016: I have updated this post as well as the sample code repo to use Angular 2 RC6.

Update #2 August 6, 2016: I have also set up the sails sample projects here in this repo

Update #1 August 6, 2016: This post has been updated for Angular 2 RC4.

Recently I had a project requirement where I had to work with Sails.js, a full-blown nodejs framework based on Express.js. The client wanted to integrate Angular js as front-end to it.

So, to cut it short, I started researching about some sample Angular and Sails integrations and I found plenty of them. But the thing is, all of those tutorials are for Angular 1.x. And it makes sense because as of writing this post, Angular 2 is still in beta. And I was easily able to get around working with Angular 1 and Sails but I had a hard time integrating Angular 2 within a Sails app.

As you might already know that Angular 2 is based on TypeScript which is a superset of javascript. It makes use of the latest ES6 js engine and is also backward compatible with ES5 and classic javascript constructs.

So, enough of the intro, let’s get down to the real stuff. I will start and go ahead assuming that you have already setup a sails application. If you find yourself lacking there, go ahead and follow the steps over here to set yourself up.

The first order of business would be installing TypeScript as a global node module. Do that like so:

Now, you will need to add following dependencies to your package.json file.

After that run npm install to install the dependencies.

Add the following to a new file tsconfig.json which you should place in the sails application root.

Now, in your layout.ejs file add the following scripts in the head.

What the above code does is to load the Angular 2 and required ES6 modules. The /app/main is the entry script for angular that we still have to create.

After that, within the body tag of the same file, add the application template tag, like so:

The my-app tag above represents the angular app which we still have to build.

But before we move on to that, if you lift the server and see the console you will see many 404 errors for the above scripts we added.

Actually, sails by default does not have a static access entry for the /node_modules folder. We will create one. Add the following code to a new file express.js in config/express.js.

We are basically creating an Express middleware to allow static access to the node_modules folder. Now if you lift the server again you won’t see the 404 errors.

Now, the next step is to move on to the Angular app which we referred to above. For that let’s start with creating a directory named app  in assets folder. Let’s create three files in there, app.component.ts, app.module.ts and main.ts. 

These are TypeScript files which we will later compile to javascript for our Systemjs config to work. Add the following code to main.ts.

And add the following in app.component.ts.

Lastly, fill in the module file app.module.ts with the following code.

Since this post is just about setting up Angular 2 with Sails, I will let skip what the code is about. It’s just a simple Angular Hello world and you can find it’s explanation on the official site.

Now that we have set up everything correctly, it’s time to compile the TypeScript files. For that let’s navigate to the project directory and run

This will transpile .ts files to .js. After that, you can lift the sails server and you should see the “My First Angular 2 App” text somewhere in the page when you browse to it. For the transpiler to compile automatically upon the change in its files run the watcher like so:

And that’s it!

alexey

alexey

Application developer, movie buff, occasional reader and a huge Manchester United fan.
alexey

Application developer, movie buff, occasional reader and a huge Manchester United fan.