In this tutorial we will learn how to set up develpment environment for Angular 2. TypeScript is a main language for developing applications in Angular. TypeScript is super set for all ECMAScripts and javascript.
Setting up the development environment for Angular2 are as mentioned in the below steps :
Step 1: Suppose we want to create a project for linux server. Hence the path for our project folder will be : /var/www/html/project_directory
Now we will create our project folder in the above path using the following commands in your terminal.
username@machine-name:~$ cd /var/www/html
username@machine-name: /var/www/html$ mkdir angular2
username@machine-name: /var/www/html/angular2$
Now we will create configuration files:
Step 2: Now create a file tsconfig.json using the below command :
username@machine-name: /var/www/html/angular2$ touch tsconfig.json
username@machine-name: /var/www/html/angular2$ nano tsconfig.json
Now paste the following code in the file tsconfig.json and press control + x to exit the file
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
now press Y key and the Enter key to save file as tsconfig.ts
TypeScript definition are identified by the typings.json in the angular application.
Step 4: Now we create another file named package.json in the project folder angular2 and copy the below code in the file:
package.json
{
"name": "angular2",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.7",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.7.5",
"typings":"^0.6.8"
}
}
The package.json file contains all the packages requiered by the application which are installed and maintained with the help of Node Package Manager, for this we need to install the Node Package Manager.
Step(5): To install packages, run the below npm command in command prompt.
username@machine-name: /var/www/html/angular2$ npm install
now we see a directory has been created in our project directory with the name "node_modues". To test the setup, create an index.html file inside the root directory of the project i.e. angular2
index.html
<!DOCTYPE html>
<html>
<head>
<title>Testing setup</title></head>
<body>
Loading...
</body>
</html>
Now write the following command in the terminal
username@machine-name: /var/www/html/angular2$ nmp start
we shold see the html page displaying “loading....” with title “Testing setup”
Note: Angular uses server port 3000 by default.
1 Comment(s)