In this article, we are going to set up the Angular 2 development environment and run our first Angular 2 Application.
The following is the prerequisite in order for the program to work on the Angular 2 framework.
- Installation of the Node.js: Node.js installer for Windows or Macintosh can be downloaded from the following link.
https://nodejs.org/en/download/
Once the windows installer is downloaded, then do the following steps.
- Double Click on the installer (node-v4.4.7-x64.msi), you will notice the following dialogue box.
- Click on the next button, installer will display the following dialogue box asking you to accept the End-user License Agreement. Check the checkbox at the bottom and click on the Next button.
- You will find the following dialogue box, asking you choose the destination folder to install the Node.js files. Choose the default destination folder path and click on the Next button as shown below.
- You will notice this dialogue box that will ask you to select the custom setup. Keep the default settings and click on the Next button.
- You will then be prompted with this dialogue box, click on the install button to initiate the installation of the Node.js.
- Once the installation is completed successfullyclick on the Finish button to complete the installation of Node.js on your machine.
Once installation of Node.js is completed, then we will create the following required package files in order to configure the project.
Creation of the project folders: Create the following folders on your C drive (angular2-tutorials / angular2-first-program). Inside this folder add the following four files as shown below.
- File package.json : It has the list of all packages that are required to kick Start the app. It defines the handful of useful scripts as shown below.
{
"name": "angular2-first-program",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.5",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.15",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^1.0.4"
}
}
2. File tsconfig.json: It has the Typescript compiler configuration. The following are the contents of the file.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
3. File typings.json: It identifies the Typescript definition files. The following are the contents of the file.
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160807145350"
}
}
4. File systemjs.config.js: It is the SystemJS configuration file. The following are the contents of the file.
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
At this, we are all set to install angular2 files and packages after executing the following command on the command line.
npm install npm run typings install
It takes a moment to complete the installation of the angular2 framework setup.
Creation of the first Angular 2 App root components: The following are the files and the folder structure for the first Angular 2 App root components.
1. Create a folder app and inside this folder place the following three Typescript files as shown below.
- File main.ts: It is a Typescript file with the following content. It should be created under the app folder.
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './Module';
platformBrowserDynamic().bootstrapModule(AppModule);
- File Component.ts: It is a Typescript file with the following content. It should be created under the app folder.
import { Component } from '@angular/core';
@Component({
selector: 'my-first-angular2-app',
templateUrl: 'template.html'
})
export class AppComponent { }
- File Module.ts: It is a Typescript file with the following content. It should be created under the app folder.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './Component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
2. Create a folder ‘assets’ under the folder angular2- angular2-first-program. Place the style.css file inside this folder. The following are the contents of this file.
h2 {
color: #369;
font-family: Georgia, Helvetica, sans-serif;
font-size: 250%;
}
p {
color: #969;
font-family: Georgia, Helvetica, sans-serif;
font-size: 250%;
}
body {
margin: 2em;
}
3. Create an index.html file inside the folder angular2- angular2-first-program which has the following content.
<html>
<head>
<title>Angular 2 First Program</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/styles.css">
<!-- 1. Load libraries -->
<!-- Poly-fills for the older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(
function(err){
console.error(err);
}
);
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-first-angular2-app>Please wait...</my-first-angular2-app>
</body>
</html>
Once we have the above structure of the files and packages, we can build our first Angular 2 after opening the command line and execute the following command.
npm start
Output
After executing the above command, the Typescript (extension as .ts) files will automatically be compiled to javascript (extension as .js) files and the app will automatically start on the default web browser as shown below.
Source code to build first appusing Angular 2 program
Conclusion
In this article, we have learnt about the setting up of the angular 2 development environment and built our first Angular 2 app.
About the Author
Thanks for Your tutorial,
But can we still use SystemJS as module loader,because ang2 migrated to webpack?