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.
As Mateusz said, all your requests are returning the index.html file. If you open the developer tools in Chrome and look under the "Network" tab and see the responses for each of those files, you'll see that the content of each of those files is actually the index.html file. What you need to do is create an exception list to allow the server to return those js files and other types of files 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.