Angular 2.2.0 deployment => require is not defined

我正在嘗試使用Gulp部署我的Angular 2.2.0解決方案。儘管這是我正在部署的第三個項目，但我仍然遇到了以下直到現在仍無法解決的問題。Angular 2.2.0 deployment => require is not defined

Uncaught ReferenceError: require is not defined at http://127.0.0.1/js/app.min.js:11:14

靶向那我的應用程序下面生成的代碼：

var core_1 = require('@angular/core');

這是唯一的錯誤消息。這裏是我的gulpfile.js

// Application dev 
    gulp.task('app-bundle-dev', function() { 
     var tsProject = ts.createProject('tsconfig.json'); 

     //var tsResult = gulp.src(['node_modules/typescript/lib/lib.es6.d.ts','app/**/*.ts']) 
     var tsResult = gulp.src(['app/**/*.ts']) 
     .pipe(tsProject()); 

     return tsResult.js 
     .pipe(addsrc.append('system.config.dev.js')) 
     .pipe(concat('app.min.js'))  
     .pipe(gulp.dest('dist/js')) 
    }); 

    // Deploy html templates 
    gulp.task('html-templates', function() { 
     return gulp.src("app/**/*.html") 
     .pipe(rename({dirname: ''})) 
     .pipe(gulp.dest('dist')); 
    }); 

    // hammerjs 
    gulp.task('hammerjs', function(){ 
     return gulp.src('node_modules/hammerjs/hammer.min.js') 
     .pipe(gulp.dest('dist/js')); 
    }); 


    // shim 
    gulp.task('shim', function(){ 
     return gulp.src([ 
      'node_modules/core-js/client/shim.min.js.map', 
      'node_modules/core-js/client/shim.min.js']) 
      .pipe(gulp.dest('./dist/js')); 
    }); 

    gulp.task('vendor-bundle', function() { 
     gulp.src([   
      'node_modules/zone.js/dist/zone.min.js', 
      'node_modules/reflect-metadata/Reflect.js', 
      'node_modules/systemjs/dist/system.src.js', 
      'node_modules/systemjs/dist/system-polyfills.js', 
      'node_modules/rxjs/bundles/Rx.min.js' 
      ]) 
      .pipe(concat('vendors.min.js')) 
      //.pipe(uglify()) 
      .pipe(gulp.dest('./dist/js')); 
    }); 

    // Favicon 
    gulp.task('favicon', function() { 
     return gulp.src('favicon.ico') 
      .pipe(gulp.dest('./dist')); 
    }); 

    // CSS 
    gulp.task('css', function() { 
     return gulp.src('./css/*.css') 
      .pipe(gulpif('*.css', cleanCss())) 
      .pipe(concat('min.css')) 
      .pipe(gulp.dest('./dist/css')); 
    }); 

    // Minify images 
    gulp.task('img', function() { 
     return gulp.src('images/**/*') 
      .pipe(imageMin()) 
      .pipe(gulp.dest('./dist/images')); 
    }); 

    // Angular scripts 
    gulp.task('angular-bundle', function() { 
     gulp.src([ 
      'node_modules/@angular/common/bundles/common.umd.min.js', 
      'node_modules/@angular/compiler/bundles/compiler.umd.min.js', 
      'node_modules/@angular/core/bundles/core.umd.min.js', 
      'node_modules/@angular/http/bundles/http.umd.min.js', 
      'node_modules/@angular/platform-browser/bundles/platform-browser.umd.min.js', 
      'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js', 
      'node_modules/@angular/router/bundles/router.umd.min.js', 
      'node_modules/@angular/forms/bundles/forms.umd.min.js', 
      'node_modules/@angular/upgrade/bundles/upgrade.umd.js', 
      'node_modules/@angular/upgrade/bundles/upgrade-static.umd.js' 
     ]) 
      //.pipe(uglify()) 
      .pipe(gulp.dest('./dist/js')); 
    }); 

    gulp.task('dev',['img','html-templates','hammerjs','vendor-bundle', 'angular-bundle', 'favicon', 'app-bundle-dev', 'shim', 'css'], function() { 
     gulp.src('index.html') 
      .pipe(htmlreplace({ 
       'es':'js/shim.min.js', 
       'css': 'css/min.css', 
       'vendor': 'js/vendors.min.js', 
       'app': 'js/app.min.js', 
       'hammerjs':'js/hammer.min.js' 
      })) 
      .pipe(gulp.dest('dist')); 
    });

tsconfig.json

