Angular 2：Uncaught TypeError：無法讀取undefined屬性'id'

Question

我已閱讀this主題，並回顧了很多其他人，但無法找到解決方案。我想我的包角2應用程序時遇到這個錯誤，因爲我想在這裏出現

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

的問題，這裏是我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']); 

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

我的index.html文件

<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> 

任何建議，請

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

這裏的問題是，你的模塊設定一飲而盡是system，不commonjs。

module.id由commonjs提供，並且不能與系統模塊一起使用。

更改module爲commonjs您的一g文件，一切都應該沒問題。