Angular 'app-***' is not a known element - Lazy loading modules

Question

I'm having a problem that i can't understand.

Basically, i have the app module (app.module.ts) with a async route (app-routing.module.ts) to other module (design-system.module.ts). A component (design-system.component.ts) of this async module calls a component of a third module (ButtonModule). The component of main module gives no problem (AppComponent) when calling the third module, but the async module gives an error (DesignSystemModule).

Files

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'design-system',
    loadChildren: () =>
      import('./design-system/design-system-routing.module').then(
        (m) => m.DesignSystemRoutingModule
      ),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

design-system.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ButtonModule } from '../components/button/button.module';
import { DesignSystemRoutingModule } from './design-system-routing.module';
import { DesignSystemComponent } from './design-system.component';

@NgModule({
  declarations: [DesignSystemComponent],
  imports: [CommonModule, DesignSystemRoutingModule, ButtonModule],
})
export class DesignSystemModule {}

design-system-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DesignSystemComponent } from './design-system.component';

const routes: Routes = [{ path: '', component: DesignSystemComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class DesignSystemRoutingModule {}

design-system.component.html

<app-button></app-button>
<p style="color: white;">design-system works!</p>

button.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonComponent } from './button.component';

@NgModule({
  declarations: [ButtonComponent],
  imports: [CommonModule],
  exports: [ButtonComponent],
})
export class ButtonModule {}

The error

error NG8001: 'app-button' is not a known element:
1. If 'app-button' is an Angular component, then verify that it is part of this module.
2. If 'app-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Angular CLI: 12.2.1
Node: 14.17.0
Package Manager: npm 6.14.13
OS: win32 x64

Angular: 12.2.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.1
@angular-devkit/build-angular   12.2.1
@angular-devkit/core            12.2.1
@angular-devkit/schematics      12.2.1
@schematics/angular             12.2.1
rxjs                            6.6.7
typescript                      4.3.5

Sorry guy, but have you tried to restart your server, sometimes, the angular don't update somethings :/ — Hoch
– Hoch, Commented Aug 12, 2021 at 23:57
You need to put the minimal code necessary to reproduce the problem in the question itself, not on an external site. — Roddy of the Frozen Peas
– Roddy of the Frozen Peas, Commented Aug 13, 2021 at 0:02

Eliseo · Accepted Answer · 2021-08-13 06:30:49Z

3

The loadChildren should load "design-system.module.ts" not the "design-system-routing.module", is the design-system.module who import "the design-system-routing.module"

const routes: Routes = [
  {
    path: 'design-system',
    loadChildren: () =>      //import the design-system.module
      import('./design-system/design-system.module').then(
        (m) => m.DesignSystemModule
      ),
  },
];

answered Aug 13, 2021 at 6:30

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

v1d3rm3 Over a year ago

Unbelievable! Sorry for that! I was totally blind.

Eliseo Over a year ago

It's more common that you think :)

Fidelis Over a year ago

Any chance you can provide feedback on the issue with Angular 14? I have the exact same setup, and due to the newest version of Angular, it doesn't allow you to import this way anymore. It wants the setup to be loadChildren: async () => (await import('./login/login.module')).LoginModule However, this fails with the same issue. The Component that I declare in my LoginModule doesn't get loaded. When the LoginModule's router navigates to the component indicated by the route, and then calls the other component (declared in LoginModule) in the html it fails to find the component.

Collectives™ on Stack Overflow

Angular 'app-***' is not a known element - Lazy loading modules

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related