As you are new to TypeScript. I still suggest you to follow angular.io docs for 5 min startup. That has specific instruction and quite well explained to get started with it.
Angular2 5 min quickstart page @ angular.io.
What you need to have basically to start:
- Node.js with npm package manager.
- Typescript with compiler.
- A text editor or any IDE, VS Code.
- Any browser, like Chrome.
Install node js and it also installs npm (node package manager). Now from here you need to follow these steps to get started:
- Create a root folder name of your choice like ng2Playground.
- Now you have to create one more folder inside it which actually holds all the
.ts files/ Component files, You can name it app name is just as per docs.
- Now at the root level you have to put 4 files.
3.1. tsconfig.json
3.2 typings.json
3.3 package.json
3.4 index.html
- When you set it up, as we are not finished yet but you can
npm start when we done loading all the dependencies, run this command to start the compilation and watch the application, while you develop other components.
Now what should be there in these files as per point 3.
3.1 : tsconfig.json:
{
"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"
]
}
3.2 : typings.json
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}
}
3.3 : package.json
{
"name": "ng2-test",
"version": "1.0.0",
"scripts": {
"start": "concurrent \"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"
}
}
Going very well, congratulations! Yet we need the most important file index.html.
3.4 : index.html
<!doctype html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Okay!
We have our basic setup quite well, yet we need to install all the dependencies and devdependencies, which is absolutely required. You need to run npm install. This will install all the dependency which we have in the package.json.
When package installation finishes you can find one folder named node_modules which is having all the files as per dependencies in the package.json.
If any error occurs while npm install you just need to update the dev/dependencies.
So, i am assuming you have all the dependencies installed and just let's start:
Now as per point 2, we have a folder named app now we will put our .ts files in it.
Create a file named app.component.ts, see the naming convention .component.ts which denotes that it is a component file. Put this code in it:
import {Component} from 'angular2/core'; // <-- importing Component from core
@Component({
selector: 'my-app', //<----the element defined in the index.html
template: '<h1>My First Angular 2 App</h1>' // <---this is the template to put in the component.
})
export class AppComponent { } // <--- we need to export the class AppComponent.
Now create another file named main.ts. Why main.ts? This is because of index.html, we have defined our Systemjs module loader, see this in index.html
System.import('app/main')
This the content of main.ts:
import {bootstrap} from 'angular2/platform/browser' // import bootstrap
import {AppComponent} from './app.component' // import the component we just created
bootstrap(AppComponent); // finally bootstrap it.
Now we are done.
Yay!!!
Yet we need to run it, for this we have to cd ng2Playgroud into it. we need to run this command from command prompt or if you have git bash installed run this:
npm start
and hit enter. Now it will compile and start the lite-server installed as a dependency. If everything goes well then you'll see the template My First Angular 2 App rendered in the browser.
tscis there any probelm withtsc?[tsc filename.ts --watch]Experimental supportmay be the problem with tsconfig.json. i have updated my answer withtsconfig.jsonfile check it.