Running 2 Static Angular Apps On NodeJs Server Not Working

Question

I have 2 angular apps that I recently merged together. Both apps are in separate source folder of the same project directory. I have updated the angular.json file to seperate each product build and used ng build appName to build both apps.

I want to server 2 angular apps on the nodeJs server, lets say project1 and project2, and the server will default to the first angular project, project1, with me having capabilities to navigating to project2 directly from project1.

The issue I am having is that if I host one static app, as shown below, it works:

app.use(express.static(path.join(__dirname, '/dist/project1'), { dotfiles: 'allow' }));

and

app.get('*', function(req,res) {
  res.sendFile(path.join(__dirname+'/dist/project1/index.html'));
});

The issue is once I add the same thing for the second project, as shown below, The page doesn't load and instead a white page is shown.

app.use(express.static(path.join(__dirname, '/dist/project2'), { dotfiles: 'allow' }));

and

app.get('*', function(req,res) {
  res.sendFile(path.join(__dirname+'/dist/project2/index.html'));
});

I also tried to use different routes for each static directory, as below, but still had no luck.

app.use('/project1',express.static(path.join(__dirname, '/dist/project1'), { dotfiles: 'allow' }));
app.use('/project2',express.static(path.join(__dirname, '/dist/project2'), { dotfiles: 'allow' }));

When I only run one project, it works but as soon as I include another project, I just get a blank white page. Along with the white screen I also see these errors sometime:

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.
polyfills-es2015.23da8a2c52ef7f5fb136.js/:1 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.
main-es2015.719b20337c641b8633cf.js/:1 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.

coder123 · Accepted Answer · 2024-01-08 06:06:56Z

1

The fix was to change the name for the index.html file for one project and serve the static files in nodeJs as:

app.use('/project1',express.static(path.join(__dirname, '/dist/project1'), { dotfiles: 'allow' }));

app.use(express.static(path.join(__dirname, '/dist/project2'), { dotfiles: 'allow' }));

    app.get('/project2', function(req,res) {
  res.sendFile(path.join(__dirname+'/dist/project2/index.html'));
});
app.get('*', function(req,res) {
  res.sendFile(path.join(__dirname+'/dist/project1/project1.html'));
});

It seems that having a - in the index.html name caused it from loading properly.

answered Jan 8, 2024 at 6:06

coder123

3177 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Running 2 Static Angular Apps On NodeJs Server Not Working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related