Routing to static html page in Angular 6+

Question

I have an Angular project with 3 components country, region, home. When I load the home page, I have route setup to HomeComponent, which hyperlinks for routes. Everything works just fine and behaving like a single page (SPA). Now, I want to add a static HTML page and route to it. I looked at Angular Route documentation, I couldn't find a way to do this. Here are the questions I have

1. Where can I place my static HTML pages
2. How to route those file in app-routing.module.ts

Github Repository: SpringTestingUI

Solution

A little late on this one, was googling around for an Angular to static html generator and came across this and figured I'd pop in. I actually learned how to do this exact thing today.

A static html page is basically no different than another static asset such as a stylesheet or image, so we can treat those pages the exact same.

Following the Angular asset configuration docs, we can create our html files and reference them in the application through the .angular-cli.json or angular.json as appropriate.

One thing I found particularly useful was being able to manually configure the reference path for the html page when it is resolved by the browser.

For example if we have a html in the directory src/static-pages/page1.html, by default if you add that path to the assets section of your angular.json, it will exist at the route http://hostname/static-pages/page1.html. Angular allows you to change the resolve path for this asset to be whatever you want by providing a few extra pieces of information into the assets section when referencing your static html or other asset.

Ex:

// angular.json

{
   ...

   "assets": [
       // This page is routed /static-pages/page1.html
       "src/static-pages/page1.html",
       
       // This page is routed /home/page1.html
       { "glob": "page1.html", "input": "src/static-pages/", "output": "/home/" }
   ],
 
   ...
}

The main difference between doing this and creating a visual component that only renders static html, is that this allows a web crawler to index that html page. If you simply just want to render static html text, I would create an additional SPA component in Angular, and do the routing as normal in your HomeComponent.

Comments

[M. A. Cordeiro]

Why don't you turn your static file into a component?

[The Head Rush]

A static HTML page contains no dynamic (i.e. angular) content. As such, it cannot be routed. You could instead create a component that loads your static content in an iframe and route to that component.

[JB Nizet]

You would use a regular link: <a href="/path/to/static-page.html">. You can put it under assets, or configure the assets in your angular.json file to put it where you want, or just rely on your actual production server to serve it from any URL you choose.

[Pavan Jadda]

@TheHeadRush Does this mean Angular does not support Multi Page application?

[Pavan Jadda]

@JBNizet I tried it, didn't work

[JB Nizet]

We can't help with unknown code causing an unknown problem

[The Head Rush]

@Jadda Angular is a single page application framework. You can share data between angular applications but only by using non-angular features such as a cookie or localStorage.

[Pavan Jadda]

@TheHeadRush Angular does not enforce building our applications as a SPAs. Please read this article. blog.angular-university.io/…. There submit be a way to do Angular multi-page application.

[Tim Hardy]

I can provide further context for wanting to do this because I hit this recently. When you have a static page or a dynamic page managed elsewhere (in my case GraphQL Playground or GraphIQL), and you are thinking about using Angular routing to lock it down to authorized users, you might consider taking the OP's path. In my case, I left Angular out of it and just used a static href and leaned on the server to handle authorization.

[pepipe]

Your answer solves the part where to put static HTML files, but it's possible to route to that file from app-routing.module.ts?

[Tony M]

@pepipe I would presume not. I haven't really developed in Angular in some time (+1 year or so), but since Angular relies on its own components (i.e. the TypeScript @Components), you wouldn't get the same effect. At the end of the day if you created a lightweight component to wrap the html around, it would still end up being bundled into JS. I guess it depends on your goal: if you're looking to have static html thats still SEO friendly, the solution above is your best bet, but if you just want to route to simple content, then creating a component + routing.module.ts works just fine.