Component imports must be standalone components, directives, pipes, or must be NgModules

Question

I want to use ngx-avatar in angular standalone component v14.

I use it in the template and I was imported it in the component imports.

But I got error message:

Component imports must be standalone components, directives, pipes, or must be NgModules.

stackblitz

import { AvatarModule } from 'ngx-avatar';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [AvatarModule, CommonModule],
  template: `
    app works!

    <ngx-avatar class="my-avatar" value="HM"> </ngx-avatar>
  `,
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
}

I try to solve it using importProvidersFrom but it's not work:

bootstrapApplication(
  AppComponent, {
   providers: [importProvidersFrom(AvatarModule.forRoot())],
  }
);

Any idea how I can make it work?

Marasco

If it is not a standalone component, I believe it has to be imported in a module. – Autoxidation

Answer 1

I can solve this problem, importing a "SharedModule" with the dependencies you need, later if you need to add stuff, you can do it from this module.

The code of SharedModule, could be:

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AvatarModule } from 'ngx-avatar';
@NgModule({
  exports: [AvatarModule],
  imports: [HttpClientModule, AvatarModule],
})
export class SharedModule {}

Finally you just have to import the SharedModule It works for me

Cocke

Answer 2

From what I found while having a related problem, it seems like the module is malformed.

I'd would guess that the module needs to be compiled with Angular 14+ to be imported as standalone. ngx-avatar isn't since it hasn't been updated for over 2 years.

Susumu

Answer 3

In app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template:`
    <h1>{{title}}</h1>
  `,
  styleUrls: ['./app.component.css'],
  standalone: true
})

export class AppComponent {
  title: string = 'Your title';
}

Dormancy