未捕获（承诺）错误：意外的令牌<更新打字稿类型定义

Question

I am using angularjs with typescript in conjunction with gulp task utility. I have just updated typescript from version 2.0.3 to latest version 2.9.2. I have also changed typescript type definitions in tsconfig.json file.

Previous tsconfig.json:

{
 "compilerOptions": {
 "noImplicitAny": false,
 "noEmitOnError": false,
 "removeComments": true,
 "preserveConstEnums": true,
 "sourceMap": false,
 "inlineSourceMap": true,
 "inlineSources": true,
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "strictNullChecks": false, // to check periodically
 "noUnusedLocals": false, // to check periodically
 "noUnusedParameters": false, // to check periodically
 "target": "es5",
 "module": "system",
 "moduleResolution": "node"    
},
 "compileOnSave": true,
 "exclude": [
  "node_modules",
  "bower_components",
  "Scripts/typings/lodash/lodash-3.10.d.ts"
 ]
}

Current tsconfig.json:

{
 "compilerOptions": {
 "noImplicitAny": false,
 "noEmitOnError": false,
 "removeComments": true,
 "preserveConstEnums": true,
 "sourceMap": false,
 "inlineSourceMap": true,
 "inlineSources": true,
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "strictNullChecks": false, // to check periodically
 "noUnusedLocals": false, // to check periodically
 "noUnusedParameters": false, // to check periodically
 "target": "es5",
 "module": "system",
 "moduleResolution": "node",
 "typeRoots": [ "node_modules/@types" ],
 "types": [ "angular", "node", "angular-growl-v2", "angular-local-storage", "angular-scroll", "ng-dialog", "ng-flow", "lodash", "jasmine", "chance", "jquery", "angular-mocks", "modernizr" ],
 "lib":  [ "dom", "es6" ]
},
"compileOnSave": true,
 "exclude": [
  "node_modules",
  "bower_components",
  "Scripts/UnitTests",
  "Scripts/typings/lodash/lodash-3.10.d.ts"
 ]
}

Previous package.json:

{
 "version": "1.0.0",
 "name": "gtp.clientportalwebsite",
 "private": true,
 "dependencies": {
   "@flow.js/ng-flow": "git+https://github.com/flowjs/ng-flow.git#a761386",
   "angular": "1.5.8",
   "angular-animate": "1.5.8",
   "angular-bootstrap-calendar": "0.28.0",
   "angular-bootstrap-multiselect": "1.1.2",
   "angular-growl-v2": "0.7.5",
   "angular-i18n": "1.5.8",
   "angular-local-storage": "0.5.0",
   "angular-messages": "1.5.8",
   "angular-mocks": "1.5.8",
   "angular-recursion": "^1.0.5",
   "angular-sanitize": "1.5.8",
   "angular-scroll": "1.0.0",
   "angular-ui-bootstrap": "2.2.0",
   "angular-ui-mask": "1.8.7",
   "angular-ui-tree": "^2.22.6",
   "animate.css": "3.5.2",
"bootstrap": "3.3.7",
"chance": "1.0.4",
"compass-importer": "*",
"del": "2.2.x",
"fast-levenshtein": "2.0.5",
"file-saver": "1.3.3",
"font-awesome": "4.7.0",
"gulp": "3.9.x",
"gulp-buddy.js": "*",
"gulp-clean-css": "2.0.x",
"gulp-concat": "2.6.x",
"gulp-imagemin": "3.0.x",
"gulp-inject": "4.1.x",
"gulp-modernizr": "1.0.0-alpha",
"gulp-rename": "1.2.2",
"gulp-sass": "3.1.0",
"gulp-sourcemaps": "2.2.x",
"gulp-tslint": "7.0.1",
"gulp-typescript": "3.0.x",
"gulp-uglify": "2.0.x",
"gulp-util": "3.0.x",
"jasmine-core": "2.5.x",
"karma": "^2.0.0",
"karma-chrome-launcher": "2.0.x",
"karma-cli": "1.0.x",
"karma-coverage": "1.1.x",
"karma-firefox-launcher": "1.0.x",
"karma-ie-launcher": "1.0.0",
"karma-jasmine": "1.0.x",
"karma-jasmine-html-reporter": "0.2.x",
"karma-sourcemap-loader": "*",
"karma-typescript": "3.0.12",
"lodash": "4.17.1",
"modernizr": "3.3.1",
"moment": "2.16.0",
"ng-dialog": "0.6.4",
"ng-select-all-on-focus": "1.0.3",
"node-sass": "^4.9.0",
"path": "0.12.x",
"pump": "1.0.1",
"scriptjs": "2.5.8",
"systemjs": "0.19.41",
"systemjs-builder": "0.15.x",
"tslint": "4.0.2",
"tslint-microsoft-contrib": "4.0.0",
"tslint-teamcity-reporter": "1.0.x",
"typescript": "2.0.3",
"ui-select": "0.19.6",
"v-button": "1.2.1",
"yargs": "*"
 },
  "devDependencies": {
    "karma-remap-coverage": "^0.1.5",
    "karma-remap-istanbul": "^0.6.0",
    "karma-typescript": "3.0.12"
  }
}

