angular - 错误：TypeError：无法设置未定义 RXJS 的属性“bindCallback”-Angular 10 + Typescript + Gulp v4 + System js

Question

当我运行“npm start”时出现此错误 - “错误：TypeError：无法在 Object.eval 处设置未定义的属性‘bindCallback’（http://localhost:8000/lib/rxjs-compat/add/observable/bindCallback .js:4:32)"

systemjs.config.js

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'lib/'
        },
        // 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',
            'rxjs-compat': 'npm:rxjs-compat'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                main: 'Rx.js',
                defaultExtension: 'js'
            },
            "rxjs/operators": {
                main: 'index.js',
                defaultExtension: 'js'
            },
            "rxjs-compat": { defaultExtension: 'js', main: "index.js" },
            "rxjs/internal-compatibility": { "main": "index.js", "defaultExtension": "js" },
            "rxjs/testing": { "main": "index.js", "defaultExtension": "js" },
            'rxjs/ajax': { main: 'index.js', defaultExtension: 'js' },
            'rxjs/webSocket': { main: 'index.js', defaultExtension: 'js' }
        }
    });
})(this);

包.json

 {
  "name": "angular2-ts-gulp",
  "version": "1.0.0",
  "description": "Angular2 with TypeScript and Gulp QuickStart Template",
  "scripts": {
    "clean": "gulp clean",
    "compile": "gulp compile",
    "build": "gulp build",
    "start": "concurrent --kill-others \"gulp watch\" \"lite-server\""
  },
  "dependencies": {
    "@angular/animations": "10.0.14",
    "@angular/common": "10.0.14",
    "@angular/compiler": "10.0.14",
    "@angular/core": "10.0.14",
    "@angular/forms": "10.0.14",
    "@angular/platform-browser": "10.0.14",
    "@angular/platform-browser-dynamic": "10.0.14",
    "@angular/router": "10.0.14",
    "gulp-sass": "^4.0.0",
    "node-sass": "4.10.0",
    "prismjs": "1.6.0",
    "rcloader": "^0.2.2",
    "reflect-metadata": "~0.1.12",
    "rxjs": "6.6.2",
    "rxjs-compat": "^6.6.0",
    "screenfull": "3.3.1",
    "socket.io-client": "2.0.3",
    "systemjs": "0.19.27",
    "tslib": "2.0.1",
    "xlsx": "0.9.13",
    "zone.js": "0.11.1"
  },
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": ""
  },
  "deprecated": false,
  "devDependencies": {
    "@angular/compiler-cli": "10.0.14",
    "concurrently": "^2.2.0",
    "del": "^2.2.0",
    "gulp": "4.0.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-tslint": "8.1.4",
    "gulp-typescript": "5.0.1",
    "lite-server": "^2.2.2",
    "tslint": "6.1.3",
    "@types/node": "14.6.2",
    "typescript": "3.9.7"
  }
}

gulpfile.js

 "use strict";

const gulp = require("gulp");
const del = require("del");
const tsc = require("gulp-typescript");
const sourcemaps = require('gulp-sourcemaps');
const tsProject = tsc.createProject("tsconfig.json");
const tslint = require('gulp-tslint');
const sass = require('gulp-sass');

/**
 * Remove build directory.
 */
gulp.task('clean', (cb) => {
    return del(["build"], cb);
});

/**
 * Lint all custom TypeScript files.
 */
gulp.task('tslint', () => 
    gulp.src("src/**/*.ts")
        .pipe(tslint())
        //.pipe(tslint.report('prose'))
);

/**
 * Compile TypeScript sources and create sourcemaps in build directory.
 */
gulp.task("compile", gulp.series("tslint", () => {
    let tsResult = gulp.src("src/**/*.ts")
        .pipe(sourcemaps.init())
        .pipe(tsProject());
    return tsResult.js
        .pipe(sourcemaps.write(".", {sourceRoot: '/src'}))
        .pipe(gulp.dest("build"));
}));

/**
 * Compile your Sass files
 * sass({outputStyle: 'compressed'}) to compress the css
 * outputStyle
 * Type: String Default: nested Values: nested, expanded, compact, compressed
 */
gulp.task('sass', function () {
    return gulp.src('src/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest("build"));
});

/**
 * Copy all resources that are not TypeScript files into build directory.
 */
gulp.task("resources", () => {
    return gulp.src(["src/**/*", "!**/*.ts", "!**/*.scss","!src/app/sass","!src/app/sass/**"])
        .pipe(gulp.dest("build"));
});

/**
 * Copy all required libraries into build directory.
 */
gulp.task("libs", () => {
    return gulp.src([
            'core-js/client/shim.min.js',
            'systemjs/dist/system-polyfills.js',
            'systemjs/dist/system.src.js',
            'reflect-metadata/Reflect.js',
            'rxjs/**',  
            'rxjs-compat/**',         
            'zone.js/dist/**',
            '@angular/**'
        ], {cwd: "node_modules/**"}) /* Glob required here. */
        .pipe(gulp.dest("build/lib"));
});

/**
 * Watch for changes in TypeScript, HTML and CSS files.
 */
gulp.task('watch', function () {
    gulp.watch(["src/**/*.ts"], gulp.series('compile')).on('change', function (e) {
        console.log('TypeScript file ' + e.path + ' has been changed. Compiling.');
    });
    gulp.watch(["src/**/*.html", "src/**/*.scss"],gulp.series('sass','resources')).on('change', function (e) {
        console.log('Resource file ' + e.path + ' has been changed. Updating.');
    });
});

/**
 * Build the project.
 */
gulp.task("build", gulp.series('compile','sass', 'resources', 'libs',async () => {
    console.log("Building the project ...");
}));

我正在使用 Rxjs 版本 6+ 和 gulp v4。提前致谢

标签： angulartypescriptrxjsgulpsystemjs