I'm using Angular 2 Typescript with Gulp. And Im having trouble with my output file "app.js" in my Gulp bundle
Currently I'm concatenating all my JavaScript files and then linking that one JavaScript file to my index page.
When I do this I get a browser error: "Multiple anonymous System.register calls in the same module file."
This is my gulp code that works, but when I link it to my index.html file it doesn't boot the app:
gulp:
gulp.task('app-bundle', function () {
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript'),
outFile: 'app.min.js'
});
var tsResult = gulp.src(['src/app/app.component.ts', 'src/app/*.ts', 'src/app/filters/*.ts', 'src/app/models/**/*.ts', 'src/app/components/**/*.ts', 'src/app/services/**/*.ts'])
.pipe(ts(tsProject));
return tsResult.js.pipe(addsrc.append('config-prod.js'))
.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./src/app'));
});
This is my config-prod.js:
document.addEventListener('DOMContentLoaded', function () {
System.import('boot')
.then(null, console.error.bind(console));
});
My index.html:
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>App</title>
<base href="/"></base>
<meta charset="UTF-8">
<meta name="fragment" content="!"/>
<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, user-scalable=yes"/>
<!-- inject:css -->
<link rel="stylesheet" href="/css/styles.af010955.css">
<!-- endinject -->
<!-- Js libs -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script type="text/javascript" src="/safariPolyFix.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script>
<script type="text/javascript" src="/angular2_google_maps.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/tools/typescript.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/router.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/http.js"></script>
<script type="text/javascript" src="/firebase/firebaseNew.js"></script>
</head>
<body id="container">
<app></app>
//Seems to be an issue here??????
<script type="text/javascript">
System.import('./app/app.min.js');
</script>
</body>
</html>
