Menu
I was testing my version of the QuickStart tutorial from Angular 2 where I use a bundle js file. The index.html is like this:
<html>
<head>
<title>Angular 2 QuickStart Deploy</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="css/styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="lib/shim.min.js"></script>
<script src="lib/zone.js"></script>
<script src="lib/Reflect.js"></script>
<script src="lib/system.src.js"></script>
<script>
System.import('app').catch(function(err) { console.error(err); });
</script>
</head>
<!-- 2. Display the application -->
<body>
<my-app>Loading...</my-app>
<!-- application bundle -->
<script src="app/bundle.app.js"></script>
</body>
</html>
So when I execute this, my Hello world message is displayed in the screen, but there's an error in the console syntax error: unexpected token <
After much testing, I realize that if I remove the following line from the index.html file, everything works and no error message is displayed.
System.import('app').catch(function(err){ console.error(err); });
So... I thought that this line was the entry point for the application, main file with the bootstrap, but apparently it's not needed. Am I missing something?
Thanks.
UPDATE
This are 2 screenshots of the result with and without the System.import In both cases it seems it's working, with no errors when System.import is not in the index.html and with errors otherwise. Also, when System.import is in the index it seems it's trying to load the app module and somehow it's giving an error. I can´t really understand why it happens.
Also, my systemjs.config.js regarding app:
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app',
'@angular': 'node_modules/@angular',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
};
...
I created the bundle in Gulp using systemjs-builder
gulp.task('bundle:app', () => {
builder.buildStatic('app/*.js', 'web/app/bundle.app.js')
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('error ' + err);
})
})
603
You do need the System.import to bootstrap and run your application.
It can't run without it, and if it does, you might have a cashed version in your browser.
The error:
syntax error: unexpected token <
is usually an indication that some of the script files didn't get loaded correctly, or you have an error that prevented your app compiled JS files from being loaded.
Without more information on your error and the output in the console, it's hard to tell what exactly is the problem.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
