Angular 11: Components and Directives not regognized inside Lazy Loaded Module

Question

I want to split my angular project to load Website part in main module and application part in lazy loaded module. While everything worked before, now I am getting plenty of errors about compoentns and directives not known:

Component from same application <app-downloads-sidebar></app-downloads-sidebar>:

Error: projects/nine-gold-tools/src/app/layouts/app-layout/app-layout.component.html:42:13 - error NG8001: 'app-downloads-sidebar' is not a known element:
Directives not recognized: Error: projects/nine-gold-tools/src/app/layouts/app-layout/app-layout.component.html:58:53 - error

NG8002: Can't bind to 'dropup' since it isn't a known property of 'div'.

58 <div dropdown autoClose="true" [dropup]="true" placement="top" triggers="hover">
Library elements (from NineGoldLibModule)

Error: projects/nine-gold-tools/src/app/application/ramlConverter/raml-converter-page/raml-converter-page.component.html:41:21 - error NG8001: 'lib-file-input' is not a known element:
And finally router outlet for subpages

Error: projects/nine-gold-tools/src/app/layouts/app-layout/app-layout.component.html:93:9 - error NG8001: 'router-outlet' is not a known element:

In app-routing I changed from:

{ path: 'app', component: AppLayoutComponent, canActivate: [NewAuthGuard], children: [
    { path: 'downloads', component: DownloadsPageComponent, canActivate: [NewAuthGuard] },
    { path: 'raml-converter', component: RamlConverterPageComponent, canActivate: [NewAuthGuard] },
    { path: 'json-converter', component: JsonConverterPageComponent, canActivate: [NewAuthGuard] },
    { path: '', redirectTo: 'raml-converter', pathMatch: 'full' }
  ]},

to:

{ path: 'app', loadChildren: './application/tools-app.module.ts' },

Inside tools-app.module.ts I declare all compoments (removed declarations from app module) and do only these imports:

declarations: [
    DownloadsPageComponent,
    DownloadsSidebarComponent,
    AppLayoutComponent,
    RamlConverterPageComponent,
    RamlConverterSidebarComponent,
    JsonConverterSidebarComponent,
    JsonConverterPageComponent,
  ],
  imports: [
    CommonModule,
    NineGoldLibModule,
    ToolsAppRoutingModule
]

NineGoldLibModule is the workspace library imported also in app-module.ts

And Finally my tools-app-routing.module.ts:

const routes: Routes = [
  { path: '', component: AppLayoutComponent, canActivate: [NewAuthGuard], children: [
    { path: 'downloads', component: DownloadsPageComponent, canActivate: [NewAuthGuard] },
    { path: 'raml-converter', component: RamlConverterPageComponent, canActivate: [NewAuthGuard] },
    { path: 'json-converter', component: JsonConverterPageComponent, canActivate: [NewAuthGuard] },
    { path: '', redirectTo: 'raml-converter', pathMatch: 'full' }
  ]}
];

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

I cannot find any valid solution for this issue online.

{ path: 'app', loadChildren: './application/tools-app.module.ts' } lazy loading syntax is incorrect — Gaurang Dhorda
– Gaurang Dhorda, Commented Apr 28, 2021 at 10:06
{ path: 'app', loadChildren: () => import('./application/tools-app.module').then(m => m.ToolsAppModule) } — Gaurang Dhorda
– Gaurang Dhorda, Commented Apr 28, 2021 at 10:17
on which line this error comes? and double check path is correct or not inside import('') in loadChildren — Gaurang Dhorda
– Gaurang Dhorda, Commented Apr 28, 2021 at 10:35
Yes. Thanks. Your comments directed me to the solution. I think that first error in template was like domino effect. It is still strange to me, why I need to load that external library in lazyLoaded module again. — Filip Witkowski
– Filip Witkowski, Commented Apr 28, 2021 at 13:40

Filip Witkowski · Accepted Answer · 2021-04-29 06:34:59Z

0

After some questions in comments from Gaurang Dhorda, I reviewed errors and the first one was about FontAwesome tag (<fa-icon>) I have included FontAwesome package in LazyLoaded module and the build went through.

I had another issue, and my solution might help someone, so here it is:

When navigating to Lazy Load route I kept getting BrowserModule already loaded error. I found that BrowserAnimationsModule cannot be loaded more that once, but it's required in the Library Module and Library module is loaded also for LazyLoaded module. To prevent loading BrowserAnimationsModule twice I added this code in Library module:

export class NineGoldLibModule {
  constructor (@Optional() @SkipSelf() parentModule: BrowserAnimationsModule) {
    if (parentModule) {
    // skip
    }
  }
}

Probably I don't need this if statement.

Everything works now.

answered Apr 29, 2021 at 6:34

Filip Witkowski

1,0054 gold badges16 silver badges29 bronze badges

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

2 Comments

Gaurang Dhorda Over a year ago

To prevent this You can remove BrowserAnimationsModule from library module to app.module.ts, so you have only one import of BrowserAnimationModule. But, BrowserModule is for app.module.ts, and all child moudle have to import CommonModule . HttpClientModule also need to import once only in app.module.ts. if we re-import HttpClientModule inside child module then new instance is created and your app has two instance of HttpClient and eventually root interceptors fail to work.

Gaurang Dhorda Over a year ago

material.angular.io/guide/getting-started angular material also doing same and import BrowserAnimationModule only once in app.module.ts

Collectives™ on Stack Overflow

Angular 11: Components and Directives not regognized inside Lazy Loaded Module

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related