[英]Angular 6 routing setup
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. 我对angular 6并不陌生,我正在尝试使用路由设置应用程序,但是无法通过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. 我不确定我缺少什么,以便导航到localhost:4200时会显示HomeComponent的内容。 Thanks! 谢谢!
app.module.ts 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 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 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 app.component.html
<router-outlet></router-outlet>
app-routing.module.ts 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. ng服务运行成功。
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. ng test抱怨路由器出口,但我相信我已经完成了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 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"
}
}
You need in your test RouterTestingModule 您需要在测试中使用RouterTestingModule
TestBed.configureTestingModule({
imports: [
RouterTestingModule,
],
...
And edit your ROUTE: 并编辑您的路线:
{path:"",component:HomeComponent, ...}
by: 通过:
{path:"",component:AppComponent, ...}
When trying to solve your issue, you imported modules or declared schemas in the wrong place. 尝试解决问题时,您在错误的位置导入了模块或声明的架构。
app.component.spec.ts 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. 此外,可以删除您在AppModule中添加的CUSTOM_ELEMENTS_SCHEMA
和NO_ERRORS_SCHEMA
的声明。
CUSTOM_ELEMENTS_SCHEMA
would be useful if you were using custom elements, also known as web components, in angular components of AppModule. 如果您在AppModule的角度组件中使用自定义元素(也称为Web组件),则CUSTOM_ELEMENTS_SCHEMA
将很有用。 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. NO_ERRORS_SCHEMA
在测试规范设置( TestBed
配置部分)的schemas
属性中最有用,它表示您不希望您的测试在未知/未经模拟的组件上失败。
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: 一旦我从以下更改了app-routing.module.ts文件:
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. 事情显示出我所期望的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.