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?
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