Javascript 角度6布线设置

我是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");
  } }

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

}

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>

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

您需要在测试路径测试模块中

并编辑您的路线：

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

作者：

您需要在测试路径测试模块中

并编辑您的路线：

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

作者：

---

好的，这个问题与我设置布局组件的方式有关。一旦我从以下位置更改了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}
]}]

---

显示的内容与我预期的一致。

好的。此问题与我设置布局组件的方式有关。此app.ts.I中的路由文件一旦更改：

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

---

事情如我所料显示。

在试图解决问题时，您在错误的位置导入了模块或声明的架构

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!');
  }));

});

更改：

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

与

此外，可以删除在AppModule中添加的自定义\u元素\u模式和无\u错误\u模式的声明

如果在AppModule的角度组件中使用自定义元素（也称为web组件），则自定义元素\u模式将非常有用。

---

无错误模式在测试规范设置的schemas属性中非常有用，用于测试床配置部分，以表示您不希望在未知/未经修改的组件上测试失败。

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

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!');
  }));

});

更改：

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

与

此外，可以删除在AppModule中添加的自定义\u元素\u模式和无\u错误\u模式的声明

如果在AppModule的角度组件中使用自定义元素（也称为web组件），则自定义元素\u模式将非常有用。

---

NO_ERRORS_SCHEMA在测试规范设置的schemas属性中非常有用，为了表示您不希望您的测试在未知/未经修改的组件上失败。

对于此问题，唯一重要的文件是您的app.component的.spec.ts。对于此问题，唯一重要的文件是您的app.component的.spec.ts。当我这样做时，现在我收到了此错误，但我不确定它告诉我什么。失败：模块“DynamicTestModule”声明了意外的模块“RouterTestingModule”。请添加@Pipe/@Directive/@组件注释。我已更新了答案。您的路由没有对AppComponent的引用，但您的app.component.html中有路由器出口当我这样做时，现在我收到了这个错误，但我不确定它告诉我什么。失败：模块“DynamicTestModule”声明了意外的模块“RouterTestingModule”。请添加@Pipe/@Directive/@组件注释。我已更新了答案。您的路由没有对AppComponent的引用，但您的app.component.html中有路由器出口