Hello and thank you for taking the time to assist me.
I recently completed a Cron app using Node.JS. I wanted to add a website hosted by the Node.js server with Express. I developed this TypeScript website in a separate folder, but encountered errors when trying to integrate it into my Node.js server. The errors are as follows:
shim.min.js : 1 Uncaught SyntaxError: Unexpected token <
zone.js : 1 Uncaught SyntaxError: Unexpected token <
Reflect.js : 1 Uncaught SyntaxError: Unexpected token <
system.src.js : 1 Uncaught SyntaxError: Unexpected token <
systemjs.config.js : 8 Uncaught SyntaxError: Unexpected token {
app : 1 Uncaught SyntaxError: Unexpected token <
(index) : 28 Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost/public/app
Error loading http://localhost/public/app
Here is how my folders are organized:
The issues seem to be related to my index.html and systemjs.config.js files. When I move node_modules to both the public and root directories, it works correctly. So, I believe the problem lies in the file paths.
<html>
<head>
<title>Cts</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="icone.png" id="icone" />
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCCGhv7ryot0iu9ufz-BXlZBZxcYhB7q8c">
</script>
<script src="https://code.angularjs.org/tools/traceur-runtime.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<!--<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC6bfdXKHUFQltpGyCgC6cmVBx-gDWvxlM"></script>-->
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<base href="/" >
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Contents of systemjs.config.js:
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app',
'@angular': '../node_modules/@angular',
'angular2-in-memory-web-api': '../node_modules/angular2-in-memory-web-api',
'rxjs': '../node_modules/rxjs',
'mapbox-gl': '../node_modules/mapbox-gl'
};
// 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' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
I hope I have explained my issue clearly. Thank you in advance for your assistance.