Angular component imported from another Module doesn't render

Question

I'm trying to import a PageComponent, which is declared inside a PageModule. I created them by running ng g m page && cd page && ng g c page, but failed to import PageComponent into the app's app.component.html.

The UI I'm creating will have a fixed sidebar and a <app-page> which will contain the main views. Edit: I'm using ngx-admin and new to Angular. I don't understand their use of <router-outlet>, which is the root component/placeholder for all views, so I'm trying to create my own <app-page>. Hope this helps you to understand my intention and the UI goal.

I followed the checklist in this SO answer:

Angular 2 'component' is not a known element

• Are you sure the name is correct? (also check the selector defined in the component)

  • Checked, see below

• Declare the component in a module? If it is in another module, export the component?

  • Yes. Inside the page.module.ts, I have:

    import { PageComponent } from './page.component';
    import { CommonModule } from '@angular/common';
    // import ...;
    
    @NgModule({
      declarations: [PageComponent],
      imports: [
        PagesRoutingModule,
        CommonModule
      ],
      exports: [PageComponent]    // This line exports, right?
    })
    export class PageModule { }
    

  • And the page.component.ts:

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-page',
      templateUrl: './page.component.html',
      styleUrls: ['./page.component.css']
    })
    export class PageComponent implements OnInit {
      constructor() { }
    
      ngOnInit() { }
    }
    

• If it is in another module, import that module?

  • Did this in app.module.ts:

    import { PageModule } from './page/page.module';
    // import ...;
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        // ...,
        PageModule    // PageComponent should be available from now on
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    

  • And the app.component.html, in which <app-page> is not resolved:

    <nb-layout>
      <nb-sidebar>
        <nb-menu [items]="menu"></nb-menu>
      </nb-sidebar>
    
      <app-page></app-page>
    </nb-layout>
    

• Restart the cli?

  • Done

What can I do to import and use PageComponent?

Update: After restarting the CLI & VSCode several times, the error suddenly disappeared. However, the page still doesn't show the <app-page> component, which includes a <p>page works!</p>.

Answer 1

Ok so I've created a minimal example of importing a module and being able to use it's component. The example you provided should work, so I'm not sure what the issue could really be without looking at the actual project. (Keep an eye though for imports or extensions that keep local history of the project as you might incorrectly be importing a old module file)

Demo: https://stackblitz.com/edit/angular-mtah9b?file=src%2Fapp%2Fpage%2Fpage.module.ts

---

As for <router-outlet> it is used for routing in Angular.

Angular's RouterModule will take a config object you provide and setup routing.

// Some RoutingModule

const routesConfig = [
   { path: 'page' component: PageComponent }
];
RouterModule.forRoot(routesConfig) // For Root Module (Usually in AppRouting Module)
RouterModule.forChild(routesConfig) // Child Modules (Usually Lazy Modules)

If the url matches a path you set in your route config. (e.g. https://myapp.com/page)

the PageComponent you set in the routerConfig will be loaded directly below the <router-outlet>

<router-outlet></router-outlet>
<!-- Loaded from url match! -->
<app-page></app-page>

This is an oversimplified answer though and you should read Angular's docs to fully utilize the router or take a look at my personal notes from summary docs