How do I have two pages with different base html?

Question

I have an app.component.html file with a <router-outlet></router-outlet>. This obviously means that all the rest of my components use the app.component.html as their base html container.

However I want a login page (and possibly a couple of other pages) that will need a different html layout.

How do I do this?

See solution here https://stackoverflow.com/a/46531192/1904292 — SiarheiK, Jun 20 '20 at 09:16

score 1 · Accepted Answer · answered Jun 20 '20 at 10:19

If you declare the the login page component and those couple of pages under the main app component route, by adding them in the children array then only, they would have the base base url as that of your app component.

You can add the other entry in the routes array for the login components that do not have the app component as their parent.

for example:

const appRoutes: Routes = [

//Site routes goes here 
{ 
    path: '', 
    component: MainComponent,
    children: [
      { path: '', component: HomeComponent, pathMatch: 'full'},
      { path: 'about', component: AboutComponent }
    ]
},
 { path: 'login', component: LoginComponent}
]

How do I have two pages with different base html?

1 Answers1