'ngx-avatar' is not a known element

Question

I'm facing these errors while using ngx-avatar

Uncaught Error: Template parse errors:

'ngx-avatar' is not a known element:

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

("

[ERROR ->]<ngx-avatar name="John Doe"></ngx-avatar>

"):

ng:///CardDetailsModule/CardDetailsComponent.html@118:6
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11388)
    at JitCompiler._parseTemplate (compiler.js:25963)
    at JitCompiler._compileTemplate (compiler.js:25951)
    at compiler.js:25895
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25895)
    at compiler.js:25808
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25807)

I've included these in app.module.ts

import { AvatarModule } from 'ngx-avatar';

. . .

imports: [...,AvatarModule]

I have installed ngx globally, but it is still not working

Answer 1

I think you are having two modules in your project

• App Module
• CardDetails Module

The ngx-avatar is used in the cardsDetailComponent which belongs to CardDetails Module. But you have imported the ngx-avatar in app.module.

Try to import the ngx-avatar module in cardDetails.module and check.Suppose if you are using the ngx-avatar across multiple modules means to move it to a shared module and import it to the modules where it requires

Once the ngx-avatar is imported to cardDetails.module make sure to delete it from app.module