Current package.json:

{
   "version": "1.0.0",
   "name": "gtp.clientportalwebsite",
   "private": true,
   "dependencies": {
      "@flow.js/ng-flow": "git+https://github.com/flowjs/ng- 
     flow.git#a761386",
     "@types/angular": "^1.6.48",
"@types/angular-growl-v2": "^0.7.1",
"@types/angular-local-storage": "^0.6.1",
"@types/angular-mocks": "^1.6.1",
"@types/angular-scroll": "0.0.31",
"@types/chance": "^1.0.1",
"@types/jasmine": "^2.8.8",
"@types/jquery": "^3.3.4",
"@types/lodash": "^4.14.110",
"@types/modernizr": "^3.5.2",
"@types/ng-dialog": "^0.6.2",
"@types/ng-flow": "0.0.30",
"@types/node": "^10.5.1",
"angular": "^1.7.2",
"angular-animate": "^1.7.2",
"angular-bootstrap-calendar": "0.28.0",
"angular-bootstrap-multiselect": "1.1.2",
"angular-growl-v2": "^0.7.5",
"angular-i18n": "^1.7.2",
"angular-local-storage": "^0.5.2",
"angular-messages": "^1.7.2",
"angular-mocks": "^1.7.2",
"angular-recursion": "^1.0.5",
"angular-sanitize": "^1.7.2",
"angular-scroll": "^1.0.2",
"angular-ui-bootstrap": "^2.5.6",
"angular-ui-mask": "1.8.7",
"angular-ui-tree": "^2.22.6",
"animate.css": "^3.6.1",
"babel-preset-env": "^1.7.0",
"bootstrap": "^3.3.7",
"chance": "^1.0.16",
"compass-importer": "*",
"del": "2.2.x",
"fast-levenshtein": "2.0.5",
"file-saver": "1.3.3",
"font-awesome": "4.7.0",
"gulp": "^3.9.1",
"gulp-buddy.js": "^1.0.0",
"gulp-clean-css": "^3.9.4",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "3.0.x",
"gulp-inject": "^4.3.2",
"gulp-modernizr": "^3.0.0",
"gulp-rename": "^1.3.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-tslint": "7.0.1",
"gulp-typescript": "^4.0.2",
"gulp-uglify": "^3.0.0",
"gulp-util": "3.0.x",
"jasmine-core": "2.5.x",
"karma": "^2.0.0",
"karma-chrome-launcher": "2.0.x",
"karma-cli": "1.0.x",
"karma-coverage": "1.1.x",
"karma-firefox-launcher": "1.0.x",
"karma-ie-launcher": "1.0.0",
"karma-jasmine": "1.0.x",
"karma-jasmine-html-reporter": "0.2.x",
"karma-sourcemap-loader": "*",
"karma-typescript": "3.0.12",
"lodash": "^4.17.10",
"modernizr": "^3.6.0",
"moment": "^2.22.2",
"ng-dialog": "^1.4.0",
"ng-select-all-on-focus": "1.0.3",
"node-sass": "^4.9.0",
"path": "0.12.x",
"pump": "1.0.1",
"scriptjs": "2.5.8",
"systemjs": "^0.21.4",
"systemjs-builder": "^0.16.13",
"tslint": "4.0.2",
"tslint-microsoft-contrib": "4.0.0",
"tslint-teamcity-reporter": "1.0.x",
"typescript": "^2.9.2",
"ui-select": "0.19.6",
"v-button": "1.2.1",
"yargs": "*"
},
  "devDependencies": {
     "karma-remap-coverage": "^0.1.5",
     "karma-remap-istanbul": "^0.6.0"
  }
 }

