angular 8 : Why the component is not loading?

Question

So I created an app with angular-cli. I have following structure in src dir.

├── app
│   ├── app-routing.module.ts
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   ├── app.module.ts
│   └── notifications
│       ├── notifications.component.css
│       ├── notifications.component.html
│       ├── notifications.component.spec.ts
│       └── notifications.component.ts
├── assets
├── environments
│   ├── environment.prod.ts
│   └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── protocol.js
├── styles.css
└── test.ts

Routes have following.

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

AppComponent has HTML for the login page.
Once the form is submitted I redirect to notifications component with [routerLink]="['/notifications']"

Now I am expecting <app_root></app_root> in the index.html to be populated with notifications-component.html.

First of all, is the assumption above right?

I tried to change the selector in notification-component.ts
I tried putting <app-notifications></app-notifications> in <app_root></app_root>
I tried putting <router-outlet></router-outlet> in <app_root>, app.component.html and notifications.component.html. (Only app.component.html worked. but it is showing both HTMLs.)

If the assumptions above is not right, how is it supposed to work?

Limann

In your app.component.html did you try <router-outlet></router-outlet> and your login html ? – Contrayerva

It is not the solution, but, your <router-outlet> must go in appComponent, you should not create a route that directs you to the appComponent, you get an infinite loop, appComponent is always loaded – Callipygian

Answer 1

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.

Forcier

Answer 2

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

Switzer

Answer 3

In my case, my problem was case sensitivity. The mistake that new developer like me could make, is path name case sensitivity.

Hortative

Answer 4

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} ])

Contrayerva

Answer 5

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}
]);

Kolkhoz

The route configuration you have in your post will ALWAYS route to LoginComponent. Either add pathMatch:'full' or move it down. – Fosterfosterage

@GiovaniVercauteren I disagree check here, however I guess you should always have a fallback redirect if you have an unmatched route, or have it route to a 404 page. Anyways, a pathMatch full is not necessary in my answer – Kolkhoz

It seems you are correct. According to the documentation the above example shouldn't work, but it clearly does. It might be a flaw in the documentation or the example is too simple to reveal the real issue. angular.io/guide/router#configuration – Fosterfosterage

@GiovaniVercauteren This is only necessary if there is a redirect on that empty path :) "Otherwise, because an empty path is a prefix of any URL, the router would apply the redirect even when navigating to the redirect destination, creating an endless loop." – Kolkhoz

Answer 6

I just understood that the <router-outlet></router-outlet> line in app.component.html must be the only line in that file, and I moved all my app.component.* code to a new component I called 'home.component.*', and routed to 'home' from 'login' once login was successful. This worked well for me.

Attestation

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Connacht