Angular 2 Setting Environment
Angular 2 Environment SetUp:– We will show you how to install angular 2 and getting started with the development of the first project.
Now install node.js into your machine; it will installed inside windows folder once you will follow the simple installation steps.
Below are the steps how to create developing environment for creating angular 2 projects. Follow the given steps and run your first angular 2 program into your machine.
Installation Guide:-
1. Install nodeJs and npm
By the way when you install nodeJS automatically npm is installed. If you are absolute beginner in web development and do not know how to install node.js then click this link ” target=”_blank”> to download node.js.
2. Create project folder & add configuration files
In this tutorial we will create a project folder named myFirstAngularApp and the path for my project folder is c://xampp/htdocs/myFirstAngularApp. Don’t confused with xampp folder where we have created our project folder why because we can further explore our app for server side rendering also. So you are free to make your folder anywhere you wish. Here we will show you a complete look over the steps we followed here to install our angular 2 to run our demo program for you.
Next step is to create some folders for the following below files and copy them there because these all files are mandatory to keep inside project folder.
package.json : Lists packages that our app will depend on and defines some useful scripts. Below is the screenshot of package.json file which you can copy and paste into your project folder
tsconfig.json : Is a TypeScript compiler configuration file.
typings.json : Identifies TypeScript definition files.
systemjs.config.js :The SystemJS configuration file.
index.html :In the project root folder (not the app folder), create an index.html file and paste it inside that folder ; you can copy from below given file :
package.json file
{
"name": "Angular2App",
"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.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.4",
"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.14",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^1.0.4"
}
}
|
package.json file
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
|
tsconfig.json file
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
|
typings.json 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+20160621231320"
}
}
|
systemjs.config.js 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);
|
index.html file
<html>
<head>
<title>Angular2App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for 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-app>Loading...</my-app>
</body>
</html>
|
Now Your folder will look like similar to the screenshot of our project folder given below.
|
3. Install Packages
We install the packages listed in package.json using npm. From programs, go to Node.js and open the command window. Next, navigate to your project folder. Absolute path of our project folder while navigating in node.js command prompt will be c://xampp/htdocs/myFirstAngularApp
Enter the following command:
npm install
The installation might take a few minutes and you should finally see the screen like below. All is well if there are no console messages starting with npm ERR! at the end of npm install. There might be a few npm WARN messages along the way — and that is perfectly fine.
Below we have given you a complete pictorial folder structure with all mandatory dependencies files and packages which at least you need to work with angular 2.
With this, you should have all the dependencies installed. You project folder will now have additional folders for node_modules and typings as below:
|
Advertisements
