Using Static HTML landing page template with Angular 6 application

Question

I have an Angular 6 app hosted on say example.com (dist folder being served using say port 5000) and a landing page folder with its HTML, CSS, JS files being served on say port 6000 and hosted on example.com/welcome

Is there any way I can merge these two such that example.com uses landing page static folder and example.com/#/* (Angular app uses hash in routing) uses dist folder?

I do not want to merge landing page into a component in Angular app due to clashing of CSS, and other issues.

I need landing page to be loaded without loading Angular app first and without changing any URL/routing logic of Angular app.

Solutions I tried:

1. Following code works but loads angular app first and then loads landing page. What I want is that landing page needs to be loaded first.

   app.use('/welcome',express.static(__dirname + '/landing'));
   app.use(express.static(__dirname + '/dist'));
   
   app.get('/',(req,res)=> {
     res.redirect('https://example.com/welcome');
   })
   

2. I tried to make home component of Angular app redirect to /welcome but that too requires loading of Angular app first before the landing page.

Any solution around Express/Nginx?

Answer 1

I would try to separate angular files and landing page files each in a different directory within the static directory.

app.js:

// serve static files
app.use(express.static(path.join(__dirname, 'public')));

// serve angular app
app.get('*', (req, res, next) => {
  // Landing page exception
  if (req.originalUrl === '/welcome') {
    return next();
  }

  res.sendFile(path.resolve('public/dist/index.html'));
});

// serve landing page
app.get('/welcome', (req, res) => {
  res.sendFile(path.resolve('public/welcome/index.html'));
});

angular router:

if (!window.location.hash && window.location.pathname === '/') {
  // redirect the request to GET /welcome
}

public/welcome/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Landing Page</title>
</head>
<body>

</body>
<!--static files can be accessed at public/welcome/-->
<script type="text/javascript" src="welcome/test.js"></script>
</html>

Answer 2

This answer partly solves the problem. I tried to implement a solution based on the idea given by @mas and it worked. Below is what I changed:

server.js:

app.use('/welcome',express.static(__dirname + '/landing'));
app.use(express.static(__dirname + '/dist'));

Now adding a script in Angular app's root index.html before <app-root> (preferably before the body contents):

angular's index.html:

<script>
   if (!window.location.hash && window.location.pathname === '/') {
     // redirect the request to GET /welcome
     window.location.href = "https://example.com/welcome";
   }
</script>

When the browser encounters a script tag when parsing the HTML, it stops parsing and hands over to the Javascript interpreter, which runs the script. The parser doesn't continue until the script execution is complete. Thus, angular's index.html redirects users to landing page before loading the angular app on the user's browser.

This implementation partly solves the problem in the following ways:

• Loading of static landing page without loading angular app before it.
• No change in the URL/routes of the angular app

It doesn't solve the problem of wanting to load the landing page on same URL i.e. https://example.com and still redirects users to a different path: https://example.com/welcome

Now, if the user hits the domain, it will immediately load the static landing page.