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"
  }
}

The only file important for this issue is the .spec.ts of you app.component — Wandrille
– Wandrille, Commented Jul 1, 2018 at 19:11

Wandrille · Accepted Answer · 2018-07-01 19:30:05Z

2

You need in your test RouterTestingModule

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

And edit your ROUTE:

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

by:

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

edited Jul 1, 2018 at 19:30

answered Jul 1, 2018 at 19:07

Wandrille

6,9274 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Heather Smith Over a year ago

When I do that, now I get this error, but I'm not sure what it's telling me. Failed: Unexpected module 'RouterTestingModule' declared by the module 'DynamicTestModule'. Please add a @Pipe/@Directive/@Component annotation.

Wandrille Over a year ago

I have updated my answer. Your route doesnt have a reference to AppComponent but you have router-outlet in your app.component.html

Michel · Accepted Answer · 2018-07-01 19:55:06Z

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.

Heather Smith · Accepted Answer · 2018-07-01 19:38:01Z

1

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.

answered Jul 1, 2018 at 19:38

Heather Smith

294 bronze badges

Collectives™ on Stack Overflow

Angular 6 routing setup

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related