我正在将带有typescript的angularjs与gulp任务实用程序结合使用。 我刚刚将打字稿从2.0.3版更新到了最新的2.9.2版。我还更改了tsconfig.json文件中的打字稿类型定义。
以前的tsconfig.json：
overallstatus1 = str(json_data.get('status'))
overallstatus2 = str(json_data.get('status', {}).get('code'))
当前的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"
]
}
先前的package.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"
]
}
当前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"
}
}
gulpfile.js：
{
"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"
}
}
Systemjs初始化.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"));
});
更新到最新的打字稿版本后，运行gulp dev任务已成功完成，但是在加载网站时出现以下错误：
未捕获（承诺）错误：意外令牌<。我想念什么吗？任何帮助将不胜感激。
答案 0 :(得分：0)
显然，运行gulp dev任务后，我设法使自己的站点应用程序运行。以下是已更改为的systemjs_initialization.js文件：
System.defaultJSExtensions = true;
System.config({
baseURL: "/sitedomain/Scripts",
packages: {
"/sitedomain/Scripts": {
defaultExtension: "js"
}
}
});
// loads /app.js
System.import("app");
我已经在SystemJS配置中添加了'packages'属性，该属性告诉SystemJS编译器在没有文件名和/或扩展名的情况下如何加载经过翻译的文件。