Angular Templates not loading but the outlets do

Multi tool use
Multi tool use












0















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.



enter image description here



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.
enter image description here



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?










share|improve this question





























    0















    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.



    enter image description here



    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.
    enter image description here



    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?










    share|improve this question



























      0












      0








      0








      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.



      enter image description here



      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.
      enter image description here



      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?










      share|improve this question
















      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.



      enter image description here



      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.
      enter image description here



      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Dec 30 '18 at 21:23







      Davvit

















      asked Dec 30 '18 at 20:31









      DavvitDavvit

      301113




      301113
























          2 Answers
          2






          active

          oldest

          votes


















          0














          The must be only one <router-outlet> for angular application. Cause <router-outlet> render components by a given route.






          share|improve this answer
























          • 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



















          0














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





          share|improve this answer























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


            }
            });














            draft saved

            draft discarded


















            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









            0














            The must be only one <router-outlet> for angular application. Cause <router-outlet> render components by a given route.






            share|improve this answer
























            • 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
















            0














            The must be only one <router-outlet> for angular application. Cause <router-outlet> render components by a given route.






            share|improve this answer
























            • 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














            0












            0








            0







            The must be only one <router-outlet> for angular application. Cause <router-outlet> render components by a given route.






            share|improve this answer













            The must be only one <router-outlet> for angular application. Cause <router-outlet> render components by a given route.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            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



















            • 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













            0














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





            share|improve this answer




























              0














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





              share|improve this answer


























                0












                0








                0







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





                share|improve this answer













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






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Jan 1 at 3:01









                DavvitDavvit

                301113




                301113






























                    draft saved

                    draft discarded




















































                    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.




                    draft saved


                    draft discarded














                    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





















































                    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
                    xreUquy

                    Popular posts from this blog

                    Monofisismo

                    Angular Downloading a file using contenturl with Basic Authentication

                    Olmecas