I'm trying to create a bundle file using SystemJS-builder.
This is my 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, and I can see my modules in there. But when I replace the following:
<script>
System.import('app').catch(function(err){
console.error(err);
});
</script>
with:
<script src="production/bundle.js"></script>
inside my "index.html" file, I get:
core.umd.js:5995 EXCEPTION: Uncaught (in promise): Error: No NgModule metadata found for 'HomeModule'.
What am I doing wrong?
I don't want to use Webpack.
Edit:
This is what home.module.ts looks like:
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 {}
Edit 2:
I have now taken a slightly different approach and get a different problem.
After reading this post, this is my 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 my entire app as JavaScript to the "dist" folder, but when bundle-app and bundle-dependencies tries to run I get:
Error on fetch for dist/app/modules/app/app.module at file:///c:/path/to/project/dist/app/modules/app/app.module
From what I can understand, this is because main.js looks like this at the very top:
System.register(['@angular/platform-browser-dynamic', './modules/app/app.module'], function(exports_1, context_1) {
because if I manually edit that file so that it includes ".js" at the end like this:
System.register(['@angular/platform-browser-dynamic', './modules/app/app.module.js'], function(exports_1, context_1) {
The error disappears (for that particular file but continues for the next file).
How can I do this automatically so I don't have to manually edit each single JavaScript file inside the "dist" folder?
