Question

我已经阅读了this主题，并审核了很多其他但未找到解决方案。我正在尝试捆绑我的Angular 2应用程序并收到此错误，因为我认为问题出现在这里

someMutex

这是我的tsconfig.json

@Component({
    selector: 'affiliate',
    moduleId: module.id,
    styleUrls: ['affiliate.css'],
    templateUrl: './affiliate-index.html'
})

Gulpfile

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": false,
    "removeComments": false,
    "noImplicitAny": false
  }
}

和systemjs.config.js

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var typescript = require('gulp-typescript');
var systemjsBuilder = require('systemjs-builder');

// Compile TypeScript app to JS
gulp.task('compile:ts', function () {
    return gulp.src([
            "app/**/*.ts",
            "!app/main_dev.ts",
            "typings/*.d.ts"
        ])
        .pipe(sourcemaps.init())
        .pipe(typescript({
            "module": "system",
            "moduleResolution": "node",
            "outDir": "assets",
            "target": "ES5"
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('assets/ts'));
});

//Generate systemjs-based bundle (app/app.js)
gulp.task('bundle:app', ['compile:ts', 'copy:vendor', 'copy:rxjs'], function() {
    var builder = new systemjsBuilder('', './systemjs.config.js');
    return builder.buildStatic('app', 'assets/app.js', {minify: true});
});

// Copy and bundle dependencies into one file (vendor/vendors.js)
// systemjs.config.js can also bundled for convenience
gulp.task('bundle:vendor', function () {
    return gulp.src([
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system.src.js',
        'systemjs.config.js'
    ])
        .pipe(concat('vendors.js'))
        .pipe(gulp.dest('assets'));
});

//  Copy dependencies loaded through SystemJS into dir from node_modules
gulp.task('copy:vendor', function () {
    return gulp.src([
        'node_modules/@angular/**/*'
    ])
        .pipe(gulp.dest('assets/lib/@angular'));
});
gulp.task('copy:rxjs', function () {
    return gulp.src([
        'node_modules/rxjs/**/*'
    ])
        .pipe(gulp.dest('assets/lib/rxjs'));
});

// Bundle dependencies and app into one file (app.bundle.js)
gulp.task('bundle', ['compile:ts', 'bundle:vendor', 'copy:vendor', 'copy:rxjs', 'bundle:app'], function () {
    return gulp.src([
        'assets/vendors.js',
        'assets/app.js'
    ])
        .pipe(concat('app.bundle.js'))
        .pipe(gulp.dest('./assets'));
});

gulp.task('default', ['bundle']);

我的index.html文件

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'assets',
            // 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',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            // other libraries
            'rxjs':                      'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './ts/main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

请提出任何建议

Answer 1

gulp.task('compile:ts', function () {
    return gulp.src([
            "app/**/*.ts",
            "!app/main_dev.ts",
            "typings/*.d.ts"
        ])
        .pipe(sourcemaps.init())
        .pipe(typescript({
            "module": "system",
            "moduleResolution": "node",
            "outDir": "assets",
            "target": "ES5"
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('assets/ts'));
});

问题在于，您为gulp设置的模块是system，而不是commonjs。

module.id由commonjs提供，不能与系统模块一起使用。

在您的gulp文件上更改module commonjs，一切正常。

Angular 2：Uncaught TypeError：无法读取未定义的属性“id”

1 个答案: