Angular 2 is the rave of the moment. It is a modern JavaScript framework that is supercharged with awesome features. In fact, Angular 2 is now more than a framework, it is a platform for developing web, mobile and desktop applications. It is a complete re-write of Angular 1 that takes advantage of the new ES6 features, TypeScript, server-side rendering, RxJS and the goodies that modern JavaScript has to offer.
Today we have a sponsored article from Cloudinary, where Prosper writes about setting up an Angular 2 development environment with all the different tools that are available to its ecosystem. You’ll learn a bit about TypeScript, SystemJS, and webpack.
Cloudinary is an image and video management solution on the cloud for front-end developers, and I’m super excited that they’re sponsoring us!
Angular 2 requires a bit of setup to get started. To avoid the headaches associated with setup, the Angular team came up with the Angular CLI. The Angular 2 CLI makes it easy to create an application that just works out of the box.
Install the Angular 2 CLI globally:
Note: The Angular team has decided to drop the 2 from the name. So, it is now called Angular instead of Angular 2. For the sake of this tutorial, I’ll use Angular 2 to prevent confusion from developers just trying out the framework for the first time.
Use these commands to simply create your app and run it:
In this tutorial, we’ll avoid using the CLI and learn how to set up our development environment from scratch. Meanwhile if you are interested in using the CLI with Cloudinary, check out this great sample. Should we use SystemJS? Is Webpack the best option? How does the transpiling work? You’ll get the answers to these questions as we get our hands dirty with the nitty-gritty of setting up and Angular 2 application.
Set up Your Base Project
Quickly go ahead and create a new directory, newapp. Move into the directory and create an index.html.
Create another file, package.json by running the npm init command from the terminal. You can simply just type enter several times throughout all the questions been asked to speedily create the file.
Let’s install a package, lite-server, that will allow us to serve our application like so:
Note: lite-server comes bundled with browser-sync which automatically reloads the browser when our files change.
Open up package.json to configure lite-server like so:
Now run npm run lite from your terminal, your browser should open up displaying your application and in your terminal, you should see something like this:
Change something within your index.html file and you’ll discover that your browser refreshes automatically and reflects that change!
Configuring the TypeScript Language
You can decide to use TypeScript or use vanilla JavaScript. Personally, I prefer TypeScript because it is JavaScript with some sugar added to it like type checking. So let’s go ahead and install TypeScript like so:
Create a file, tsconfig.json in your directory. All our TypeScript configuration live here.
Open up your tsconfig.json and add the following:
Thanks to the "target": "es5" option, TypeScript will transpile our ES6 code to ES5 so that all browsers can understand the JavaScript code we write. Then we also want sourcemaps and decorators. In Angular 2, lots of decorators are used.
Go ahead and install these scoped npm packages like so:
The reason for installing these packages is to add type definitions to our project. It will make our editor support type-hinting, language highlighting for TypeScript, JavaScript and the modules from node we use in our code.
Open up your package.json file again, let’s add new commands in the scripts section like so:
So, tsc is to start up TypeScript compiler & tsc:w is to watch for file changes. We also added the start command which will run three commands together concurrently. However, you can take advantage of Angular’s AOT compiler. It replaces the usage of tsc with ngc which is Angular template compiler (a drop-in replacement for tsc).
Wait a minute! How do we run three commands concurrently? Aha! Concurrently package to the rescue.
Setting up Concurrently
Concurrently is a nodejs package that allows us to run multiple commands concurrently. Let’s pull in the package.
Now, run npm start from the terminal to start your application with lite-server and typescript working concurrently like so:
Your App is now being served locally.
Install Angular 2 Dependencies & Packages
With great power, comes great responsibilities. Angular 2 depends on some libraries & tools to wield such power.
zone.js simply makes our debugging much productive and supports change detection in our code
core-js standard library for JavaScript that includes polyfills for ES5, ES6, ES7 features in browsers
rxjs hands us observables and asynchronous data streams
So let’s go ahead and install these tools like so:
Having installed these dependencies, let’s pull in some packages that we will need to set up a basic Angular 2 app.
Using the SystemJS package loader
We need a loader to help load all the angular packages that we use in the app. Angular needs a tool to point it to where each and every package is whenever it invokes the package functionalities. SystemJS is a universal dynamic loader. It loads ES6 modules, CommonJS, AMD and global scripts in the browser and NodeJS.
Create a new file, systemjs.config.js, the SystemJS configuration file in the root directory and add the contents of this gist to it. Take a look at the gist first, too. You’ll see something like:
It looks for the application files to run in the app directory, you can change it to whatever directory you want. You can also see that it has specified what directory to look for angular packages, node_modules/@angular.
Take another good look at this section too:
This config lets SystemJS know how and what to load in the app.
Now head over to your index.html and reference the polyfills we installed earlier. Then load SystemJS like so:
Use Webpack as an Alternative
Webpack is a fantastic alternative to SystemJS. It is a popular module loader and bundler that helps load code from a server into a browser and generates static assets.
There are different ways of configuring Webpack for use in an Angular 2 application. One such way is installing webpack and its dev-server.
Note: Webpack 1.x was used here.
Then, you can install webpack loaders. Loaders help preprocess different types of files, so there are loaders for different files.
Another advantage of using Webpack is the presence of plugins. Webpack plugins alter the behaviour of webpack for different scenarios. For example:
Defineplugin is used to define environment variables that we can reference within our app
UglifyJSPlugin minifies the bundles
NoErrorsPlugin stops the build if there is any error
ExtractTextPlugin extracts embedded css as external files
So, let’s install some plugins like so:
Let’s configure Webpack. We will need a bundle for our application code, another for the vendor(angular libraries that were imported) code and a third one for the polyfills. So create a file, vendor.ts in the root directory.
Create another file, polyfills.ts, in the root directory like so:
Create a new file, webpack.config.js, the Webpack configuration file in the root directory like so:
Another advantage to using Webpack is the ability to have separate configuration for testing, development and production. So go ahead and create a config folder. The webpack config will reside here.
Create a file, webpack.common.js inside the config directory and add this code to it:
Create a webpack.dev.js file inside the config folder too, like so:
In the code above, you can see that webpack.dev.js imports the webpack.common.js and defines some extra configuration like setting a directory for the build output, defining how the source map is cr