3

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.

theyouishere
  • 177
  • 2
  • 11
  • 1
    Possible duplicate of [Angular2 Router error: cannot find primary outlet to load 'HomePage'](http://stackoverflow.com/questions/37950413/angular2-router-error-cannot-find-primary-outlet-to-load-homepage) – samAlvin Mar 09 '17 at 04:59
  • 1
    post your app.module.ts, router module/file , create working plunkr if possible.. Probably the root component which is loaded does not contain router-outlet. – Parth Ghiya Mar 09 '17 at 05:03
  • Also, the component decorator should be using `templateUrl` rather than `template` if you using a html file for the template – Garth Mason Mar 09 '17 at 05:06
  • @ParthGhiya I'll post it when i'm back home. – theyouishere Mar 09 '17 at 13:37
  • @garth74 I tried both ways. With template url and a seperate file as well with template with the HTML. – theyouishere Mar 09 '17 at 13:52

1 Answers1

5

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

micronyks
  • 54,797
  • 15
  • 112
  • 146
  • I'll try it when i'm back home and i'll let you know ! thanks – theyouishere Mar 09 '17 at 14:04
  • Allright so it worked !! Just to be sure, the HTML that was in the app.component.html is supposed to be visible in every other component right? – theyouishere Mar 10 '17 at 00:17
  • 1
    Yes exactly. It acts as a kind of master page which is visible in every other component and router-outlet is the one which displays different views according to your defined routing. – micronyks Mar 10 '17 at 04:03