使用Gulp的Angular 2的捆绑代码中未捕获的Typeerror

Question

首先 - 谢谢你的帮助！我已经使用Angular 2构建了一个Web应用程序，并且正处于生产中的最终启动过程中，但是在与Gulp捆绑时出现了错误。关于我遇到的具体Typeerror似乎有很多文档，但我所看到的并没有真正符合我在这个过程中的用例和位置。

具体来说，实际的捆绑过程本身在运行以下命令时不会返回错误：

sudo gulp

但是，在验证代码是否可以在我的localhost上运行时，会返回以下错误：

Uncaught TypeError: Cannot read property 'prototype' of undefined

并且引用此错误的文件是app.min.js，这是我完全捆绑的代码的输出文件。

在进一步调试问题之后，从我所知道的情况来看，模块的评估方式可能存在一些脱节，但我似乎无法轻视问题的根本原因，或解决问题的方法。在那里，我可以使用社区的帮助 - 找出解决问题的原因＆＃39;原型＆＃39;无法阅读。

gulpfile.js：

const gulp = require('gulp');
const del = require('del');
const cleanCSS = require('gulp-clean-css');
const concat = require('gulp-concat');
const liveServer = require('gulp-live-server');
const plumber = require('gulp-plumber');
const runSequence = require('run-sequence');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const sysBuilder = require('systemjs-builder');
const tslint = require('gulp-tslint');
const tsc = require('gulp-typescript');
const uglify = require('gulp-uglify');
const tsconfig = require('tsconfig-glob');

const tscConfig = require('./tsconfig.json')

// Development

