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:

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

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

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

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

Answer 1

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.