After Angular 16 update: Error NG8001: 'component' is not a known element:

Question

I ran nx migrate to upgrade from angular 15 to angular 16 and now when I run nx s I get the following errors:

Error: apps/webshop/src/app/app.component.html:1:1 - error NG8001: 'eu-toolbar' is not a known element:

1. If 'eu-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'eu-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 < eu-toolbar class="eu-app__header">
apps/webshop/src/app/app.component.ts:22:16 22 templateUrl: './app.component.html', ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent.

Error: apps/webshop/src/app/app.component.html:3:3 - error NG8001: 'router-outlet' is not a known element:

1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3 ~~~~~~~~~~~~~~~

apps/webshop/src/app/app.component.ts:22:16 22 templateUrl: './app.component.html', ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent.
...

There are more errors like this.

app.component.html

<eu-toolbar class="eu-app__header"></eu-toolbar>
<div class="eu-app__content" #appContent (onResize)="handleItemResize($event)">
  <router-outlet></router-outlet>
  <eu-footer *ngIf="layout === 'eu-app--website'"></eu-footer>
</div>

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent,
    ToolbarComponent,      <---
    NavigationItemPipe,
    DashboardComponent,
    ShopcartFlyoutComponent,
    NoCustomerAssignedComponent,
  ],

toolbar.component.ts

@Component({
  selector: 'eu-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.scss'],
})
export class ToolbarComponent implements OnInit, OnDestroy {

I guess there is a config error in my project now, but i don't know where to start, because everything was fine in Angular 15. The proper declaration is in the app.module.ts file. So i would appreciate a hint.

Answer 1

So finally i found the solution!

I was using an old library called popperjs, which was compiled with ngcc using the old view engine from Angluar. ngcc was removed in Angular 16 so the library won't compile and that caused the error, which was super confusing, because at no point anything pointed at the deprecated library.

I replaced popperjs with Floating-UI and now it runs again.