angular - Not able to open login page with routerLink

Question

I am trying to navigate to /login page whenever user clicks on the Login/Signup option present in my header component. But, whenever I clicks on Login/signUp it remains on the same page.

My app-routing.module.ts file is as below

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {LoginComponent} from './modules/login/login.component';
import {BlogComponent} from './modules/blog/blog.component';

const routes: Routes = [

  {
    path: '',
    redirectTo: 'blog',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'blog',
    component: BlogComponent,
    children: [
      {
        path: '**',
        component: BlogComponent
      }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {LoginComponent} from './modules/login/login.component';
import {BlogComponent} from './modules/blog/blog.component';

const routes: Routes = [

  {
    path: '',
    redirectTo: 'blog',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'blog',
    component: BlogComponent,
    children: [
      {
        path: '**',
        component: BlogComponent
      }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

and the HTML tag from which I am trying to call this is placed in my header.component.html

<a data-toggle="tooltip" title="Sign In/Sign Up" routerLink="/login" routerLinkActive="active" class="login">Login/SignUp</a>

Also I have added router-outlet in my app.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

Though when I manually navigates to the login page i.e. by entering localhost:4200/login in browser, it successfully opens the login page.

My complete code can be found here -

https://github.com/vibhorgoyal18/atest-blog/tree/master/src/app

Answer 1

You need to import the RoutingModule to the module that declares the HeaderComponent

Answer 2

Man, I was really humble with you. I mean, I clone your project because the problem was really rare. I just gonna tell you this. For the next occasions, try firts to review all your code and then present the problem here on the community.

The problem was that you've in your project a ContentComponent and inside it you're calling some services but you want to unsubscribe that services on the ngOnDestroy event cycle.

export class ContentComponent implements OnInit, OnDestroy {
  pageContent: string;
  blogContentSubscription: Subscription;
  contentSubscription: Subscription;

  constructor(private blogService: BlogService, private http: HttpClient) {
  }

  ngOnInit() {
    this.blogContentSubscription = this.blogService.selectedNode.subscribe((node) => {
      this.blogService.getPageContent(node).subscribe(data => {
      }, (res: HttpErrorResponse) => {
        this.pageContent = res.error.text;
      });
    });
  }

  ngOnDestroy(): void {
    this.blogContentSubscription.unsubscribe();
    this.contentSubscription.unsubscribe();
  }
}

If you look the code, you're calling blogContentSubscription and then unsubscribe but you also unsubscribe contentSubscription but you're not calling before. So, the result is...

Uncaught (in promise): TypeError: Cannot read property 'unsubscribe' of undefined

and that is what it's stopping the login route. You just need to remove the line where you unsubscribe the contenSubscription and it's going to work.

Try to review it better next time. It would be impossible if you don't post all the details