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

i have read this topic , reviewed lot of others can't find solution. i'm trying bundle angular 2 application , getting error, suppose problem appears here

@component({     selector: 'affiliate',     moduleid: module.id,     styleurls: ['affiliate.css'],     templateurl: './affiliate-index.html' }) 

here 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 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 , bundle dependencies 1 file (vendor/vendors.js) // systemjs.config.js can bundled 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 dir 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 , app 1 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 alias             'npm:': 'node_modules/'         },         // map tells system loader things         map: {             // our app within 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 system loader how load when no filename and/or no extension         packages: {             app: {                 main: './ts/main.js',                 defaultextension: 'js'             },             rxjs: {                 defaultextension: 'js'             }         }     }); })(this); 

and 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

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 problem, module set gulp system, not commonjs.

module.id provided commonjs, , can't work system module.

change module commonjs on gulp file , should ok.