I have been experiencing an issue while trying to load my Angular component using the router. The component never appears on the screen and there are no error messages displayed.
app-routing-module
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{
path: 'home', component: HomeComponent, children:
[
{ path: 'compare', component: CompareComponent, children: [] },
{
path: 'settings', component: SettingsComponent, children: [
{ path: 'new', component: ServerConnectionEditComponent }
]
},
]
},
app-server-connections
constructor(private router:Router, private route:ActivatedRoute) { }
onAddServer()
{
console.log(this.route.url)
this.router.navigate(['new'], {relativeTo: this.route});
}
The URL appears to be valid because any other URL triggers an error.
app-server-connection-edit
ngOnInit() {
console.log("in Edit") //never gets here
}
server-connections.component.html
...
<th scope="col"><button type="button" class="btn btn-success btn-sm"
(click)="onAddServer()">+</button></th>
app-component.html
<app-header></app-header>
<div class="container">
<div class="row">
<div class="col-md-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
settings.component.html
<div class="container">
<div class="row">
<div>
<div class="col-md-12" >
<h4>Server Connections:</h4>
</div>
<br/>
<div class="col-xs-12">
<app-server-connections [serverConnections]="serverConnections"></app-server-connections>
</div>
</div>
</div>
</div>