4

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?

Hooman Limouee
  • 1,143
  • 2
  • 21
  • 43

1 Answers1

0

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

Hooman Limouee
  • 1,143
  • 2
  • 21
  • 43
  • From the given example, I cannot determine what the exact issue was/is. Can you please share your conclusions? – alterfox Oct 08 '18 at 08:25
  • Thanks for the update! So you needed to have a common sidebar inside each component instead of in app.component, in order to have `routerConfig` available in AppComponent's `activatedRoute`? – alterfox Oct 08 '18 at 13:29
  • @alterfox That's true, I don't really know if there are better ways to do that. Btw, this way it works great in production, the only problem is rewriting the code. – Hooman Limouee Oct 09 '18 at 04:02