CODEWITHSUNDEEP
angular
Ryan Soderberg
Ryan Soderberg

Reputation: 772

ngOnInit is never being run in one of my components

I am having trouble getting my component ReferralComponent to initialize. I have code in the ngOnInit() to console log but it never does.

When I visit http://localhost:4200/r/7dyw7yd User Component Appears! is console.logged but Referral Component Appears is never

user.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

import { UserService } from '../shared/user.service';
import { User } from '../shared/user.model';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: [
    './user.component.css'
  ],
  providers: [UserService]
})
export class UserComponent implements OnInit {

  constructor(private userService: UserService) {}

  ngOnInit() {
    console.log('User Component Appears!');
  }
}

referral.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-referral',
  templateUrl: './referral.component.html',
  styleUrls: ['./referral.component.css']
})
export class ReferralComponent implements OnInit {
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    console.log('Referral Component Appears!');
    const code = this.route.snapshot.paramMap.get('code');
    console.log(code);
    this.router.navigate(['']);
  }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user/user.component';
import { ReferralComponent } from './referral/referral.component';

const routes: Routes = [
  {
    path: 'r/:code',
    component: ReferralComponent
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: UserComponent
  }
];

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

app-module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { ReferralComponent } from './referral/referral.component';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    ReferralComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 0

Views: 776

Answers (2)

Jean-Marc Roy
Jean-Marc Roy

Reputation: 1791

After checking your stackblitz, I see that you just forget to add <router-outlet></router-outlet> in your app.component.html file. Here is a working example: https://stackblitz.com/edit/angular-eqwffm.

Upvotes: 2

Alberto Lerdo
Alberto Lerdo

Reputation: 128

Firstly, In your Referral Component it looks like you set up ngOnInit() to navigate to "" which is then re-routed to /home so that probably doesn't help keep you on your Referral Component

But otherwise, it's interesting that Referral Component Appears! never appears.

Check out this stackblitz, that I made resemble your example.

editor https://stackblitz.com/edit/angular-router-basic-example-kbrvmn?file=app%2Fapp.component.ts

result https://angular-router-basic-example-kbrvmn.stackblitz.io/r/ss

Upvotes: 0

Related Questions