When working on a new Angular seed application using ng new, I encountered an issue where the application would get stuck at "Loading..." after adding the following to app.component.html:
<router-outlet></router-outlet>
In an attempt to resolve this, I tried injecting Router as follows:
export class AppComponent {
constructor(router: Router) { }
title = 'app works!';
}
However, things got even more confusing. With the router-outlet tag present, the app remained stuck at "Loading...". Removing the tag (while still injecting Router) resulted in a blank screen.
Here is my app.module.ts file for reference:
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 { }
Additionally, here is the content of app.component.ts and app.component.html:
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!';
}
<h1>
{{title}}
</h1>
<router-outlet></router-outlet>
UPDATE
I am now encountering four browser errors. You can view the screenshot of the errors here.