estoy recibiendo este error en el layout, trate de modularizarlo pero no me funciono asi que lo movi a componentes en shared pero tampoc...

@esuarez87 me sirve

Otra forma de solucionar esto es colocando los exports en tu shared.module como explica Nico en en la clase ambas funcionan, si hay alguien que sepa cual es la mejor forma por favor que lo comente asi nos sacamos la duda

Hola, no se si todavia tenes ese problema pero se soluciona haciendo lo que dice en el punto 2: 2. If ‘app-footer’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component

Tenes que ir al modulo donde importas tu SharedModule y agregar esto:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({ declarations: [], imports: [ ], providers: [], bootstrap: [AppComponent], schemas: [ CUSTOM_ELEMENTS_SCHEMA ] })

Saludos! ojala te sirva o a cualquiera que le haya pasado lo mismo!

yo tengo el mismo problema!

Mira Massimo

layout.component.ts

<import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss']
})
export class LayoutComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}>

layout.component.html

<<app-header></app-header>

<router-outlet></router-outlet>

<app-footer></app-footer>>

app-routing.module.ts

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

import { ProductsComponent } from './products/products.component';
import { ContactComponent } from './contact/contact.component';
import { DemoComponent } from './demo/demo.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { LayoutComponent } from './layout/layout.component';

const routes: Routes = [
    {
    path: '',
    component: LayoutComponent,
    children: [
       {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full',
       },

      {
        path: 'home',
        loadChildren: ()=> import('./home/home.module').then(m => m.HomeModule)
      },

      {
        path: 'products/:id',
        component: ProductDetailComponent
      },

      {
        path: 'products',
        component: ProductsComponent
      },

      {
        path: 'contact',
        component: ContactComponent
      },

      {
        path: 'demo',
        component: DemoComponent
      },

      {
        path: '**',
        component: PageNotFoundComponent
      }

    ]
    
  },


];

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

app.module.ts

<import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProductComponent } from './product/product.component';
import { CartComponent } from './cart/cart.component';
import { ProductsComponent } from './products/products.component';
import { ContactComponent } from './contact/contact.component';
import { DemoComponent } from './demo/demo.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { LayoutComponent } from './layout/layout.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent,
    ProductComponent,
    CartComponent,
    ProductsComponent,
    ContactComponent,
    DemoComponent,
    PageNotFoundComponent,
    ProductDetailComponent,
    LayoutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    SharedModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
>

shared.module.ts

<import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ExponentialPipe } from './pipes/exponential/exponential.pipe';
import { HighlightDirective } from './directives/highlight/highlight.directive';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';


@NgModule({
  declarations: [
    ExponentialPipe,
    HighlightDirective,
    HeaderComponent,
    FooterComponent

  ],
  imports: [
    CommonModule,
  ]
})
export class SharedModule { }
>

Hola Fabian, podrías compartir tu código o repositorio para poder ayudarte mejor, de igual manera fíjate que estés haciendo referencia al lugar indicado donde está el componente "app-header" y también que lo tengas con el nombre correcto sin typos