Following is the app and files structure:
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
Following code could be placed within package.json. Note that this is used to install node dependencies which would be used to load angular apps. Following dependencies are installed:
Following is the code sample for package.json.
{
"name": "ng2-apps",
"version": "1.0.0",
"scripts": {
"postinstall": "npm run typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"typings" : "typings"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.6",
"systemjs": "0.19.20",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.14"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^2.0.1",
"typescript": "^1.7.5",
"typings":"^0.6.8"
}
}
Following is the code sample for tsconfig.json. It consists of configuration which is used by TypeScript compiler, tsc, to compile ts files and generate js files. Details on tsconfig.json could be obtained from Typescript WIKI page.
{
"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"
]
}
Following is the code sample for typings.json. Javascript libraries such as JQuery, Angular etc add JS syntax and features which Typescript compiler does not understand. This is where typings utility is used. It uses typings.json configuration to install TypeScript definitions appropriately.
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}
}
Once the above three files (package.json, tsconfig.json, typings.json) are created within folder such as ng2-apps (hypthetical), execute the command “npm install” and you woudl get the Angular 2 dev environment ready. Next step is to create an Angular 2 component and an index.html, and execute the command, “npm start”.
Last updated: 3rd May, 2024 Have you ever wondered why some machine learning models perform…
Last updated: 2nd May, 2024 The success of machine learning models often depends on the…
When working on a machine learning project, one of the key challenges faced by data…
Last updated: 1st May, 2024 The bias-variance trade-off is a fundamental concept in machine learning…
Last updated: 1st May, 2024 As a data scientist, understanding the nuances of various cost…
Last updated: 1st May, 2024 In this post, you will learn the concepts related to…