Angular 2：SystemJS构建器说“找不到元数据”

Question

我试图用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罚款，我可以看到在那里我的模块。但是，当我替换以下：

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

有：

<script src="production/bundle.js"></script> 

在我的 “的index.html” 文件，我得到：

core.umd.js:5995 EXCEPTION: Uncaught (in promise): Error: No NgModule metadata found for 'HomeModule'.

我在做什么错？

我不想使用Webpack。

---

编辑：

这是home.module.ts样子：

import { NgModule } from '@angular/core'; 
import { SharedModule } from '../shared/shared.module'; 
import { HomeComponent } from './components/home/home.component'; 
import { routing } from './home.routing'; 

@NgModule({ 
    imports: [SharedModule, routing], 
    providers: [], 
    declarations: [HomeComponent] 
}) 

export default class HomeModule {} 

---

编辑2：

我现在已经采取了稍微不同的方法并获得广告不同的问题。

阅读this post之后，这是我的更新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” 文件夹，但是当bundle-app和bundle-dependencies尝试运行我得到：

Error on fetch for dist/app/modules/app/app.module at 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文件？

Answer 1

加入这个我systemjs.config.js新咕嘟咕嘟安装后的工作：

defaultExtension: 'js', 
defaultJSExtensions: true 

现在与它里面的所有代码创建了两个包。

感谢您的回复！