I am building a website with Angular 4. Besides having a few “complex” components, I need to display some basic HTML pages:
- start (landing page)
- Terms of Use
- Imprint
- ...
I want the router to be routed in such a way that the HTML content of these pages is located at the <router-outlet></router-outlet> location, just like regular components.
Note. These pages currently do not use any dynamic functions, such as bindings; they are just basic HTML. Later, I might want to use interpolation to identify small pieces of text (phone number) in one place. In addition, at some point, the website should serve more than one language. However, for now, it’s enough to focus on displaying basic HTML.
So far I have found two ways to do this:
Approach 1: one component per page
The presence of one component for each page. This way I get terms-of-use.component.ts , terms-of-use.component.html , imprint.component.ts , imprint.component.html , etc.).
Router definition
The definition of a router is as follows:
const routes: Routes = [ { path: 'start', component: StartComponent }, { path: 'terms-of-use', component: TermsOfUseComponent }, { path: 'imprint', component: ImprintComponent }, ... ]
Downside
Having one component for each page means many component declarations. Depending on the number of pages, this may become useless.
Approach 1: one component for all main pages
The presence of one component "page", which loads the HTML content on the corresponding site using http -request. I use data -property in routing objects to tell the component which page to load. The component template uses <div [innerHtml]="pageTemplate"> </div> to display the contents of the loaded page; where pageTemplate contains the loaded HTML.
Router definition
The definition of a router is as follows:
const routes: Routes = [ { path: 'start', component: PageComponent, data: { page: "start" } }, { path: 'terms-of-use', component: PageComponent, data: { page: "terms-of-use" } }, { path: 'imprint', component: PageComponent, data: { page: "imprint" } }, ... ]
Downside
Pages loaded dynamically via http are displayed, but Angular4 complains about this for security reasons : WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss) . Although the related documentation contains a section on trusting certain sources, I have a feeling this is not a very good approach.
Question
Is there any other way to display "static html content"? Ideally, I would just like to go to a specific template without specifying any component or reusing one component for all the main pages. As with AngularJS 1.x and ui-router .
Routing in AngularJS 1.x
In AngularJS 1.x, I used ui-router to solve my problem as follows:
var states = [{ name: 'start', url: '/', templateUrl: 'src/pages/start.html' }, { name: 'terms-of-use', url: '/terms-of-use', templateUrl: 'src/pages/terms-of-use.html' }, { name: 'imprint', url: '/imprint', templateUrl: 'src/pages/imprint.html' },