Angular seed gets stuck at "Loading..." after adding router-outlet

Question

In a new Angular seed application (ng new), the application gets stuck at "Loading..." as soon as I add this to app.component.html:

<router-outlet></router-outlet>

I did try injecting Router:

export class AppComponent {
  constructor(router: Router) { }
  title = 'app works!';
}

and things got even weirder. As long as I have the router-outlet tag it's still stuck at "Loading...". As soon as I remove that (but Router is still being injected), I get a blank screen (i.e., not even "Loading...").

app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

app.component.html:

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

UPDATE

I'm getting four browser errors:

Will you please share your app.module.ts file. – Vivek Doshi Jun 10 '17 at 17:23 — Vivek Doshi, Jun 10 '17 at 17:23
You need to import `RouterModule`. – The Head Rush Jun 10 '17 at 17:26 — The Head Rush, Jun 10 '17 at 17:26

score 1 · Accepted Answer · answered Jun 10 '17 at 17:27

1

Okay,

import { RouterModule } from '@angular/router';
....
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule
  ],

You need to add router module inside your app.module.ts file

answered Jun 10 '17 at 17:27

Vivek Doshi

56,649
12
110
122

I'm getting a blank page. It is app.component because any plain text/html is shown. But no data binding is happening (e.g.,
{{title}}
shows empty) – lfk Jun 10 '17 at 17:39
Post your component file also. – Vivek Doshi Jun 10 '17 at 17:43
Done, and more added – lfk Jun 11 '17 at 05:19
Please read basics about router, how to define routes, next step is to provide routing path. – Vivek Doshi Jun 11 '17 at 06:32
Yes I found my mistake. Thanks – lfk Jun 11 '17 at 07:43

Angular seed gets stuck at "Loading..." after adding router-outlet

1 Answers1

{{title}}