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

To fix Error NG8001 after Angular 17 update, create the Angular project as standalone.

You need create the project with this command:

ng new ProjectName --standalone=false

Answer 2

I managed to get mine working by adding the following to my tsconfig, but I'm not entirely sure why our template type checking is broken in Angular 16.

      "compilerOptions": {
        "strict": false
      },
      "angularCompilerOptions": {
        "strictTemplates": false
      },

Answer 3

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.

Answer 4

Finally got mine to work!

I guess the best way to resolve this issue is by finding which package is too old.

Warning ⚠️: this is kind of an exhaustive method, but it's the best i can find.

First: using the packages compatibility, go back to setting legacy-peer-deps to false (i know you've set it to true), when you do npm install, try to update each package, top to bottom, to the version that is compatible with angular 16.

If you don't know how, you'll see the package coming from the root (for example "^16.2.12") and the package that doesn't like it (for example ngx-quill@8.0.0), below it'll say something like ^14.0.0 | ^15.0.0 but found 16.2.14. this means that you need to update ngx-quill. Sometimes you have to look up that package compatibility because it's not intuitive.

Second: if you feel like some packages cannot be updated because they are too old, go ahead and do "npm i --legacy-peer-deps" and try starting the app, usually this solves it but if it doesn't then do next step.

Third: Remove the module of that old package from ngModule imports, start your application and see if anything changes, try adding and removing modules in your app module. Eventually, you'll find the bad package.

Note: you might have to swap packages to their alternatives, such as old mat-select-filter to ngx-mat-select-search or old angular2-text-mask to ngx-mask.

Hope this helps!

Answer 5

Not quite an answer, but I'll explain how NgModules work to see if this helps resolve.

If you're using NgModules then the "context" of AppComponent is the same NgModule where it is declared.

Angular will look at the following

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

and then use the AppModule (since that is where AppComponent is declared) to determine what to use for

1. eu-toolbar
2. router-outlet
3. eu-footer
4. ngIf

The rule is that components should be declared directly as part of the declarations or part of the exports of an imported module.

It looks like you're correctly importing ToolbarComponent (provided this selector is unique) but the component for eu-footer is missing. Include this as part of the declarations.

Assuming you're importing RouterModule (this exports the relevant RouterOutlet component with selector router-outlet) into AppModule than router-outlet should work.

ngIf is a directive exported by CommonModule / BrowserModule, so importing one of these modules will include the directive in the context of AppComponent

If all the above is correct then double check the component @Input's are being used correctly, and then reload the dev environment.