javascriptangularroutesangular-clirouteconfig

ActivatedRoute.routeConfig is null - Angular 2 project with Angular-cli


I have created 2 different projects using angular-cli. Both work perfectly but in one of them routeConfig is null and have no idea what's wrong.

The package.json of both file are the same so there's no any doubt about packages versions, app.modules files are the same as well.

Here is how I get routeConfig in both projects :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(
    private router: ActivatedRoute
  ) { }

  ngOnInit(): void {
    console.log(this.router.routeConfig);
  }
}

what's wrong with my implementation?


Solution

  • After some struggles and looking around my code, I found the major difference between the two apps, which it was in the template part.

    When works :home.component.html

    <div class="container bg">
      <div class="row">
        <div class="col-lg-3">
          <div class="sidebar">
            <app-sidebar></app-sidebar>
          </div>
        </div>
        <div class="col-lg-9">
          <div class="content-bar">
            <!-- Body -->
            <p>
              home works!
            </p>
            <!-- /body -->
          </div>
        </div>
      </div>
    </div>
    

    When doesn't work : app.component.html

    <div class="container bg">
      <div class="row">
        <div class="col-lg-3">
          <div class="sidebar">
            <!-- <app-sidebar></app-sidebar> -->
          </div>
        </div>
        <div class="col-lg-9">
          <div class="content-bar">
            <!-- Body -->
            <router-outlet></router-outlet>
            <!-- /body -->
          </div>
        </div>
      </div>
    </div>
    

    It should be noted that ActivatedRoute was NULL inside sidebar.component.ts.

    If the answer is not clear enough, feel free to mention in comments, I will update it.

    Update: As @alterfox's request the following explanation has been provided :

    When I call <app-sidebar> in the same xxx.component.html as <router-outlet> is called, routeConfig doesn't get any value, so I changed my code as mentioned and moved <app-sidebar> to a level deeper inside home.component.html which means I had to call it in every xxx.component.html