anugula2setupbyshubham
•Download as DOCX, PDF•
0 likes•177 views
This document outlines 11 steps to create an Angular 2 seed project from scratch: 1. Create a directory and install configuration files like package.json and tsconfig.json 2. Install npm packages 3. Create an app folder and module file (app.module.ts) 4. Create a component and add it to the module 5. Run the project
![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 requirements
package.json -> npm package dependencies
tsconfig.json -> typescript compiler generate javascript code.
typings.json
systemjs.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 ]
})](https://image.slidesharecdn.com/7ff84a37-a564-457c-ad22-a699ddeea3dc-160911120650/85/anugula2setupbyshubham-1-320.jpg)
![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-
dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
“This code initializes the platform that your application runs in, then uses the
platform to bootstrap your AppModule.”](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (11)
Similar to anugula2setupbyshubham
Similar to anugula2setupbyshubham (20)
anugula2setupbyshubham
- 1. 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 requirements package.json -> npm package dependencies tsconfig.json -> typescript compiler generate javascript code. typings.json systemjs.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 ] })
- 2. 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- dynamic'; import { AppModule } from './app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule); “This code initializes the platform that your application runs in, then uses the platform to bootstrap your AppModule.”
- 3. 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"> <!-- 1. Load libraries --> <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> Step 10. Create a style.css in root of your project. Step 11. Run your first demo app. $ npm start