Error : Cannot find primary outlet to load

Question

So i tried about everything i found online and nothing worked yet.

So i followed the doc on angular about routing : https://angular.io/docs/ts/latest/guide/router.html

Here is my login.component.ts

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

@Component({
  selector: 'app-login',
  template: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

and my login.component.html

<p>Test login</p>
<router-outlet></router-outlet>

error: Error: Cannot find primary outlet to load 'LoginComponent' at getOutlet

So i'm kind of lost here. I tried using: "template: (HTML HERE)" instead of templateUrl, same thing...

Thanks !

By the way, it's not duplicate since ROUTER_DIRECTIVES have been deprecated.

Answer 1

<router-outlet></router-outlet> needs to be placed inside of rootcomponent or appcomponent.

Here, not sure but looks like you want to load loginComponent through router if I'm not wrong.

So place/add router-outlet in your root or app component.

(NOTE: And remove from LoginComponent if it is not your root/app component)