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>.

Where is your `app-root`? Try to use the same code in the root component, i.e. `app.components.ts`/`app.component.html` and see if it displays the logic you want. If yes, then you have problem with importing/displaying in the right place. If no, then this is a problem with the code which is supposed to display it. Btw, do you have any errors in a console (you can check it using for example Chrome DevTools)? — Daniel Danielecki, Sep 17 '19 at 05:08
@Jonathan002 `'app-page' is not a known element`, just like the error in the link I posted above. — Minh Nghĩa, Sep 17 '19 at 06:09

Jonathan002 · Answer 1 · 2019-09-17T07:00:33.860

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

Angular component imported from another Module doesn't render

1 Answers1