Angular 6 routing setup

Question

I am new to angular 6 and I'm trying to set up an application with routing, but I am unable to get the content to load with ng serve. The page loads without error, but it is blank. I'm not sure what I am missing so that the content from the HomeComponent will display when I navigate to localhost:4200. Thanks!

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule ,CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA} from '@angular/core';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/global-header/global-header.component';
import { NavigationComponent } from './components/navigation/navigation.component';
import { LayoutComponent } from './layout/layout.component';
import { BlogComponent } from './pages/blog/blog.component';
import { HomeComponent } from './pages/home/home.component';
import { StoreComponent } from './pages/store/store.component';
import { BlogService} from './services/blog.service';
import { ItemService}from './services/item.service';
import { AppRoutingModule} from './app-routing.module';
import { RouterModule,Routes } from '@angular/router';
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    NavigationComponent,
    LayoutComponent,
    BlogComponent,
    HomeComponent,
    StoreComponent

  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: [BlogService,ItemService],
  bootstrap: [AppComponent],
  entryComponents:[

  ],
  schemas:[
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
  ],
})
export class AppModule {
  constructor(){
    console.log("got to app  module");
  } }

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Muckmaker';
  constructor(){
    console.log("got to app component");
  }
}

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import {RouterTestingModule} from "@angular/router/testing";
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        RouterTestingModule
      ],
    }).compileComponents();
  }));



  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to muckmaker!');
  }));

});

app.component.html

<router-outlet></router-outlet>

app-routing.module.ts

import {NgModule} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { HeaderComponent } from './components/global-header/global-header.component';
import { NavigationComponent } from './components/navigation/navigation.component';
import { LayoutComponent } from './layout/layout.component';
import { BlogComponent } from './pages/blog/blog.component';
import { HomeComponent } from './pages/home/home.component';
import { StoreComponent } from './pages/store/store.component';

const appRoutes: Routes=[
  {path:"",component:HomeComponent,children:[
    {path:'home',component:HomeComponent},
    {path: 'blog',component:BlogComponent},
    {path: 'store',component:StoreComponent}



]}]


@NgModule({
  imports:[RouterModule.forRoot(appRoutes)],
  exports:[RouterModule]
})

export class AppRoutingModule{

  constructor(){
    console.log("got to app routing module");
  }

}

ng serve is running successfully.

Heathers-MacBook-Pro:muckmaker heathersmith$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
                                                                                         p
Date: 2018-07-01T18:50:10.468Z
Hash: 9a34bafa6d44a2183715
Time: 9303ms
chunk {main} main.js, main.js.map (main) 35.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 223 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.52 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.

ng test complains about router-outlet, but I believe that I have done what it asks in the app.module.ts file.

Failed: Template parse errors:
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<router-outlet></router-outlet>
"): ng:///DynamicTestModule/AppComponent.html@0:0

package.json

{
  "name": "muckmaker",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "bootstrap": "^4.1.1",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "jquery": "^1.9.1",
    "popper.js": "^1.14.3",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

Answer 1

When trying to solve your issue, you imported modules or declared schemas in the wrong place.

app.component.spec.ts

Change:

TestBed.configureTestingModule({
   declarations: [
       AppComponent,
       RouterTestingModule // this module should be imported instead 
   ],
}).compileComponents();

With

TestBed.configureTestingModule({
   imports: [
       RouterTestingModule
   ],
   declarations: [
       AppComponent
   ],
}).compileComponents();

Additionally, the declarations of CUSTOM_ELEMENTS_SCHEMA and NO_ERRORS_SCHEMA that you added in AppModule can be removed.

CUSTOM_ELEMENTS_SCHEMA would be useful if you were using custom elements, also known as web components, in angular components of AppModule. NO_ERRORS_SCHEMA is mostly useful in the schemas property of the test spec setup (the TestBed configuration part), so as to express that you don't want your test to fail on an unknown / unmocked component.

Answer 2

Ok this problem was related to the way I set up my layout component. Once I changed my app-routing.module.ts file from this:

const appRoutes: Routes=[
  {path:"",component:HomeComponent,children:[
    {path:'home',component:HomeComponent},
    {path: 'blog',component:BlogComponent},
    {path: 'store',component:StoreComponent}
]}]

to this

const appRoutes: Routes=[
  {path:"",component:LayoutComponent,children:[
    {path:'home',component:HomeComponent},
    {path: 'blog',component:BlogComponent},
    {path: 'store',component:StoreComponent}
]}]

things displayed as I expected.

Answer 3

You need in your test RouterTestingModule

TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
      ],
      ...

And edit your ROUTE:

{path:"",component:HomeComponent, ...}

by:

{path:"",component:AppComponent, ...}