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

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

Github Repository: SpringTestingUI

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. — The Head Rush, Nov 21 '18 at 16:52
You would use a regular link: ``. 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. — JB Nizet, Nov 21 '18 at 16:53
@TheHeadRush Does this mean Angular does not support Multi Page application? — Pavan Jadda, Nov 21 '18 at 16:57
@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`. — The Head Rush, Nov 21 '18 at 19:38
@TheHeadRush Angular does not enforce building our applications as a SPAs. Please read this article. https://blog.angular-university.io/why-a-single-page-application-what-are-the-benefits-what-is-a-spa/. There submit be a way to do Angular multi-page application. — Pavan Jadda, Dec 01 '18 at 07:03
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. — Tim Hardy, Sep 21 '19 at 18:50

score 46 · Accepted Answer · edited Dec 21 '20 at 21:49

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.

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`? — pepipe, Jun 02 '20 at 23:07
@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. — Tony M, Jun 09 '20 at 20:00
@pepipe. No you could not route to it from app-routing.module.ts — JimbobTheSailor, Jul 19 '23 at 23:44

Routing to static html page in Angular 6+

1 Answers1

Linked