angular 8 : Why the component is not loading?

AppComponent should be your app's root component, with <router-outlet></router-outlet> inside (and possibly little or nothing more). Don't have a route leading there, it's the one component that'll always be rendered.

Create a separate component handling login (LoginComponent for example), and have routes like:

RouterModule.forRoot([
        { path: 'login', component: LoginComponent},
        { path: 'notifications', component: NotificationsComponent}
        { path: '', redirectTo: 'login'},
    ])

A couple of changes are required to your approach:

1. Add <router-outlet></router-outlet> to the app.component.html file.

2. Create another component for login ( eg. LoginComponent )

3. Update route

      RouterModule.forRoot([
       { path: '', pathMatch: 'full', component: LoginComponent },
       { path: 'notifications', component: NotificationsComponent }
      ])],
   

*Also it's not recommended to use the home path for login, you can change the url to /login and re-route if it's not authenticated.

Have a look https://stackblitz.com/edit/angular-dfhxek.

A better way of doing what you want would be like this

1. Create a new component for login
2. In the app.component.html place the <router-outlet></router-outlet>

3. Change your routing module this way:

   RouterModule.forRoot([ { path: '', component: LoginComponent}, { path: 'notifications', component: NotificationsComponent} ])

Your RouterModule.forRoot cannot have the AppComponent. This component is bootstrapped in the main.ts.

You say you added the login html inside your AppComponent. This is not correct, you should move this to a separate component, LoginComponent. Once you've done this you can update your app.component.html:

<router-outlet></router-outlet>

You can obviously add extra stuff here which will always be visible, like navigation or a footer.

You should then update your routes to this:

RouterModule.forRoot([
  { path: '', component: LoginComponent},
  { path: 'notifications', component: NotificationsComponent}
]);