Angular 角度2:SystemJSBuilder说；未找到元数据“；

我正在尝试使用SystemJS builder创建一个捆绑文件

这是我的任务：

gulp.task('bundle', function() {

    var builder = new systemjsBuilder('', './app/configs/systemjs.config.js');

    return builder.buildStatic('./app/**/*.js', './production/bundle.js', { 
        minify: true, 
        sourceMaps: true,
        encodeNames: false
    })
    .then(function() {
        console.log('Build complete');
    })
    .catch(function(err) {
        console.log('Build error');
        console.log(err);
    });

});

它创建了

production/bundle.js

fine，我可以在那里看到我的模块。但当我替换以下内容时：

<script>
  System.import('app').catch(function(err){ 
    console.error(err); 
  });
</script>

---

编辑2：

我现在采取了稍微不同的方法，得到了不同的问题

阅读后，这是我更新的

gulpfile.js

：

gulp.task('inline-templates', function () {
    return gulp.src('app/**/*.ts')
    .pipe(inlineNg2Template({ UseRelativePaths: true, indent: 0,  removeLineBreaks: true}))
    .pipe(tsc({
        "target": "ES5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": true,
        "noImplicitAny": false
     }))
    .pipe(gulp.dest('dist/app'));
});

gulp.task('bundle-app', ['inline-templates'], function() {
  var builder = new systemjsBuilder('', 'app/configs/systemjs.config.js');

  return builder
     .bundle('dist/app/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', 'bundles/app.bundle.js', { minify: true})
     .then(function() {
         console.log('Build complete');
      })
     .catch(function(err) {
        console.log('Build error');
        console.log(err);
     });
});

gulp.task('bundle-dependencies', ['inline-templates'], function() {
   var builder = new systemjsBuilder('', 'app/configs/systemjs.config.js');

   return builder
     .bundle('dist/app/**/*.js - [dist/app/**/*.js]', 'bundles/dependencies.bundle.js', { minify: true})
     .then(function() {
        console.log('Build complete');
      })
     .catch(function(err) {
        console.log('Build error');
        console.log(err);
     });
});

gulp.task('production', ['bundle-app', 'bundle-dependencies'], function(){});

这会将我的整个应用程序作为JavaScript导出到“dist”文件夹，但当

捆绑应用程序

和

捆绑依赖项

尝试运行时，我会得到：

获取位于的dist/app/modules/app/app.module时出错file:///c:/path/to/project/dist/app/modules/app/app.module

据我所知，这是因为

main.js

在顶部看起来是这样的：

System.register(['@angular/platform-browser-dynamic', './modules/app/app.module'], function(exports_1, context_1) {

因为如果我手动编辑该文件，使其结尾包含“.js”，如下所示：

System.register(['@angular/platform-browser-dynamic', './modules/app/app.module.js'], function(exports_1, context_1) {

错误消失（对于该特定文件，但对于下一个文件，错误将继续）

---

如何才能自动执行此操作，从而不必手动编辑“dist”文件夹中的每个JavaScript文件？

将此文件添加到我的

systemjs.config.js

后，新的Gulp设置工作：

defaultExtension: 'js',
defaultJSExtensions: true

它现在创建了两个包，其中包含所有代码

---

谢谢你的回复

将其添加到我的

systemjs.config.js

中后，新的Gulp设置工作：

defaultExtension: 'js',
defaultJSExtensions: true

它现在创建了两个包，其中包含所有代码

---

谢谢你的回复

您能确认您至少正在使用

rc5

/

rc6

吗？很抱歉！我正在使用RC6。HomeModule是什么样子的？我在问题中添加了home module。请尝试从第行

导出默认类HomeModule{}

中删除

default

，您能确认您正在使用

rc5

/

RC6

吗？抱歉！我正在使用RC6。HomeModule是什么样子的？我在问题中添加了home module。尝试从第行

导出默认类HomeModule{}

Glenn中删除

default

，您的应用程序是否实际使用app.bundle.js来处理它所使用的所有代码，还是仍然从dist/app/**文件夹/文件中提取所需的代码位？我已经成功创建了app.bundle.js文件，但我的应用程序代码仍在dist/app/**中运行。我可以通过检查我的开发控制台中的网络选项卡看到这一点，但我仍然在发出过多的请求（对我的每个组件/管道等的请求）。如果您能对此有所了解，我将不胜感激。Glenn，您的应用程序实际使用的所有代码都是app.bundle.js，还是仍然从dist/app/**文件夹/文件中提取所需的代码位？我已经成功创建了app.bundle.js文件，但我的应用程序代码仍在dist/app/**中运行。我可以通过检查我的开发控制台中的网络选项卡看到这一点，但我仍然在发出过多的请求（对我的每个组件/管道等的请求）。如果你能对这件事有所了解，我将不胜感激。

defaultExtension: 'js',
defaultJSExtensions: true