Angular Templates not loading but the outlets do

Multi tool use
My template outlets load fine in the browser but the component template html does not load. The components are generated with CLI. not sure what's wrong here. [yes,i looked through template questions here on SO for hours.]
Here is what the browser renders.
Here is my main.layout.component.html
Test
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
This is my header template and component for example. (footer is similar.)
Template
<p>
header works!
</p>
Component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Here is the layout module that declares all the components.
@NgModule({
imports: [
CommonModule,
RouterModule,
],
exports: [
],
declarations: [
AuthLayoutComponent,
MainLayoutComponent,
EmptyLayoutComponent,
HeaderComponent,
FooterComponent
]
})
export class AppLayoutModule { }
Here is the structure. I am not getting any console errors etc. thanks for any help.
UPDATE:
If I add HeaderComponent in AppModule declarations the header template loads!
Am i doing something wrong with my structure? Why do I need to declare a child module's(LayoutModule) components in higher modules(AppModule) for it to work?
angular angular-ui-router
add a comment |
My template outlets load fine in the browser but the component template html does not load. The components are generated with CLI. not sure what's wrong here. [yes,i looked through template questions here on SO for hours.]
Here is what the browser renders.
Here is my main.layout.component.html
Test
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
This is my header template and component for example. (footer is similar.)
Template
<p>
header works!
</p>
Component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Here is the layout module that declares all the components.
@NgModule({
imports: [
CommonModule,
RouterModule,
],
exports: [
],
declarations: [
AuthLayoutComponent,
MainLayoutComponent,
EmptyLayoutComponent,
HeaderComponent,
FooterComponent
]
})
export class AppLayoutModule { }
Here is the structure. I am not getting any console errors etc. thanks for any help.
UPDATE:
If I add HeaderComponent in AppModule declarations the header template loads!
Am i doing something wrong with my structure? Why do I need to declare a child module's(LayoutModule) components in higher modules(AppModule) for it to work?
angular angular-ui-router
add a comment |
My template outlets load fine in the browser but the component template html does not load. The components are generated with CLI. not sure what's wrong here. [yes,i looked through template questions here on SO for hours.]
Here is what the browser renders.
Here is my main.layout.component.html
Test
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
This is my header template and component for example. (footer is similar.)
Template
<p>
header works!
</p>
Component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Here is the layout module that declares all the components.
@NgModule({
imports: [
CommonModule,
RouterModule,
],
exports: [
],
declarations: [
AuthLayoutComponent,
MainLayoutComponent,
EmptyLayoutComponent,
HeaderComponent,
FooterComponent
]
})
export class AppLayoutModule { }
Here is the structure. I am not getting any console errors etc. thanks for any help.
UPDATE:
If I add HeaderComponent in AppModule declarations the header template loads!
Am i doing something wrong with my structure? Why do I need to declare a child module's(LayoutModule) components in higher modules(AppModule) for it to work?
angular angular-ui-router
My template outlets load fine in the browser but the component template html does not load. The components are generated with CLI. not sure what's wrong here. [yes,i looked through template questions here on SO for hours.]
Here is what the browser renders.
Here is my main.layout.component.html
Test
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
This is my header template and component for example. (footer is similar.)
Template
<p>
header works!
</p>
Component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Here is the layout module that declares all the components.
@NgModule({
imports: [
CommonModule,
RouterModule,
],
exports: [
],
declarations: [
AuthLayoutComponent,
MainLayoutComponent,
EmptyLayoutComponent,
HeaderComponent,
FooterComponent
]
})
export class AppLayoutModule { }
Here is the structure. I am not getting any console errors etc. thanks for any help.
UPDATE:
If I add HeaderComponent in AppModule declarations the header template loads!
Am i doing something wrong with my structure? Why do I need to declare a child module's(LayoutModule) components in higher modules(AppModule) for it to work?
angular angular-ui-router
angular angular-ui-router
edited Dec 30 '18 at 21:23
Davvit
asked Dec 30 '18 at 20:31