{ 
     "compilerOptions": { 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "declaration": false, 
     "stripInternal": true, 
     "module": "commonjs", 
     "moduleResolution": "node", 
     "noEmitOnError": false, 
     "inlineSourceMap": true, 
     "inlineSources": true, 
     "target": "es5" 
     }, 
     "exclude": [ 
     "typings/browser.d.ts", 
     "typings/browser", 
     "node_modules" 
     ] 
    }

的index.html

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>Sloter</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <!-- build:css --> 
     <link rel="stylesheet" href="css/containers.css"> 
     <!-- endbuild --> 

     <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"> 

     </head> 

     <body> 
     <my-app> 
      <img src="/images/logo.png" width="128px" height="auto" style="position:absolute;top:33%;left:50%;margin-left: -140px;" > 
      <div height="auto" style="position:absolute;top:33%;width:2px;height:44px;left:50%;margin-left: -1px;background-color: #aaaaaa;">&nbsp;</div> 
      <img src="/images/loader_small.gif" width="32px" height="auto" style="position:absolute;top:33%;left:50%;margin-left: 32px;" > 
      <img src="/images/mooke_logo.png" width="128px" height="auto" style="position:absolute;top:50%;left:50%;margin-left: -64px;" > 
     </my-app> 

     <!-- build:hammerjs --> 
     <script src="node_modules/hammerjs/hammer.min.js"></script> 
     <!-- endbuild --> 

     <!-- build:es --> 
     <script src="node_modules/core-js/client/shim.min.js"></script> 
     <!-- endbuild --> 

     <!-- build:vendor -->  
     <script src="node_modules/systemjs/dist/system.src.js"></script> 
     <script src="node_modules/systemjs/dist/system-polyfills.js"></script> 
     <script src="node_modules/zone.js/dist/zone.js"></script> 
     <script src="node_modules/reflect-metadata/Reflect.js"></script>  
     <!-- endbuild --> 

     <!-- build:app --> 
     <script src="systemjs.config.js"></script> 
     <!-- endbuild --> 
     </body> 
    </html>

system.config.dev.js

System.config({ 
     map: { 
     '@angular/core': 'http://127.0.0.1/js/core.umd.min.js', 
     '@angular/compiler': 'http://127.0.0.1/js/compiler.umd.min.js', 
     '@angular/common': 'http://127.0.0.1/js/common.umd.min.js', 
     '@angular/http': 'http://127.0.0.1/js/http.umd.min.js', 
     '@angular/platform-browser': 'http://127.0.0.1/js/platform-browser.umd.min.js', 
     '@angular/platform-browser-dynamic': 'http://127.0.0.1/js/platform-browser-dynamic.umd.min.js', 
     '@angular/router': 'http://127.0.0.1/js/router.umd.min.js', 
     '@angular/forms': 'http://127.0.0.1/js/forms.umd.min.js', 
     '@angular/upgrade': 'http://127.0.0.1/js/upgrade/bundles/upgrade.umd.js', 
     'hammerjs': 'http://127.0.0.1/js/hammer.min.js' 
     } 
    }); 

    document.addEventListener('DOMContentLoaded', function() { 
     System.import('main') 
     .then(null, console.error.bind(console)); 
    });

我的第一個想法是圖書館失蹤了。但那似乎是我錯了。

謝謝！

更新1

一些調查後，我發現，我生成的代碼並不看起來像平常。該組件被註冊這樣的

System.register(['@angular/core'], function(exports_1, context_1)

當有像我以前產生的下方（與角RC5）解決方案：

System.register("app.component", ['@angular/core'], function(exports_1, context_1)

爲什麼部件的名稱中不包含的參數System.register函數？

來源

2016-11-22 Ivan

試試這個作爲你的ts.config，我發現改變模塊從commonjs到系統將它固定在我的angular 2項目上。

{ 
     "compilerOptions": { 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "declaration": false, 
     "stripInternal": true, 
     "module": "system", 
     "moduleResolution": "node", 
     "noEmitOnError": false, 
     "inlineSourceMap": true, 
     "inlineSources": true, 
     "target": "es5" 
     }, 
     "exclude": [ 
     "typings/browser.d.ts", 
     "typings/browser", 
     "node_modules" 
     ] 
    }

來源

2016-11-22 10:06:27 witchdrash

Tx爲答案。我試過，現在我有以下錯誤：'vendors.min.js：4003 Uncaught TypeError：System.register調用無效。匿名System.register調用只能由SystemJS.import加載的模塊進行，而不能通過腳本標記進行。＃ – Ivan

您是否使用Firebug，快速查看SystemJS的錯誤列表，顯示此錯誤與Firebug相關，並且可以通過設置 – witchdrash

哎呀命中輸入:)通過設置globalEvaluationScope：false – witchdrash

Angular 2.2.0 deployment => require is not defined

回答

相關問題