Geek Answers Handbook

"router-outlet" does not work without "routerLink" on the main template

I just created a new angular project using the Angular CLI and created a new user route in it using the following commands.

ng new myproj
cd myproj 
ng g route user

And then I started the Angular CLI server . ng serve

But I can’t see the contents of the login template when I access the page /login, unless I add a link to some route, for example:

<a [routerLink]="['/user']">User Info</a>

When I add the line above, then it is router-outletfilled, but if I delete this line, it router-outletwill be empty again.

What's going on here?

Does anyone know why this is happening?

Sample Files

/src/app/myproj.component.ts

import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'myproj-app',
  templateUrl: 'myproj.component.html',
  styleUrls: ['myproj.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS]
})
@Routes([
  {path: '/user', component: UserComponent}
])
export class MyprojAppComponent {
  title = 'Main Component working!';
}

/src/app/myproj.component.html

<h1>{{title}}</h1>
<router-outlet></router-outlet>

And an incomprehensible workaround

<a [routerLink]="['/user']">User Info</a>

/src/app/+user/user.component.ts

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

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

  constructor() {}

  ngOnInit() {
  }

}

/src/app/+user/user.component.html

<p>
  It should be showing but it isn't!
</p>
+4
3

RC-.

export class MyprojAppComponent {
  constructor(router:Router) {}

.

+5

[routerLink]. . <base href="/"> index.html. .

+3

, RC ( : https://github.com/angular/angular-cli/issues/989). , angular , - @angular/router-deprecated. ng new myproj ng g route user, :

  • npm install --save @angular/router-deprecated
  • src/system-config.ts @angular/router @angular/router-deprecated barrels.
  • src//app/myproj.component.ts :
    • Routes RouteConfig import
    • '@angular/router' '@angular/router-deprecated' import
    • @Routes @RouteConfig
    • name: 'User' RouteConfig /user

, pre-RC <a [routerLink]="['User']">User Info</a> (.. name, path).

+1

More articles:


All Articles