I am building a website with Angular 4. Besides having a couple of "complex" components, I need to display some basic HTML pages:

• start (landing page)
• terms of use
• imprint
• ...

I want the router to route in a way, such that the HTML content of these pages is placed at the location of the <router-outlet></router-outlet> - just like with usual components.

Remarks: For now, these pages do not use any dynamic features, such as bindings; they are just basic HTML. Later I might want make use of interpolations in order to define small text snippets (telephone number) at one place. Also, at some point, the website needs to serve more than one language. However, for now, it suffices to focus on displaying basic HTML.

So far I found two ways to do this:

Approach 1: One component per page

Having one component for each page. Thus, I end up having terms-of-use.component.ts, terms-of-use.component.html, imprint.component.ts, imprint.component.html and so on).

Router definition

The router definition looks like:

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 alot of component declarations. Depending on the number of pages this can quickly become a mess.

Approach 1: One component for all basic pages

Having a single "page" component that loads the HTML content of the respective site via an http-request. I use the data-property in the routing objects to tell the component, which page to load. The component's template uses <div [innerHtml]="pageTemplate"> </div> to display the loaded page content; where pageTemplate holds the loaded HTML.

Router definition

The router definition looks like:

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 it due to security reasons: WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss). While the linked documentation has a section about trusting certain sources, I have the feeling, this is not a good approach.

Question

Is there another way to display "static html content"? Ideally, I would love to just route to a specific template without having to specify any component or by reusing a single component for all basic pages. Similar to what was possible with AngularJS 1.x and ui-router.

Routing in AngularJS 1.x

In AngularJS 1.x I used the ui-router to solve my problem this way:

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'
    },