Error when exporting custom component

Question

I’m working with Angular, and a pro template I bought. However I am trying to export a custom component, but I was not successful in trying to export this my component, I did it also to the examples of the template I bought and am using, however I have the following error:

ERROR in src/app/pages/apps/propositions/propositions.component.html:12:5 - error NG8001: 'Cui-search-filter-propositions-Component' is not a known element:

1. If 'Cui-search-filter-propositions-Component' is an Angular Component, then Verify that it is part of this module.
2. If 'Cui-search-filter-propositions-Component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Ngmodule.schemas' of this Component to Suppress this message. 12 **

I’ve looked for solutions on the internet, even here in stackoverflow, however none of them applied as a solution to my case. Since generally, in the vast majority of solutions proposed in internet forums or do not apply to my case, or I am already applying the suggested.

Follows the code:

-> CLASSE DO COMPONENTE

import { Component, OnInit } from '@angular/core'
import { NodeBackend } from 'src/app/services/backend/nodeBackend'
import { NzNotificationService } from 'ng-zorro-antd/notification'

@Component({
  selector: 'cui-search-filter-propositions-component',
  templateUrl: './searchFilterPropositions.component.html',
  styleUrls: ['./searchFilterPropositions.component.scss'],
  providers: [NodeBackend],
})
export class SearchFilterPropositionsComponent implements OnInit {

---

--> MÓDULO ONDE FAÇO A EXPORTAÇÃO DA CLASSE DO COMPONENTE

import { SearchFilterPropositionsComponent } from 
'./SearchFilterPropositions/searchFilterPropositions.component' **<-- IMPORT AQUI**

const COMPONENTS = [
  TopbarComponent,
  TopbarIssuesHistoryComponent,
  TopbarSearchComponent,
  TopbarUserMenuComponent,
  TopbarProjectManagementComponent,
  TopbarActionsComponent,
  TopbarLanguageSwitcherComponent,
  MenuLeftComponent,
  MenuTopComponent,
  FooterComponent,
  BreadcrumbsComponent,
  SidebarComponent,
  SupportChatComponent,
  TopbarFavPagesComponent,
  IconsSidebarComponent,
  SearchFilterPropositionsComponent, **<-- COMPONENTE**
]

@NgModule({
  imports: [
    SharedModule,
    FormsModule,
    ReactiveFormsModule,
    PerfectScrollbarModule,
    WidgetsComponentsModule,
    CommonModule
  ],
  declarations: [...COMPONENTS],
  exports: [...COMPONENTS], **<-- EXPORT AQUI COM OS DEMIAS COMPONENTES**
})
export class LayoutModule {}

---

--> ONDE O MÓDULO DO LAYOUT ESTÁ SENDO EXPORTADO (MÓDULO QUE CONTÉM O COMPONENTE)

import { NgModule } from '@angular/core'
import { SharedModule } from '../shared.module'
import { LayoutModule } from '../components/cleanui/layout/layout.module' **<-- IMPORT AQUI**

import { LayoutAuthComponent } from './Auth/auth.component'
import { LayoutMainComponent } from './Main/main.component'
import { LayoutPublicComponent } from './Public/public.component'

const COMPONENTS = [LayoutAuthComponent, LayoutMainComponent, LayoutPublicComponent]

@NgModule({
  imports: [SharedModule, LayoutModule], **<-- MÓDULO LAYOUT AQUI**
  declarations: [...COMPONENTS],
  exports: [...COMPONENTS],
})
export class LayoutsModule {}

---

--> AQUI O APP ROUTING MODULE

import { LayoutsModule } from 'src/app/layouts/layouts.module' **<-- IMPORT DO MÓDULO**

// layouts & notfound
import { LayoutAuthComponent } from 'src/app/layouts/Auth/auth.component'
import { LayoutMainComponent } from 'src/app/layouts/Main/main.component'

{ CÓDIGO ABREVIADO }

@NgModule({
  imports: [
    SharedModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(routes, {
      useHash: true,
      preloadingStrategy: AppPreloader,
    }),
    LayoutsModule, **<-- MÓDULO AQUI**
  ],
  providers: [AppPreloader],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Answer 1

Dude, I believe that’s where you’re importing Layoutsmodule.

From what I saw on the last block of code, you’re trying to import it into AppRoutingModule, when should it matter at AppModule.

Answer 2

You need to import the Layout module in two possible places:

In your page module, if you use Lazyload, or in the Appmodule module, if you are using standard routing.

Importing into Approuting will not work because that is not where this type of information is managed. Components are always connected to a main module, and that module is connected to a route.

If your Layoutmodule is not a complete module, including the page components and is not being used as Lazyload, it will not work independently and will give error because it is never being imported by the module that is managing the current route component.