gulp.task("devmin", function () {
    return gulp.src([
        'wwwroot/js/jquery.js',
        'node_modules/core-js/client/shim.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'wwwroot/js/toastr.js',
        'wwwroot/js/moment.js',
        'wwwroot/js/typescript.js',
    ])
    .pipe(concat('site.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('wwwroot/js'));
});

// Clean the distribution directory

gulp.task('clean:dist', function() {
    return del('wwwroot/dist/*');
 });

// Clean the JavaScript distribution directory

gulp.task('clean:dist:js', function() {
    return del('wwwroot/dist/js/*');
 });

// Clean the CSS Distribution directory

gulp.task('clean:dist:css', function() {
    return del('wwwroot/dist/css/*');
 });

 // Clean library directory

gulp.task('clean:lib', function () {
  return del('wwwroot/lib/**/*');
 });

// Compile TypeScript to JS 

gulp.task('compile:ts', function () {
  return gulp
    .src(tscConfig.filesGlob)
    .pipe(plumber({
      errorHandler: function (err) {
        console.error('>>> [tsc] Typescript compilation failed'.bold.green);
        this.emit('end');
      }}))
    .pipe(sourcemaps.init())
    .pipe(tsc(tscConfig.compilerOptions))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('wwwroot/dist/app'));
});

// Generate SystemJS-based builds

gulp.task('bundle:js', function() {
  var builder = new sysBuilder('wwwroot', 'wwwroot/systemjs.config.js');
      console.log("-----------------------------Start");
  return builder.buildStatic('app', 'wwwroot/dist/js/app.min.js')
    .then(function () {
      console.log("-----------------------------Deleting");
      return del(['wwwroot/dist/js/**/*', '!wwwroot/dist/js/app.min.js']);
    })
    .catch(function(err) {
      console.error('>>> [systemjs-builder] Bundling failed'.bold.green, err);
    });
});

// Minify JS bundle

gulp.task('minify:js', function() {
  return gulp
    .src('wwwroot/dist/js/app.min.js')
    .pipe(uglify())
    .pipe(gulp.dest('wwwroot/dist/js'));
});

gulp.task('compile:sass', function() {
    // concat and minify global scss files
    gulp
        .src('wwwroot/css/global/*.scss')
        .pipe(plumber({
            errorHandler: function (err) {
                console.error('>>> [sass] Sass global style compilation failed'.bold.green);
                this.emit('end');
            }}))
        .pipe(sourcemaps.init())
        .pipe(sass({ errLogToConsole: true }))
        .pipe(concat('styles.min.css'))
        // .pipe(cleanCSS())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('wwwroot/dist/css/global'));

    // minify component specific scss files

    gulp
        .src('wwwroot/css/*.scss')
        .pipe(plumber({
            errorHandler: function (err) {
                console.error('>>> [sass] Sass component style compilation failed'.bold.green);
                this.emit('end');
            }}))
        .pipe(sourcemaps.init())
        .pipe(sass({ errLogToConsole: true }))
        // .pipe(cleanCSS())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('wwwroot/dist/css/component'));
});

// Concat and minify CSS

gulp.task('minify:css', function() {
    // concat and minify global css files
  gulp
    .src('wwwroot/css/*.css')
    .pipe(concat('styles.min.css'))
    .pipe(cleanCSS())
    .pipe(gulp.dest('wwwroot/dist/css'));

        // minify component css files

  gulp
    .src('wwwroot/css/component/*.css')
    .pipe(cleanCSS())
    .pipe(gulp.dest('wwwroot/dist/css/component'));
});

// Copy dependencies

gulp.task('copy:libs', function() {
    gulp.src([
        'node_modules/rxjs/**/*'
    ])
    .pipe(gulp.dest('wwwroot/lib/js/rxjs'));

    gulp.src([
        './node_modules/reflect-metadata/Reflect.js',
        './node_modules/zone.js/dist/zone.js',
        './node_modules/core-js/client/shim.js',
        '.node_modules/systemjs/dist/system.src.js',
        './node_modules/bootstrap/dist/js/bootstrap.js',
        './node_modules/jquery/dist/jquery.js',
        './node_modules/moment/moment.js',
        './node_modules/es6-promise/dist/es6-promise.js',
        './node_modules/typescript/lib/typescript.js',
        './node_modules/systemjs/dist/system.src.js',
        './node_modules/toastr/package/toastr.js'
    ])
    .pipe(gulp.dest('wwwroot/lib/js'));

    gulp.src([
        './node_modules/jquery/dist/jquery.min.js',
        './node_modules/bootstrap/dist/js/bootstrap.min.js',
        './node_modules/es6-promise/dist/es6-promise.min.js',
        './node_modules/toastr/toastr.js',
        './node_modules/moment/min/moment.min.js',
        './node_modules/angular-in-memory-web-api/dist/index.js',
        './wwwroot/systemjs.config.js'
    ])

    .pipe(concat('vendors.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('wwwroot/lib/js'));

      // copy source maps
    gulp.src([
        './node_modules/es6-shim/es6-shim.map',
        './node_modules/reflect-metadata/Reflect.js.map',
        './node_modules/systemjs/dist/system-polyfills.js.map'
    ]).pipe(gulp.dest('wwwroot/lib/js'));

    gulp.src([
        '.node_modules/bootstrap/dist/css/bootstrap.*',
        './node_modules/bootstrap-toggle/css/bootstrap-toggle.css',
        './node_modules/bootstrap/dist/css/bootstrap-theme.css',
        './node_modules/bootstrap/dist/css/bootstrap-theme.css.map',
        './node_modules/bootstrap-social/bootstrap-social.css',
        './node_modules/font-awesome/css/font-awesome.css.map',
        './node_modules/font-awesome/css/font-awesome.css',
        './node_modules/glyphicons-halflings/css/glyphicons-halflings.css.map',
        './node_modules/glyphicons-halflings/css/glyphicons-halflings.css',
        './node_modules/toastr/package/toastr.css',
        './node_modules/toastr/package/toastr.css',
    ]).pipe(gulp.dest('wwwroot/lib/css'));


    gulp.src([
        "./node_modules/font-awesome/fonts/FontAwesome.otf",
        "./node_modules/font-awesome/fonts/fontawesome-webfont.eot",
        "./node_modules/font-awesome/fonts/fontawesome-webfont.svg",
        "./node_modules/font-awesome/fonts/fontawesome-webfont.ttf",
        "./node_modules/font-awesome/fonts/fontawesome-webfont.woff",
        "./node_modules/font-awesome/fonts/fontawesome-webfont.woff2",
        "./node_modules/bootstrap/fonts/glyphicons-halflings-regular.eot",
        "./node_modules/bootstrap/fonts/glyphicons-halflings-regular.svg",
        "./node_modules/bootstrap/fonts/glyphicons-halflings-regular.ttf",
        "./node_modules/bootstrap/fonts/glyphicons-halflings-regular.woff",
        "./node_modules/bootstrap/fonts/glyphicons-halflings-regular.woff2"
    ]).pipe(gulp.dest('wwwroot/dist/fonts'));

    gulp.src(['./node_modules/angular-in-memory-web-api/**/*']).pipe(gulp.dest('wwwroot/lib/js/angular-in-memory-web-api'));

    // handle all angular

    return gulp.src(['node_modules/@angular/**/*'])
        .pipe(gulp.dest('wwwroot/lib/js/@angular'));
});

// Copy static assets

gulp.task('copy:assets', function() {
    return gulp.src(
        [
            '*.json',
            '*.html',
            '*.css',
            '!*.ts',
            '!*.scss'
        ],
            { base: '' })
            .pipe(gulp.dest('wwwroot/dist'))
});

// Update the tsconfig files based on the glob pattern

gulp.task('tsconfig-glob', function() {
    return tsconfig({
        configPath: '.',
        indent: 2
    });
});

// Watch the source files for changes, then trigger recompilation

gulp.task('watch:src', function() {
    // gulp.watch('src/**/*.ts', ['scripts']);
    // gulp.watch('src/**/*.scss', ['styles']);
    gulp.watch('./**/*.ts', ['scripts']);
    gulp.watch('./**/*.scss', ['styles']);
});

gulp.task('test', ['compile:specs'], function() {
    // gulp.watch('src/**/*.ts', ['compile:specs']);
    gulp.watch('./**/*.ts', ['compile:specs']);
});

gulp.task('lint', ['lint:sass']);

// gulp.task('clean', ['clean:dist:js', 'clean:dist:css', 'clean:lib']);

gulp.task('copy', function(callback) {
//    runSequence('clean:lib', 'copy:libs', callback);
    runSequence('copy:libs', callback);
});

gulp.task('scripts', function(callback) {
    // runSequence(['clean:dist:js'], 'compile:ts', 'bundle:js', 'minify:js', callback);
    runSequence('compile:ts', 'bundle:js', 'minify:js', callback);
});

gulp.task('styles', function(callback) {
//    runSequence(['clean:dist:css'], ['compile:sass', 'minify:css'], callback);
    runSequence(['compile:sass', 'minify:css'], callback);
});

gulp.task('build', function(callback) {
    runSequence('copy', 'scripts', 'styles', callback);
});

gulp.task('buildnocopy', function(callback) {
    runSequence('scripts', 'styles', callback);
});

gulp.task('default', function(callback) {
    runSequence('build', callback);
});

systemjs.config.js：

// map tells the System loader where to look for things
var map = {
  'app': 'dist/app',
  'rxjs': 'lib/js/rxjs',
  '@angular': 'lib/js/@angular',
  'zone.js': 'lib/js/zone.js',
  'moment': 'lib/js/moment',
  'angular-in-memory-web-api': 'lib/js/angular-in-memory-web-api',
  'typescript': 'lib/js/typescript',
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
  'app': { main: 'main', defaultExtension: 'js' },
  'rxjs': { defaultExtension: 'js' },
  'zone.js': { main: 'zone', defaultExtension: 'js' },
  'symbol-observable': { main: 'index.js', defaultExtension: 'js' },
  'angular-localstorage': { defaultExtension: "js"},
  "angular-in-memory-web-api": { main: "index.js", defaultExtension: "js" },
  'moment': { defaultExtension: 'js' }
};

var packageNames = [
  '@angular/common',
  '@angular/compiler',
  '@angular/core',
  '@angular/forms',
  '@angular/http',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router',
  '@angular/testing',
  '@angular/upgrade',
];

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
  packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

System.config({    
  map: map,
  packages: packages
});

tsconfig.json：

{
  "compileOnSave": true,
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "module": "system",
    "moduleResolution": "node",
    "rootDir": "wwwroot",
    "outDir": "wwwroot/dist",
    "sourceMap": true,
    "target": "ES5",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "wwwroot/node_modules",
    "node_modules",
    "typings",
    "wwwroot/lib"   
  ],
  "filesGlob": [
    "wwwroot/app/**/**/*.ts",
    "typings/*.d.ts"
  ]
}

如果我需要提供更多文档，请告诉我。谢谢！

Answer 1

我知道Angular 2与gulp-uglify的缩小/丑化被打破了。

尝试删除uglify步骤，看看这是否有助于您的情况。