Question

我正在尝试使用Gulp部署我的Angular 2.2.0解决方案。虽然这是我正在部署的第三个项目，但我还是遇到了以下我无法解决的问题。

未捕获的ReferenceError：未定义require 在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)

当我之前（使用Angular RC5）解决方案中生成如下所示时：

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

为什么组件的名称不包含在 System.register 函数的参数中？

Answer 1

尝试将此作为你的ts.config，我发现从commonjs更改模块到系统修复了我的角度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"
      ]
    }

Angular 2.2.0部署=＆gt;未定义需求

1 个答案: