Farshid Farshid -4 years ago 86
TypeScript Question

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

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:

enter image description here

Answer Source

Okay,

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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download