We are building SEO optimised site using Angular 17 SSR. To make our site load faster we decided to move statics files to S3 and Added s3’s cdn path instead of browswer path for serving the static files like html , css , javascripts etc.
For this, we build the project and moved files from browser folder to s3 bucket and got the cdn url for it.
Below is our server.ts file.
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';
import AppServerModule from './src/main.server';
// The Express app is exported so that it can be used by serverless Functions.
export async function app(): Promise<express.Express> {
const server = express();
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
// const browserDistFolder = resolve(serverDistFolder, '../browser');
const browserDistFolder: string = "https://custom-cdn.something.co";
const indexHtml = join(serverDistFolder, 'index.server.html');
const commonEngine = new CommonEngine();
server.set('view engine', 'html');
server.set('views', browserDistFolder);
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
// server.get('*.*', express.static(browserDistFolder, {
// maxAge: '1y'
// }));
// All regular routes use the Angular engine
server.get('*', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;
commonEngine
.render({
bootstrap: AppServerModule,
inlineCriticalCss: false,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
})
.then((html) => res.send(html))
.catch((err) => next(err));
});
return server;
}
async function run(): Promise<void> {
const port = process.env['PORT'] || 4000;
// Start up the Node server
const server = app();
(await server).listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
run();
Now when we ran it , we got broken page and javascript is not working.
Got this error multiple times for every js chunks,
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.
I tried adding this
// Serve static files from /browser
server.get('*.*', express.static(browserDistFolder, {
maxAge: '1y'
}));
but result is same.
I guess, every files getting served as text/html and because of it, css, images and js are not working.
Is this S3 issue or Issue from the code?
What are we missing here?
Any help or feedback would be helpful.