目录结构：
angular-quickstart
|_ ts
|_ app.ts
|_ index.ts
|_ index.html
|_ package.json
|_ tsconfig.json
|_ webpack.config.js
1. angular-quickstart/package.json
{ "name": "angular-quickstart", "version": "1.0.0", "description": "I will show you how to set up angular2 development angular-quickstart", "keywords": [ "angular2", "angular-quickstart" ], "scripts": { "start": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --watch --content-base", "build": "webpack --progress --colors", "dev": "webpack-dev-server" }, "author": "Lin.keqing", "license": "MIT", "dependencies": { "@angular/common": "^2.4.5", "@angular/compiler": "^2.4.5", "@angular/core": "^2.4.5", "@angular/platform-browser": "^2.4.5", "@angular/platform-browser-dynamic": "^2.4.5", "@angular/forms": "^2.4.5", "core-js": "^2.4.1", "rxjs": "5.0.3", "zone.js": "^0.7.6" }, "devDependencies": { "@types/core-js": "^0.9.35", "ts-loader": "^2.0.0", "typescript": "^2.1.5", "webpack": "^2.2.0", "webpack-dev-server": "^2.2.0" } }
2. angular-quickstart/tsconfig.json
{ "compilerOptions": { "module": "commonjs", "target": "es5", "moduleResolution": "node", "noImplicitAny": true, "removeComments": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true, "declaration": false }, "buildOnSave": false, "compileOnSave": false, "exclude": [ "node_modules" ] }
3. angular-quickstart/webpack.config.js
const {resolve} = require('path');
module.exports = {
entry: {
index: './ts/index.ts'
},
output: {
path: resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
exprContextCritical: false,
rules: [
{
test: /.ts$/,
use: ['ts-loader']
}
]
},
resolve: {
extensions: [
'.js',
'.ts'
]
}
};
运行npm install
4. angular-quickstart/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>environment</title> </head> <body> <!--这里引用我们的第一个component--> <my-app></my-app> <!--加载使用webpack编译后的bundle--> <script type="text/javascript" src="/dist/bundle.js"></script> </body> </html>
5. angular-quickstart/ts/app.ts
import {Component} from '@angular/core';
//声明第一个Component
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 AppApple</h1>'
})
export class AppComponent { }
6. angular-quickstart/ts/index.ts
//不显示引入，你会得到"Uncaught reflect-metadata shim is required when using class decorators"的错误 import 'core-js/es6'; import 'core-js/es7/reflect'; import 'zone.js/dist/zone'; //引入NgModule装饰器 import { NgModule } from '@angular/core'; //引入浏览器模块 import { BrowserModule } from '@angular/platform-browser'; //引入启动器 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; //引入我们刚才创建的第一个component import { AppComponent } from './app'; //声明一个应用模块 @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) class AppModule { } //启动应用 platformBrowserDynamic().bootstrapModule(AppModule);
运行 npm start
完。
一个下下来就可以用的环境：
https://github.com/angular/quickstart
配套的学习地址：
http://angular2.axuer.com/docs/ts/latest/guide/learning-angular.html