I am new to Angular 2, and am trying to get it to render a view ponent that holds other templates/ponents. This is what I want rendered on the /home route. Problem: When I go to the /home route, it goes to a blank page rather than rendering my templates. There's no errors in the console.
Here is my homeponent.html:
<router-outlet></router-outlet>
<container>
<header-ponent></header-ponent>
<check-portfolio></check-portfolio>
<portfolio-carousel></portfolio-carousel>
<skill-section></skill-section>
<need-help></need-help>
</container>
homeponent.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './homeponent.html',
styleUrls: ['./homeponent.scss']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Here are some parts of my app.module.ts. I'm not sure if I need anything in my appponent.html, but it's blank:
const appRoutes: Routes = [
{ path: 'home', ponent: HomeComponent },
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
]
@NgModule({
declarations: [
AppComponent,
Container,
Header,
CheckPortfolioComponent,
PortfolioCarouselComponent,
SkillSectionComponent,
NeedHelpComponent,
FooterComponent,
AboutComponent,
HomeComponent,
TitleNavComponent,
],
imports: [
BsDropdownModule.forRoot(),
BrowserModule,
CarouselModule.forRoot(),
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here is my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LucidWebDream</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=".0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<script>
window.__theme = 'bs4';
</script>
<app-root></app-root>
</body>
</html>
I've tried putting my home ponent into the bootstrap array, but had no luck as well.
Update: Here is the git repo if that helps:
I am new to Angular 2, and am trying to get it to render a view ponent that holds other templates/ponents. This is what I want rendered on the /home route. Problem: When I go to the /home route, it goes to a blank page rather than rendering my templates. There's no errors in the console.
Here is my home.ponent.html:
<router-outlet></router-outlet>
<container>
<header-ponent></header-ponent>
<check-portfolio></check-portfolio>
<portfolio-carousel></portfolio-carousel>
<skill-section></skill-section>
<need-help></need-help>
</container>
home.ponent.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.ponent.html',
styleUrls: ['./home.ponent.scss']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Here are some parts of my app.module.ts. I'm not sure if I need anything in my app.ponent.html, but it's blank:
const appRoutes: Routes = [
{ path: 'home', ponent: HomeComponent },
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
]
@NgModule({
declarations: [
AppComponent,
Container,
Header,
CheckPortfolioComponent,
PortfolioCarouselComponent,
SkillSectionComponent,
NeedHelpComponent,
FooterComponent,
AboutComponent,
HomeComponent,
TitleNavComponent,
],
imports: [
BsDropdownModule.forRoot(),
BrowserModule,
CarouselModule.forRoot(),
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here is my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LucidWebDream</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<script>
window.__theme = 'bs4';
</script>
<app-root></app-root>
</body>
</html>
I've tried putting my home ponent into the bootstrap array, but had no luck as well.
Update: Here is the git repo if that helps:
Share Improve this question asked Oct 27, 2017 at 13:24 Dream_CapDream_Cap 2,3022 gold badges20 silver badges31 bronze badges 4- 3 i believe you shoud put <router-outlet></router-outlet> in your app.ponent.html. – guramidev Commented Oct 27, 2017 at 13:31
-
1
@Dream_Cap as guramidev said, your app.ponent is your entry ponent. Since it does not have a
<router-outlet></router-outlet>your router does not know where to load yourHomeComponent– LLai Commented Oct 27, 2017 at 13:34 - Thanks alot @guramidev. If you put in the answer, I'll checkmark it. – Dream_Cap Commented Oct 27, 2017 at 13:40
- @Dream_Cap ok, points wont hurt thank you! :P – guramidev Commented Oct 27, 2017 at 14:14
2 Answers
Reset to default 6You should put <router-outlet></router-outlet> in app.ponent.html since your app now bootstraps AppComponent and even though you have routes defined it doesn't know what to do next because you have no <router-outlet></router-outlet> in an entry point.
you route should look like this:
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' }
{ path: 'home', ponent: HomeComponent },
{ path: '**', ponent: PageNotFoundComponent }, // default route for page not found
]
that route going to display the ponent in the main router-outlet from your app, if you want to display others ponents using the router-outlet from home ponent, you should write de router like this
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' }
{ path: 'home', ponent: HomeComponent, children:[
{ path: 'list', ponent: ListComponent }
] },
{ path: '**', ponent: PageNotFoundComponent }, // default route for page not found
]
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744940132a4602270.html
评论列表（0条）