I have installed PrimeNG to get there table after I followed the documentation angular didn't read and give me this error "------- p-table' is not a known element:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AccordionModule } from 'primeng/accordion'; //accordion and accordion tab
import { MenuItem, MessageService } from 'primeng/api'; //api
import { TableModule } from 'primeng/table';
import { AppRoutingModule } from './app.routing';
import { ComponentsModule } from './components/components.module';
import { TreeModule } from 'primeng/tree';
import { AppComponent } from './app.component';
import { ToastModule } from 'primeng/toast';
import { CalendarModule } from 'primeng/calendar';
import { SliderModule} from 'primeng/slider';
import { MultiSelectModule } from 'primeng/multiselect';
import { ContextMenuModule } from 'primeng/contextmenu';
import { DialogModule } from 'primeng/dialog';
import { ButtonModule } from 'primeng/button';
import { DropdownModule } from 'primeng/dropdown';
import { ProgressBarModule } from 'primeng/progressbar';
import { CommandeService } from "app/shared/commandes.service";
import { InputTextModule } from 'primeng/inputtext';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { TableListComponent } from './table-list/table-list.component';
import { TypographyComponent } from './typography/typography.component';
import { IconsComponent } from './icons/icons.component';
import { MapsComponent } from './maps/maps.component';
import { NotificationsComponent } from './notifications/notifications.component';
import { UpgradeComponent } from './upgrade/upgrade.component';
import {
AgmCoreModule
} from '@agm/core';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
@NgModule({
imports: [
BrowserAnimationsModule,
FormsModule,
TreeModule,
ReactiveFormsModule,
HttpClientModule,
TableModule,
CalendarModule,
SliderModule,
DialogModule,
MultiSelectModule,
ContextMenuModule,
DropdownModule,
ButtonModule,
ToastModule,
InputTextModule,
ProgressBarModule,
HttpClientModule,
FormsModule,
ComponentsModule,
RouterModule,
AppRoutingModule,
AgmCoreModule.forRoot({
apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
})
],
declarations: [
AppComponent,
AdminLayoutComponent,
],
providers: [CommandeService,MessageService],
bootstrap: [AppComponent]
})
export class AppModule { }
my table-list component.ts
import { Component, OnInit } from '@angular/core';
import { MessageService } from "primeng/api";
import{ commandes } from '../shared/commandes.model.ts/commandes.models'
import { CommandeService } from "app/shared/commandes.service";
import { TableModule } from 'primeng/table';
@Component({
selector: 'app-table-list',
templateUrl: './table-list.component.html',
styleUrls: ['./table-list.component.css']
})
export class TableListComponent implements OnInit {
constructor(private commandesrService: CommandeService) {}
commandes: commandes[];
heure: any[];
loading: boolean = true;
activityValues: number[] = [0, 100];
ngOnInit() {
this.commandesrService.getlistbyID().subscribe(
(data: commandes[]) => {
console.log(data);
this.commandes = data;
});
}}
my package.json
{
"name": "material-dashboard-angular",
"version": "2.5.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && ng serve -o"
},
"engines": {
"node": "6.11.1",
"npm": "3.10.9"
},
"private": true,
"dependencies": {
"@agm/core": "^1.1.0",
"@angular/animations": "10.1.4",
"@angular/cdk": "10.2.4",
"@angular/common": "10.1.4",
"@angular/compiler": "10.1.4",
"@angular/core": "10.1.4",
"@angular/forms": "10.1.4",
"@angular/material": "10.2.4",
"@angular/platform-browser": "10.1.4",
"@angular/platform-browser-dynamic": "10.1.4",
"@angular/platform-server": "10.1.4",
"@angular/router": "10.1.4",
"@fullcalendar/core": "^5.4.0",
"ajv": "6.12.5",
"arrive": "2.4.1",
"bootstrap": "4.5.2",
"bootstrap-material-design": "4.1.3",
"bootstrap-notify": "3.1.3",
"chart.js": "^2.9.4",
"chartist": "0.11.4",
"classlist.js": "1.1.20150312",
"core-js": "3.6.5",
"eslint": "^7.10.0",
"express": "4.17.1",
"googleapis": "61.0.0",
"hammerjs": "2.0.8",
"jquery": "3.5.1",
"moment": "2.29.1",
"perfect-scrollbar": "1.5.0",
"popper.js": "1.16.1",
"primeicons": "^4.1.0",
"primeng": "^11.0.0",
"quill": "^1.3.7",
"rxjs": "6.6.3",
"rxjs-compat": "6.6.3",
"web-animations-js": "2.3.2",
"zone.js": "0.11.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.1001.4",
"@angular/cli": "10.1.4",
"@angular/compiler-cli": "10.1.4",
"@angular/language-service": "10.1.4",
"@types/bootstrap": "4.5.0",
"@types/chartist": "0.11.0",
"@types/googlemaps": "3.39.14",
"@types/jasmine": "3.5.14",
"@types/jquery": "3.5.2",
"@types/node": "14.11.5",
"codelyzer": "6.0.1",
"jasmine-core": "3.6.0",
"jasmine-spec-reporter": "6.0.0",
"karma": "5.2.3",
"karma-chrome-launcher": "3.1.0",
"karma-cli": "2.0.0",
"karma-coverage-istanbul-reporter": "3.0.3",
"karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.5.4",
"protractor": "7.0.0",
"ts-node": "9.0.0",
"tslint": "6.1.3",
"typescript": "4.0.3"
}
}
I am here for any further question of information I can give you
What I have seen so far. The following import directly in your component will not work. So you can remove it.
import { MessageService } from "primeng/api";
import{ commandes } from '../shared/commandes.model.ts/commandes.models'
import { CommandeService } from "app/shared/commandes.service";
import { TableModule } from 'primeng/table'; <---------- This is not neeeded
@Component({
selector: 'app-table-list',
templateUrl: './table-list.component.html',
styleUrls: ['./table-list.component.css']
})
export class TableListComponent implements OnInit {
...
...}
I have checked your main module AppModule
CASE 1
If TableListComponent does belong to AppModule then it must be declared there. That would be the problem. Make the following correction in your AppModule.
@NgModule({
declarations: [
AppComponent,
AdminLayoutComponent,
.... <-----------Here it should be declared TableListComponent
],
providers: [CommandeService,MessageService],
bootstrap: [AppComponent]
})
export class AppModule { }
CASE 2
If TableListComponent does not belong to AppModule then it should belong to another module. Then in that other module you should have imported TableModule which should also be exported from you AppModule in exports[ ] and not imported which I don't see happening. If that is the case your AppModule should be like
import { TableModule } from 'primeng/table'; <-------------
@NgModule({
declarations: [
AppComponent,
AdminLayoutComponent],
exports: [ TableModule ] < ------------
providers: [CommandeService,MessageService],
bootstrap: [AppComponent]
})
export class AppModule { }
And then in the other module where TableListComponent belongs you must have
@NgModule({
declarations: [],
imports: [ TableModule ] < ------------
})
export class SomeModuleParentOfTableListComponent { }