gulpfile.js:

// include plug-ins
var gulp = require("gulp");
var concat = require("gulp-concat");
var del = require("del"); // rm -rf
var minifyCSS = require("gulp-clean-css");
var gutil = require("gulp-util");
var imagemin = require("gulp-imagemin");
var sourcemaps = require("gulp-sourcemaps");
var sass = require("gulp-sass");
var compass = require("compass-importer");
var path = require("path");
var karma = require("karma");
var karmaParseConfig = require("karma/lib/config").parseConfig;
var ts = require("gulp-typescript");
var tslint = require("gulp-tslint");
var inject = require("gulp-inject");
var uglify = require("gulp-uglify");
var Builder = require("systemjs-builder");
var argv = require("yargs").argv;
var pump = require("pump");
var modernizr2 = require("gulp-modernizr");
var modernizr = require("modernizr");
var fs = require('fs');
var rename = require('gulp-rename');
var buddyjs = require('gulp-buddy.js');

var config = {
  baseDir: "./dist",    

 vendor: [
    "./node_modules/angular/angular.js",
    "./node_modules/angular-animate/angular-animate.js",
    "./node_modules/angular-messages/angular-messages.js",
    "./node_modules/angular-sanitize/angular-sanitize.js",
    "./node_modules/angular-scroll/angular-scroll.js",
    "./node_modules/angular-local-storage/dist/angular-local-storage.js",
    "./node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js",
    "./node_modules/moment/min/moment-with-locales.js",
    "./node_modules/angular-growl-v2/build/angular-growl.js",
    "./node_modules/lodash/lodash.js",
    "./node_modules/ng-dialog/js/ngDialog.js",
    "./node_modules/ui-select/dist/select.js",
    "./node_modules/v-button/dist/v-button.js",
    "./node_modules/fast-levenshtein/levenshtein.js",
    "./node_modules/modernizr/modernizr-build.js",
    "./node_modules/systemjs/dist/system.js",
    "./node_modules/systemjs/dist/system-polyfills.js",
    "./node_modules/@flow.js/ng-flow/dist/ng-flow-standalone.js",
    "./node_modules/angular-ui-mask/dist/mask.js",
    "./node_modules/ng-select-all-on-focus/src/rb-select-all-on-focus.js",
    "./node_modules/angular-bootstrap-multiselect/dist/angular-bootstrap-multiselect.js",
    "./node_modules/file-saver/FileSaver.js",
    "./node_modules/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.js",
    "./node_modules/angular-ui-tree/dist/angular-ui-tree.js",
    "./node_modules/angular-recursion/angular-recursion.js"
],

//Bootstrap CSS and Fonts
vendorCss: [
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "./node_modules/ng-dialog/css/ngDialog.min.css",
    "./node_modules/angular-growl-v2/build/angular-growl.min.css",
    "./node_modules/font-awesome/css/font-awesome.min.css",
    "./node_modules/ui-select/dist/select.min.css",
    "./node_modules/v-button/dist/v-button.min.css",
    "./node_modules/animate.css/animate.min.css",
    "./node_modules/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css",
    "./node_modules/angular-ui-tree/dist/angular-ui-tree.min.css"
],
fonts: ["./node_modules/bootstrap/dist/fonts/*.*",
    "./node_modules/font-awesome/fonts/*.*"],

images: [
    "./Content/Images/**/*.*",
    "./Content/Images/*.*"
],

appcss: "./Content/**/*.css",
fontsout: "./dist/fonts",
cssout: "./dist/css",
cssVendorOut: "./dist/css",
jsVendorOut: "./dist/js",
imagesOut: "./dist/images"
 }