DavvitDavvit
301113
301113
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
The must be only one <router-outlet>
for angular application. Cause <router-outlet>
render components by a given route.
angular application can have multiple router outlets in different modules and subcomponents....to load more child components/modules...
– Davvit
Dec 30 '18 at 21:34
add a comment |
after a walk i figured out the issue. I did not export the components; therefore parent module was not able to find the component templates. Here is a correct AppLayoutModule
@NgModule({
imports: [
CommonModule,
RouterModule,
],
exports: [
HeaderComponent,
AuthLayoutComponent,
MainLayoutComponent,
EmptyLayoutComponent,
],
declarations: [
HeaderComponent,
AuthLayoutComponent,
MainLayoutComponent,
EmptyLayoutComponent,
FooterComponent,
]
})
export class AppLayoutModule { }
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53981199%2fangular-templates-not-loading-but-the-outlets-do%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The must be only one <router-outlet>
for angular application. Cause <router-outlet>
render components by a given route.
angular application can have multiple router outlets in different modules and subcomponents....to load more child components/modules...
– Davvit
Dec 30 '18 at 21:34
add a comment |
The must be only one <router-outlet>
for angular application. Cause <router-outlet>
render components by a given route.
angular application can have multiple router outlets in different modules and subcomponents....to load more child components/modules...
– Davvit
Dec 30 '18 at 21:34
add a comment |
The must be only one <router-outlet>
for angular application. Cause <router-outlet>
render components by a given route.
The must be only one <router-outlet>
for angular application. Cause <router-outlet>
render components by a given route.
answered Dec 30 '18 at 21:20


YoarthurYoarthur
679515
679515
angular application can have multiple router outlets in different modules and subcomponents....to load more child components/modules...
– Davvit
Dec 30 '18 at 21:34
add a comment |
angular application can have multiple router outlets in different modules and subcomponents....to load more child components/modules...
– Davvit
Dec 30 '18 at 21:34
angular application can have multiple router outlets in different modules and subcomponents....to load more child components/modules...
– Davvit
Dec 30 '18 at 21:34
angular application can have multiple router outlets in different modules and subcomponents....to load more child components/modules...
– Davvit
Dec 30 '18 at 21:34
add a comment |
after a walk i figured out the issue. I did not export the components; therefore parent module was not able to find the component templates. Here is a correct AppLayoutModule
@NgModule({
imports: [
CommonModule,
RouterModule,
],
exports: [
HeaderComponent,
AuthLayoutComponent,
MainLayoutComponent,
EmptyLayoutComponent,
],
declarations: [
HeaderComponent,
AuthLayoutComponent,
MainLayoutComponent,
EmptyLayoutComponent,
FooterComponent,
]
})
export class AppLayoutModule { }
add a comment |
after a walk i figured out the issue. I did not export the components; therefore parent module was not able to find the component templates. Here is a correct AppLayoutModule
@NgModule({
imports: [
CommonModule,
RouterModule,
],
exports: [
HeaderComponent,
AuthLayoutComponent,
MainLayoutComponent,
EmptyLayoutComponent,
],
declarations: [
HeaderComponent,
AuthLayoutComponent,
MainLayoutComponent,
EmptyLayoutComponent,
FooterComponent,
]
})
export class AppLayoutModule { }
add a comment |
after a walk i figured out the issue. I did not export the components; therefore parent module was not able to find the component templates. Here is a correct AppLayoutModule
@NgModule({
imports: [
CommonModule,
RouterModule,
],
exports: [
HeaderComponent,
AuthLayoutComponent,
MainLayoutComponent,
EmptyLayoutComponent,
],
declarations: [
HeaderComponent,
AuthLayoutComponent,
MainLayoutComponent,
EmptyLayoutComponent,
FooterComponent,
]
})
export class AppLayoutModule { }
after a walk i figured out the issue. I did not export the components; therefore parent module was not able to find the component templates. Here is a correct AppLayoutModule
@NgModule({
imports: [
CommonModule,
RouterModule,
],
exports: [
HeaderComponent,
AuthLayoutComponent,
MainLayoutComponent,
EmptyLayoutComponent,
],
declarations: [
HeaderComponent,
AuthLayoutComponent,
MainLayoutComponent,
EmptyLayoutComponent,
FooterComponent,
]
})
export class AppLayoutModule { }
answered Jan 1 at 3:01


DavvitDavvit
301113
301113
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53981199%2fangular-templates-not-loading-but-the-outlets-do%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
6Cee bPkarmo,jeZ8ZR i,FPIQmkb,4Bm51NRqL9s HvUy,BV sz16KJSr2ORtXmq