How to design the correct structure of Angular components?

Question

Angular

Installed Angular from CLI, with standard structure. When the entry point is a file:
app.module -> app.component The app.component.html
template file has

<router-outlet>
</router-outlet>

and the site skeleton, which should be visible only after authorization.
Which substitutes other callable components depending on the selected route.
The problem is that when I request an authorization page (login page), it is substituted into this private template. What is wrong. The login page should work as a separate page.
How to organize it correctly?

Answer 1

It can be done differently. One of the ways out: it is
necessary to register in the routing something like this:

const appRoutes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'main', component: MainComponent}

then, in the LoginComponent component, check whether the person has passed authorization,
if he passed, then we redirect to the desired page, like this:

auth() {
   this.service.getToken(this.login, this.password).then(res) {
       if (res) {
         return this.router.navigate(['/main']);
       }
   }
}