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

tranvannhat · 2019-05-10T09:15:33Z

I follow doc, but get error: 'ngx-skeleton-loader' is not a known element:....

willmendesneto · 2019-05-18T04:06:57Z

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 · 2019-05-27T22:13:24Z

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

rubenheymans · 2019-09-28T22:28:23Z

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

haucongle · 2019-10-15T09:12:41Z

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 · 2019-10-15T11:05:28Z

@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 · 2019-10-15T14:19:01Z

@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 · 2019-10-15T22:37:04Z

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 · 2019-12-04T02:00:19Z

does it still not support for root ??

willmendesneto · 2019-12-04T04:28:32Z

@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 · 2020-11-13T10:19:59Z

@willmendesneto I'm still getting the following error :

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

If 'ngx-skeleton-loader' is an Angular component, then verify that it is part of this module.
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 · 2020-11-15T05:41:20Z

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 · 2020-11-15T06:45:19Z

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 · 2020-11-15T07:02:18Z

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

silnose · 2020-12-23T15:16:35Z

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

jelitter · 2021-12-19T11:53:01Z

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 · 2021-12-20T20:49:41Z

@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 · 2022-07-27T03:45:29Z

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 · 2022-07-28T12:47:41Z

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 · 2023-10-30T15:46:14Z

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.

willmendesneto closed this as completed May 27, 2019

willmendesneto reopened this Nov 15, 2020

willmendesneto closed this as completed Nov 15, 2020

lukyncze mentioned this issue Oct 3, 2022

"Starting dev server" for a long time #123

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

tranvannhat commented May 10, 2019

willmendesneto commented May 18, 2019

willmendesneto commented May 27, 2019

rubenheymans commented Sep 28, 2019

haucongle commented Oct 15, 2019 •

edited

willmendesneto commented Oct 15, 2019

haucongle commented Oct 15, 2019 •

edited

willmendesneto commented Oct 15, 2019

LeentechDev commented Dec 4, 2019

willmendesneto commented Dec 4, 2019

Sayrai commented Nov 13, 2020

willmendesneto commented Nov 15, 2020

willmendesneto commented Nov 15, 2020 •

edited

willmendesneto commented Nov 15, 2020

silnose commented Dec 23, 2020 •

edited

jelitter commented Dec 19, 2021 •

edited

willmendesneto commented Dec 20, 2021

johnMyjourney commented Jul 27, 2022

willmendesneto commented Jul 28, 2022

vfioox commented Oct 30, 2023

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

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

Comments

tranvannhat commented May 10, 2019

willmendesneto commented May 18, 2019

willmendesneto commented May 27, 2019

rubenheymans commented Sep 28, 2019

haucongle commented Oct 15, 2019 • edited

willmendesneto commented Oct 15, 2019

haucongle commented Oct 15, 2019 • edited

willmendesneto commented Oct 15, 2019

LeentechDev commented Dec 4, 2019

willmendesneto commented Dec 4, 2019

Sayrai commented Nov 13, 2020

willmendesneto commented Nov 15, 2020

willmendesneto commented Nov 15, 2020 • edited

willmendesneto commented Nov 15, 2020

silnose commented Dec 23, 2020 • edited

jelitter commented Dec 19, 2021 • edited

willmendesneto commented Dec 20, 2021

johnMyjourney commented Jul 27, 2022

willmendesneto commented Jul 28, 2022

vfioox commented Oct 30, 2023

haucongle commented Oct 15, 2019 •

edited

haucongle commented Oct 15, 2019 •

edited

willmendesneto commented Nov 15, 2020 •

edited

silnose commented Dec 23, 2020 •

edited

jelitter commented Dec 19, 2021 •

edited