Routing to static html page in Angular 6+

Jad*_*dda 5 angular-routing angular angular-router

我有一个包含3个部分的国家,地区,家庭的Angular项目。加载主页时,我有到的路由设置HomeComponent,该路由具有超链接。一切正常,并且表现得像单页(SPA)。现在,我想添加一个静态HTML页面并路由到它。我查看了Angular Route文档,找不到解决方法。这是我的问题

  1. 我可以在哪里放置静态HTML页面
  2. 如何在其中路由这些文件 app-routing.module.ts

Github仓库:SpringTestingUI

小智 6

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/" }
   ],

   ...
}
Run Code Online (Sandbox Code Playgroud)

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.

  • 您的答案解决了放置静态 HTML 文件的部分,但是可以从“app-routing.module.ts”路由到该文件吗? (2认同)