Angular 6路由设置

Question

我是angular 6的新手，我正在尝试使用路由设置一个应用程序，但我无法使用ng serve加载内容。页面加载时没有错误，但为空。我不确定我遗漏了什么，这样当我导航到localhost:4200时，来自HomeComponent的内容就会显示出来。谢谢!

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正在成功运行。

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测试抱怨路由器插座，但我相信我已经做了它在app.module.ts文件中要求的事情。

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

在您的测试RouterTestingModule中需要

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

并编辑您的路由：

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

出自：

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

Answer 2

在尝试解决您的问题时，您在错误的位置导入了模块或声明的模式。

app.component.spec.ts

更改：

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

使用

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

此外，可以删除您在AppModule中添加的CUSTOM_ELEMENTS_SCHEMA和NO_ERRORS_SCHEMA声明。

如果您在AppModule的angular组件中使用自定义元素(也称为web组件)，则CUSTOM_ELEMENTS_SCHEMA将非常有用。NO_ERRORS_SCHEMA在测试规范设置的schemas属性( TestBed配置部分)中最有用，用来表示您不希望在未知/未模拟的组件上测试失败。

Answer 3

这个问题与我设置布局组件的方式有关。一旦我将app-routing.module.ts文件从以下文件更改为：

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

到这个

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

显示的内容和我预期的一样。