'ngx-skeleton-loader' is not a known element:

[willmendesneto]

'ngx-skeleton-loader' is not a known element:

[silnose]

same issue :(

error NG8001: 'ngx-skeleton-loader' is not a known element:
1. If 'ngx-skeleton-loader' is an Angular component, then verify that it is part of this module.
2. If 'ngx-skeleton-loader' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

11     <ngx-skeleton-loader *ngIf="isImageLoading"> </ngx-skeleton-loader>
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/modules/location-manager/components/media-manager/components/add-media-button/add-media-button.component.ts:11:16
    11   templateUrl: './add-media-button.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AddMediaButtonComponent.

app.module.ts

import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';


(...)

import: [ NgxSkeletonLoaderModule.forRoot() ]

"ngx-skeleton-loader": "^2.6.2",

[willmendesneto]

Hi @tranvannhat . Could you share more information about the issue, please?

Have you tried the Demo example?

https://stackblitz.com/edit/ngx-skeleton-loader-sample?file=app%2Fapp.component.html

[willmendesneto]

Closing this issue due to the lack in reply. Thanks @tranvannhat , feel free to reopen it if needed

[rubenheymans]

you should add import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; to the docs, it's not clear

[haucongle]

I got the same problem
// app.module..ts
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';

imports: [
    NgxSkeletonLoaderModule,
    ...
  ],

// app.component.html
<div class="item"><ngx-skeleton-loader count="5" appearance="circle"> </ngx-skeleton-loader></div>

And here is the error

ERROR in 'ngx-skeleton-loader' is not a known element:
1. If 'ngx-skeleton-loader' is an Angular component, then verify that it is part of this module.
2. If 'ngx-skeleton-loader' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<div class="item">[ERROR ->]<ngx-skeleton-loader count="5" appearance="circle"> </ngx-skeleton-loader></div>
")

P/S: package.json

"dependencies": {
    "@angular/animations": "^8.2.10",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^8.2.10",
    "@angular/compiler": "^8.2.10",
    "@angular/core": "^8.2.10",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "^8.2.10",
    "@angular/platform-browser": "^8.2.10",
    "@angular/platform-browser-dynamic": "^8.2.10",
    "@angular/router": "^8.2.10",
    "@sentry/browser": "^5.7.0",
    "core-js": "^3.3.2",
    "file-saver": "^2.0.2",
    "fomantic-ui": "^2.7.8",
    "jquery": "^3.4.1",
    "json-ignore": "^0.4.0",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "moment-duration-format": "^2.3.2",
    "moment-timezone": "^0.5.26",
    "ngx-clipboard": "^12.2.1",
    "ngx-pagination": "4.1.0",
    "ngx-skeleton-loader": "^1.2.2",
    "ngx-toastr": "^11.1.0",
    "rxjs": "^6.5.3",
    "rxjs-tslint": "^0.1.7",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.9",
    "@angular/cli": "^8.3.9",
    "@angular/compiler-cli": "^8.2.10",
    "@angular/language-service": "^8.2.10",
    "@types/jasmine": "~3.4.4",
    "@types/jasminewd2": "~2.0.8",
    "@types/moment-duration-format": "^2.2.2",
    "@types/node": "~12.7.12",
    "codelyzer": "~5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "node-sass": "^4.12.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0",
    "typescript": "~3.5.3"
  }

[willmendesneto]

@haucongle Looks like you're missing something in your local configuration. Could you check the stackblitz example (https://stackblitz.com/edit/ngx-skeleton-loader-sample?file=app%2Fapp.module.ts), please?

The previous issue was solved by adding this step in the docs. If this issue still persists, could you please share a stackblitz link simulating your issue?

[haucongle]

@willmendesneto I think I know what my problem is now because I put tag ngx-skeleton-loader in a component (not app component) whose module did not import NgxSkeletonLoaderModule. So I have to import NgxSkeletonLoaderModule in many modules manually. Could you support import module for root like this NgxSkeletonLoaderModule.forRoot(). Thanks

[willmendesneto]

Sure thing. What I can suggest for now is to add it in the correct module until we have a forRoot in the module

[LeentechDev]

does it still not support for root ??

[willmendesneto]

@LeentechDev Unfortunately, I didn't have proper time to look at it. I'll try to apply that in the next weeks. This can be a great opportunity for pull requests.

Until we have the support in place, I strongly suggest you to use #3 (comment) as a solution.

[Sayrai]

@willmendesneto I'm still getting the following error :

'ngx-skeleton-loader' is not a known element:

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

after importing NgxSkeletonLoaderModule from 'ngx-skeleton-loader' in my app.module.ts and also the parent module of the component.

[willmendesneto]

Hi @Sayrai. Could you share more information about the issue, please?

If possible, could you fork and create an example based on the Stackblitz demo? At first, moment, looks like a issue with module configuration really, but it's good to get more details about it. So that I can help your scenario.

https://stackblitz.com/edit/ngx-skeleton-loader-sample?file=app%2Fapp.component.html

[willmendesneto]

Also, I'm happy to share there's a new NgxSkeletonLoaderModule.forRoot() method available. More details in this pull request #48

E.G.

import { NgModule } from '@angular/core';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
// ... list of other app dependencies

import { AppComponent } from './app.component';
// ... list of other app components/modules

@NgModule({
  declarations: [AppComponent],
  imports: [NgxSkeletonLoaderModule.forRoot()],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

[willmendesneto]

In addition of that, I just updated the examples to use the new .forRoot() method as well. You can find a live example in https://stackblitz.com/edit/ngx-skeleton-loader-user-card-component-sample?file=app%2Fapp.module.ts

[jelitter]

Any solution for this ? I'm facing the same issue, both importing NgxSkeletonLoaderModule in the main module (app.module.ts) and in my component's module, both with 'forRoot' and without.

Angular: 11.0.2
ngx-skeleton-loader: "^4.0.0"

Thanks!

[willmendesneto]

@jelitter , @silnose

This is an old issue related to a misconfiguration, as mentioned in this comment here #3 (comment) . In any case, I'm more than happy to help, but it would be great if I can have a real scenario simulation. Could you folks fork this Stackblitz example, simulate the issue, and share the link here, please?

https://stackblitz.com/edit/ngx-skeleton-loader-user-card-component-sample

[johnMyjourney]

Hi there, I use Angular 9.1.3.
Same issues when I try to used this components.

I try to follow the guild and import the Module like this.
import: [ NgxSkeletonLoaderModule.forRoot() ]

but it still show this error

class NgxSkeletonLoader Module is not a angular module

[willmendesneto]

Hi @johnMyjourney . The issue you're facing is related to some misconfiguration in your application. To solve that, please follow these steps and check the Stackblitz example as linked in this comment #3 (comment)

In case you feel is not related to that, could you please provide a Stackblitz link that simulates your issue and share it, please?

Cheers!

[vfioox]

This is still happening on Angular 15 with a fresh install of ngx-skeleton-loader. I could not find any compatibility list if ng version is the problem.