var injectedFiles = [];
var buildNumber = argv.buildNumber || "";
var build = buildNumber ? buildNumber + "-" + new Date().getTime() : new 
   Date().getTime();

injectedFiles = [
    "./Scripts/Libs/ckEditor/ckeditor.js",
    "./dist/js/vendor_" + build + ".min.js", "./dist/js/main_" + build + ".min.js", "./dist/css/vendor_" + build + ".min.css",
    "./dist/css/app_" + build + ".min.css", "./Scripts/Libs/ui-bootstrap-tpls-2.2.0.min.js"
 ];

//Create non minified files
gulp.task("dev", ["fonts", "images", "app-css", "vendorjs:dev", "dev:inject"]);

gulp.task("clean", function () {
return del(["./dist"]);
});

 gulp.task("bootstrap", ["clean"], function () {
      return gulp.src(["./node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"])
           .pipe(uglify())
           .pipe(rename({ suffix: '.min' }))
           .pipe(gulp.dest("./node_modules/angular-ui-bootstrap/dist/"));
 });

 gulp.task('modernizr', ["clean"], function (done) {
    modernizr.build({
    "minify": true,
    "options": [
        "setClasses"
    ],
    "feature-detects": [
        "test/svg/smil"
    ]
},
    function (code) {
        fs.writeFile('./node_modules/modernizr/modernizr-build.js', code, done);
      });
 });

  gulp.task("vendorjs", ["clean", "bootstrap", "modernizr"], function () {
       return gulp.src(config.vendorMin)
         .pipe(concat("vendor_" + build + ".min.js"))
         .pipe(gulp.dest(config.jsVendorOut));
  });

  gulp.task("vendorjs:dev", ["clean", "modernizr"], function () {
       return gulp.src(config.vendor)
           .pipe(concat("vendor.js"))
           .pipe(gulp.dest(config.jsVendorOut));
   });

   gulp.task("vendor-css", ["clean"], function () {
        return gulp.src(config.vendorCss)
           .pipe(concat("vendor.css"))
           .pipe(gulp.dest(config.cssout))
           .pipe(minifyCSS())
           .pipe(concat("vendor_" + build + ".min.css"))
           .pipe(gulp.dest(config.cssout));
   });

   gulp.task("app-css", ["sass", "vendor-css"], function () {
        return gulp.src([config.appcss])
           .pipe(concat("app.css"))
           .pipe(gulp.dest(config.cssout))
           .pipe(minifyCSS())
           .pipe(concat("app_" + build + ".min.css"))
           .pipe(gulp.dest(config.cssout));
   });

   gulp.task("fonts", ["clean"], function () {
         return gulp.src(config.fonts)
             .pipe(gulp.dest(config.fontsout));
   });

   gulp.task("images", ["clean"], function () {
         return gulp.src(config.images)
              .pipe(gulp.dest(config.imagesOut));
   });

   gulp.task("sass", ["clean"], function () {
         return gulp.src(["Content/Styles/*.scss", 
      "./Scripts/Components/NlgFiltering/NlgFiltering.scss"])
  .pipe(sass({ importer: compass }).on("error", function (e) { console.log(e) 
    }))
       .pipe(gulp.dest("Content/Styles"));
  });

   gulp.task("sass:dev", function () {
        return gulp.src(["Content/Styles/*.scss", 
        "./Scripts/Components/NlgFiltering/NlgFiltering.scss"])
          .pipe(sass({ importer: compass }).on("error", function(e) { 
     console.log(e) }))
            .pipe(concat("app.css"))
            .pipe(gulp.dest(config.cssout));
    });

    gulp.task("sass:watch", function () {
           gulp.watch(["Content/Styles/*.scss", 
           "./Scripts/Components/NlgFiltering/NlgFiltering.scss"], ["sass:dev"]);
    });

    gulp.task("fonts", ["clean"], function () {
          return gulp.src(config.fonts)
             .pipe(gulp.dest(config.fontsout));
    });

    gulp.task("images", ["clean"], function () {
          return gulp.src(config.images)
              .pipe(gulp.dest(config.imagesOut));
    });

    gulp.task("images-min", ["clean"], function () {
          return gulp.src(config.images)
             .pipe(imagemin({ optimizationLevel: 3, progressive: true, 
              interlaced: true }))
           .pipe(gulp.dest(config.imagesOut));
    });

    gulp.task("ts", ["clean"], function () {
         var tsProject = ts.createProject("tsconfig.json");
         var tsResult = tsProject.src()
               .pipe(sourcemaps.init()) // This means sourcemaps will be 
                generated 
               .pipe(tsProject())
               .on("error", function (error) {
                   var log = gutil.log, colors = gutil.colors;
                   log("Typescript compilation exited with " + 
              colors.red(error));
               process.exit(1);
    });

    return tsResult.js
         .pipe(sourcemaps.write())
         .pipe(gulp.dest("./Scripts"));
    });

    gulp.task("tslint", ["ts"], function () {
      return gulp.src([
            "./Scripts/Controllers/**/*.ts",
            //"./Scripts/Directives/**/*.ts",
            "./Scripts/Filters/**/*.ts",
            "./Scripts/Components/**/*.ts",
            "./Scripts/Models/**/*.ts",
            "./Scripts/Services/**/*.ts",
            "./Scripts/Repositories/**/*.ts",
            "./Scripts/app.ts"
       ])
            .pipe(tslint({
                  formatter: "tslint-teamcity-reporter"
            }))
            .pipe(tslint.report());
      });

     gulp.task('magicNumbers', function () {
           return gulp.src([
                "./Scripts/Controllers/**/*.ts",
                "./Scripts/Filters/**/*.ts",
                "./Scripts/Components/**/*.ts",
                "./Scripts/Models/**/*.ts",
                "./Scripts/Services/**/*.ts",
                "./Scripts/Repositories/**/*.ts",
                "./Scripts/app.ts"
      ])
            .pipe(buddyjs({
               disableIgnore: true,
               reporter: 'detailed'
            }));
     });

    gulp.task("dev:inject", ["ts", "vendorjs:dev", "app-css"], function (done) {
return gulp.src(["./Views/Shared/_Layout.cshtml"])    
      .pipe(inject(gulp.src([
       "./dist/js/vendor.js",
       "./Scripts/Libs/ckEditor/ckeditor.js",
       "./Scripts/systemjs_initialization.js",
       "./dist/css/vendor.css",
       "./dist/css/app.css"], { read: false }),
       {
        addRootSlash: false,
        addPrefix: "~"
       }))
       .pipe(gulp.dest("./Views/Shared"));
   });

Systemjs initialization.js:

System.defaultJSExtensions = true;

System.config({    
    baseURL: "/sitedomain/Scripts"
});

// loads /app.js
System.import("app");

Running gulp dev task after updating to latest typescript version completes successfully, but when the site is loaded i get the following error:

Uncaught (in promise) Error: Unexpected token <. Am I missing something? Any help would be appreciated.

Answer 1

Apparently, I have managed to have my site app and running after running gulp dev task. Below is the systemjs_initialization.js file which it has been changed to:

System.defaultJSExtensions = true;

System.config({    
baseURL: "/sitedomain/Scripts",    
packages: {        
    "/sitedomain/Scripts": {
        defaultExtension: "js"
    }
}
});

// loads /app.js
System.import("app");

I have added the 'packages' property inside SystemJS configuration which tells the SystemJS compiler how to load traspiled files when no filename and/or no extension provided.