Angularjs Node App Downloads Instead Of Loading In Internet Explorer

Whenever I try loading my AngularJS webpage (on a node js + express server) through http://localhost:3000, Internet Explorer just tries to download it with a random name and no fil

Solution 1:

Could it be sending you a file because you're using .sendFile():

app.get('/', function(req, res){
    sendFile(res, './index.html', getHeader('text/plain'));
});

instead of using .render() to render the page?

app.get('/', function (req, res) {
  res.render('index.html');
})

Solution 2:

Try using Express's use() to always send via sendFile() the index.html after any HTTP action using the * wildcard. Make sure this goes after any other API REST routes or similar. This helps ensure that the Angular app within index.html is not constantly reloaded by other pages being rendered. This way any other API routes send/receive the data you need and only if nothing else is matched, will the index.html be loaded. Below is a structure that worked for me for an Express + Angular 2 application.

File Structure:

api
    foo
        foo.js
    bar
        bar.js
public
    fonts
    css
    img
    index.html
server.js

Server JS:

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

// fonts, css, images are stored in respective folders within folder "public"
app.use(express.static(path.join(__dirname, 'public')));

// some RESTful endpoints
app.use('/api/foo', fooRoutes);
app.use('/api/bar', barRoutes);

app.use('*', (req, res) => res.sendFile(path.join(__dirname, 'public', 'index.html')));

// error handling middleware
app.use(function(req, res, next) {
  var err = newError('Not Found');
  err.status = 404;
  next(err);
});