Angular 2: Uncaught TypeError: Cannot read property 'id' of undefined

Question

I have already read this topic and reviewed a lot of others but can't find solution. I'm trying to bundle my Angular 2 application and getting this error, as I suppose the problem appears here

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

Here is my tsconfig.json

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

Gulpfile

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']);

And systemjs.config.js

(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);

And my index.html file

<html>
<head>
    <title>My site</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

    <my-app>Loading...</my-app>

<script src="/laravel/front/assets/app.bundle.js"></script>
</body>
</html>

Any suggestions, please

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'));
});

Here is the problem, your module set for gulp is system, not commonjs.

module.id is provided by commonjs, and can't work with system module.

change module for commonjs on your gulp file and everything should be ok.