anugula2setupbyshubham

Angular 2 Seed Project Step by Step configurations by Shubham

Step 1. Create a directory in which your project resides

$ mkdir angular-2-seed$ cd angular-2-seed

Step 2. Create config files and configured as your requirementspackage.json -> npm package dependenciestsconfig.json -> typescript compiler generate javascript code.typings.jsonsystemjs.config.js

See reference here “https://github.com/codershubhamverma/angular2-seed”Or clone repository from here and see the config files.“https://github.com/codershubhamverma/angular2-seed.git"

Step 3. Install packages

$ npm install —save

After installing your project folder directory structure will be look like like this

angular-2-seed|_ node_modules|_typings|_package.json|_system.config.josn|_typings.json

Note: Make sure u did not get any error while installing npm packages, if found message npm ERR! means some packages did not installed, so reinstall this again by typing “npm install”. Err will occur if network failure in most of the cases.

Step 4. Everything is setup now time to create you app in angular2 Create application folder $ mkdir app

Step 5. Create the file app/app.module.ts and write the code below// This is the entry point to your application

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';

@NgModule({ imports: [ BrowserModule ]})

export class AppModule { }Step 6. Create a component and add it to application.

Create file app/app.component.ts with the code below

import { Component } from '@angular/core';@Component({ selector: 'my-app', template: ‘<h1>Welcome to the world of angular 2</h1>'})export class AppComponent { }

Step 7. Edit the file app/app.module.ts to import your new AppComponent and add it in the declarations and bootstrap fields in the NgModule decorator

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({ imports: [BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent]})export class AppModule { }

Step 8. Run project. Create file “app/main.ts ” with the code below

import { platformBrowserDynamic } from '@angular/platform-browser-dy-namic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();platform.bootstrapModule(AppModule);

“This code initializes the platform that your application runs in, then uses the plat-form to bootstrap your AppModule.”

Step 9. Define the page that host your app. create an index.js in root of your project.

<html> <head> <title>Angular 2 Demo By Shubham</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css">  <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>

 <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head>  <body> <my-app>Loading...</my-app> </body>

</html>

Step 10. Create a style.css in root of your project.

Step 11. Run your first demo app. $ npm start

anugula2setupbyshubham

Documents