Menu
I have set up an angular and express app with angular-cli and express command lines respectively. I've already build angular app with ng build and when I want to serve it with express server I get following error in google chrome console:
Uncaught SyntaxError: Unexpected token < runtime.js:1
Uncaught SyntaxError: Unexpected token < polyfills.js:1
Uncaught SyntaxError: Unexpected token < styles.js:1
Uncaught SyntaxError: Unexpected token < vendor.js:1
Uncaught SyntaxError: Unexpected token < main.js:1
here is my server.js file:
.
.
.
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/users', usersRouter);
app.use('/auth', authRouter);
// Catch all other routes and return the angular index file
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client/dist/client/index.html'));
});
index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Client</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
There is no problem with ng serve and app will run smoothly and also when I just open index.html with browser it also works, I think it somehow relates to express server.
627
This error can occur for a number of reasons, but is typically caused by a typo or incorrect code. Luckily, the SyntaxError: Unexpected token error is relatively easy to fix. In most cases, the error can be resolved by checking the code for accuracy and correcting any mistakes.
The error Uncaught SyntaxError: Unexpected token < is most commonly caused by your site's code referring to an asset that is no longer available. Most commonly, this is due to a filename change in assets generated during your build.
Like Mateusz said - all of your requests are returning the index.html file. If you open up the developer tools in Chrome and look under the "Network" tab and view the responses for each of those files you'll see the contents of each of those files is actually the index.html file. What you need to do is make an list of exceptions to allow the server to return those js files and other file types like images.
const allowed = [
'.js',
'.css',
'.png',
'.jpg'
];
// Catch all other routes and return the angular index file
app.get('*', (req, res) => {
if (allowed.filter(ext => req.url.indexOf(ext) > 0).length > 0) {
res.sendFile(path.resolve(`client/dist/cient/${req.url}`));
} else {
res.sendFile(path.join(__dirname, 'client/dist/client/index.html'));
}
});
I think the issue is that your script files are loaded from the root level making your browser request http://example.com/XXX.js. That's why they fall in the Express' * route. This means every request for XXX.js gets the same index.html file which can't be properly parsed by JS engine.
35
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
