Angular 2 开发环境搭建_angular missing semicolon怎样解决-CSDN博客

本文链接：https://blog.csdn.net/csr0312/article/details/50607182

目录结构如下

这里写图片描述

文件说明

gulp.config.js

module.exports = function() {
    var config = {
        allTs: './app/**/*.ts',
        tsOutputPath: './app/'  
    };

    return config;
}

gulpfile.js

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var tsc = require('gulp-typescript');
var tslint = require('gulp-tslint');
var tsProject = tsc.createProject('tsconfig.json');
var config = require('./gulp.config')();

// var browserSync = require('browser-sync');
var connect = require('gulp-connect');
var superstatic = require('superstatic');

gulp.task('ts-lint', function() {
    return gulp.src(config.allTs)
        .pipe(tslint())
        .pipe(tslint.report('prose', {
            emitError: false
        }));
})

gulp.task('compile-ts', function() {
    var sourceTsFiles = [
        config.allTs
    ];

    var tsResult = gulp
        .src(sourceTsFiles)
        .pipe(sourcemaps.init())
        .pipe(tsc(tsProject));

    return tsResult.js
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.tsOutputPath));
});

gulp.task('server',function(){
    connect.server({
        basename:[__dirname],
        port:3000,
        livereload:true
    });
});

gulp.task('reload',function(){
    gulp.src('./*.html')
    .pipe(connect.reload());
});

gulp.task('default', ['server'],function(){
    gulp.watch([config.allTs], ['ts-lint', 'compile-ts']);
    gulp.watch(['./app/*.map'],['reload']);
});

index.html

<html>
  <head>
    <base href="/">
    <title>Angular 2 - ToDo App</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script>
      System.config({
        defaultJSExtensions: true,
        map: {
          "angular2-jwt": "node_modules/angular2-jwt/angular2-jwt",
          "angular2": "node_modules/angular2",
          "rxjs": "node_modules/rxjs"
        }
      });
      System.import('app/boot').then(null, console.error.bind(console));
    </script>
  </head>
  <body>
    <hello-world>Loading...</hello-world>
  </body>
</html>

package.json

{
  "name": "asdad",
  "version": "0.0.1",
  "description": "asd",
  "main": "ad",
  "scripts": {
    "test": "ad"
  },
  "repository": {
    "type": "git",
    "url": "asd"
  },
  "keywords": [
    "aad"
  ],
  "author": "ada",
  "license": "MIT",
  "devDependencies": {
    "angular2": "2.0.0-beta.0",
    "angular2-jwt": "^0.1.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "gulp": "^3.9.0",
    "gulp-connect": "^2.3.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-tslint": "^4.3.1",
    "gulp-typescript": "^2.10.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "superstatic": "^4.0.1",
    "systemjs": "0.19.6",
    "zone.js": "0.5.10"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

tslint.json

{
  "rules": {
    "class-name": true,
    "curly": true,
    "eofline": false,
    "forin": true,
    "indent": [true, 4],
    "label-position": true,
    "label-undefined": true,
    "max-line-length": [true, 140],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-key": true,
    "no-duplicate-variable": true,
    "no-empty": true,
    "no-eval": true,
    "no-imports": true,
    "no-string-literal": false,
    "no-trailing-comma": true,
    "no-trailing-whitespace": true,
    "no-unused-variable": false,
    "no-unreachable": true,
    "no-use-before-declare": true,
    "one-line": [true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "quotemark": [true, "single"],
    "radix": true,
    "semicolon": true,
    "triple-equals": [true, "allow-null-check"],
    "variable-name": false,
    "whitespace": [true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator"
    ]
  }
}

执行

1、npm install
2、gulp