目录结构：
projectName
|_ src
|_ app
|_ index.html
|_ main.ts
|_ systemjs.config.js
|_ gulpfile.js
|_ package.json
|_ tsconfig.json
gulpfile.js
var gulp = require('gulp'); // typescript编译插件 var ts = require('gulp-typescript'); var tsProject = ts.createProject('tsconfig.json'); // 生成js.map文件，便于调试 var sourcemaps = require('gulp-sourcemaps'); // web服务器插件 var browserSync = require('browser-sync').create(); var reload = browserSync.reload; var historyApiFallback = require('connect-history-api-fallback'); // 监控文件目录 var tsFiles = 'src/**/*.ts'; var staticFiles = ['src/**/*', '!' + tsFiles]; var npm = 'node_modules/'; var nodeModules = [npm + '@angular/**/bundles/**/*', npm + 'angular-in-memory-web-api/bundles/**/*', npm + 'rxjs/**/*', npm + 'core-js/client/**/*', npm + 'zone.js/dist/**/*', npm + 'systemjs/dist/**/*' , npm + 'systemjs-plugin-css/**/*', npm + 'jquery/dist/**/*', npm + 'bootstrap/dist/**/*', npm + 'font-awesome/**/*', npm + 'bootstrap-table/dist/**/*', npm + 'ng2-translate/bundles/*' , npm + 'bootbox/bootbox.min.js', npm + '@ng-bootstrap/**/*', npm + 'oeslib/**/*', npm + 'zenap-smart-Table/**/*' ]; // tsc任务，编译ts源代码，并输出到dist目录 gulp.task('tsc', function () { gulp.src(tsFiles).pipe(sourcemaps.init()).pipe(tsProject()) .pipe(sourcemaps.write('maps')).pipe(gulp.dest('dist')); }); // static任务，拷贝静态文件(除ts之外的html、css等文件)到dist目录 gulp.task('static', function () { gulp.src(staticFiles).pipe(gulp.dest('dist')); }); // modules任务，拷贝node_modules依赖插件文件到dist目录 gulp.task('modules', function () { gulp.src(nodeModules, { base: 'node_modules' }).pipe(gulp.dest('dist/plugin')); }); // watch任务，监视文件变更，重新输出到dist目录 gulp.task('watch-ts', ['tsc'], function (done) { browserSync.reload(); done(); }); gulp.task('watch-static', ['static'], function (done) { browserSync.reload(); done(); }); // 启动web服务器 gulp.task('server', ['tsc', 'static', 'modules'], function () { browserSync.init({ server: { baseDir: "dist", middleware: [historyApiFallback()] // 使用angular的html5模式(hash)路由，需要此配置 } }); gulp.watch(tsFiles, ['watch-ts']); gulp.watch(staticFiles, ['watch-static']); }); // default任务，命令行运行gulp的默认任务 gulp.task('default', ['server'], function () { });
package.json
{ "name": "angular-quickstart", "version": "1.0.0", "description": "QuickStart package.json from the documentation, supplemented with testing support", "scripts": { "start": "gulp" }, "keywords": [], "author": "", "license": "MIT", "dependencies": { "@angular/common": "~2.4.0", "@angular/compiler": "~2.4.0", "@angular/core": "~2.4.0", "@angular/forms": "~2.4.0", "@angular/http": "~2.4.0", "@angular/platform-browser": "~2.4.0", "@angular/platform-browser-dynamic": "~2.4.0", "@angular/router": "~3.4.0", "angular-in-memory-web-api": "~0.2.4", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "rxjs": "5.0.1", "systemjs": "0.19.40", "zone.js": "^0.7.4" }, "devDependencies": { "@types/jasmine": "2.5.36", "@types/node": "^6.0.46", "browser-sync": "^2.18.6", "gulp": "^3.9.1", "gulp-typescript": "^3.1.5", "typescript": "~2.0.10", "gulp-sourcemaps": "^2.4.1" }, "repository": {} }
src/index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Project1</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <script src="plugin/core-js/client/shim.min.js"></script> <script src="plugin/zone.js/dist/zone.js"></script> <script src="plugin/systemjs/dist/system.src.js"></script> <!--导入systemjs.config.js文件，重要--> <script src="systemjs.config.js"></script> <script> // 导入main.js，加载App.module.js文件，重要 System.import('app/main.js').catch(function(err){ console.error(err); }); </script> </head> <body> <app-root>Loading...</app-root> </body> </html>
src/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
src/systemjs.config.js
/** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'plugin/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' } } }); })(this);