bundle - Angular 2: SystemJS builder says "no metadata found" -

i'm trying create bundle file using systemjs-builder.

this gulp task:

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

it creates production/bundle.js fine, , can see modules in there. when replace following:

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

with:

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

inside "index.html" file, get:

core.umd.js:5995 exception: uncaught (in promise): error: no ngmodule metadata found 'homemodule'.

what doing wrong?

i don't want use webpack.

---

edit:

this home.module.ts looks like:

import { ngmodule } '@angular/core'; import { sharedmodule } '../shared/shared.module'; import { homecomponent } './components/home/home.component'; import { routing } './home.routing';  @ngmodule({     imports: [sharedmodule, routing],     providers: [],     declarations: [homecomponent] })  export default class homemodule {} 

---

edit 2:

i have taken different approach , different problem.

after reading this post, updated 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(){}); 

this exports entire app javascript "dist" folder, when bundle-app , bundle-dependencies tries run get:

error on fetch dist/app/modules/app/app.module @ file:///c:/path/to/project/dist/app/modules/app/app.module

from can understand, because main.js looks @ top:

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

because if manually edit file includes ".js" @ end this:

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

the error disappears (for particular file continues next file).

how can automatically don't have manually edit each single javascript file inside "dist" folder?

after adding systemjs.config.js new gulp setup works:

defaultextension: 'js', defaultjsextensions: true 

it creates 2 bundles code inside it.

thanks replies!