找不到名称“模块”

Question

I am working on an Angular 2 project. I am trying to add data-table component in my project. But facing above error at the time of compilation.what needs to be done to get the required output. please guide me in a right direction.

 admin-products.component.ts import { Component, OnInit, OnDestroy } from '@angular/core'; import { ProductService } from 'src/app/product.service'; import { Subscription } from 'rxjs'; import { Product } from 'src/app/models/product'; import { DataTableResource } from 'angular-4-data-table'; @Component({ selector: 'app-admin-products', templateUrl: './admin-products.component.html', styleUrls: ['./admin-products.component.css'] }) export class AdminProductsComponent implements OnInit,OnDestroy { products: Product[]; filteredProducts: any[]; subscription: Subscription; tableResource:DataTableResource<Product>; items: Product[] = []; itemCount: Number; constructor(private productService:ProductService) { this.subscription = this.productService.getAll(). subscribe(products =>{ this.filteredProducts= this.products = products; this.initializeTable(products); }); } private initializeTable(products:Product[]){ this.tableResource.query({ offset:0}) .then(items => this.items = items); this.tableResource.count() .then(count => this.itemCount = count); } reloadItems(params){ if(!this.tableResource) return; this.tableResource.query(params) .then(items => this.items = items); } filter(query: string){ this.filteredProducts = (query) ? this.products.filter(p => p.title.toLowerCase().includes(query.toLowerCase())) : this.products; } ngOnDestroy(){ this.subscription.unsubscribe() } ngOnInit() { } }

 admin-products.component.html <p> <a routerLink="/admin/products/new" class="btn btn-primary">New Product</a> </p> <p> <input #query (keyup)="filter(query.value)" type="text" class="form-control" placeholder="Search..."> </p> <data-table [items]="items" [itemCount]="itemCount" (reload)="reloadItems($event)" > <data-table-column [property]="'title'" [header]="'title'" [sortable]="true" [resizable]="true" > <data-table-column [property]="'price'" [header]="'Price'" [sortable]="true" [resizable]="true" > <ng-template #dataTableCell let-item="item"> {{item.price | currency:'USD':true}} </ng-template> </data-table-column> <data-table-column [property]="'$key'" > <ng-template #dataTableCell let-item="item"> <a [routerLink]="['/admin/products', item.$key]">Edit</a> </ng-template> </data-table-column> </data-table>

 app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {AngularFireModule} from 'angularfire2'; import {AngularFireDatabaseModule} from 'angularfire2/database'; import {AngularFireAuthModule} from 'angularfire2/auth'; import {RouterModule} from '@angular/router'; import{NgbModule} from '@ng-bootstrap/ng-bootstrap'; import { BsNavbarComponent } from './bs-navbar/bs-navbar.component'; import { HomeComponent } from './home/home.component'; import { ProductsComponent } from './products/products.component'; import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component'; import { CheckOutComponent } from './check-out/check-out.component'; import { OrderSuccessComponent } from './order-success/order-success.component'; import { MyOrdersComponent } from './my-orders/my-orders.component'; import { AdminProductsComponent } from './admin/admin-products/admin-products.component'; import { AdminOrdersComponent } from './admin/admin-orders/admin-orders.component'; import { LoginComponent } from './login/login.component'; import {FormsModule} from '@angular/forms'; import {CustomFormsModule} from 'ng2-validation'; import {DataTableModule} from 'angular-4-data-table'; import { AppComponent } from './app.component'; import { environment } from 'src/environments/environment'; import { AuthService } from './auth.service'; import { AuthGuard as AuthGuard } from './auth-guard.service'; import { UserService } from './user.service'; import { AdminAuthGuard as AdminAuthGuard } from './admin-auth-guard.service'; import { ProductFormComponent } from './admin/product-form/product-form.component'; import { CategoryService } from './category.service'; import { ProductService } from './product.service'; @NgModule({ declarations: [ AppComponent, BsNavbarComponent, HomeComponent, ProductsComponent, ShoppingCartComponent, CheckOutComponent, OrderSuccessComponent, MyOrdersComponent, AdminProductsComponent, AdminOrdersComponent, LoginComponent, ShoppingCartComponent, ProductFormComponent ], imports: [ BrowserModule, FormsModule, CustomFormsModule, DataTableModule, AngularFireModule.initializeApp(environment.firebase), AngularFireDatabaseModule, AngularFireAuthModule, NgbModule.forRoot(), RouterModule.forRoot([ {path: '', component: HomeComponent}, {path: 'products', component: ProductsComponent}, {path: 'shopping-cart', component: ShoppingCartComponent}, {path: 'login', component: LoginComponent}, {path: 'check-out', component: CheckOutComponent,canActivate:[AuthGuard]}, {path: 'order-success', component: OrderSuccessComponent, canActivate:[AuthGuard]}, {path: 'my/orders',component: MyOrdersComponent,canActivate:[AuthGuard]}, {path: 'admin/products/new', component:ProductFormComponent,canActivate:[AuthGuard,AdminAuthGuard]}, {path: 'admin/products/:id', component:ProductFormComponent,canActivate:[AuthGuard,AdminAuthGuard]}, {path: 'admin/products', component: AdminProductsComponent,canActivate:[AuthGuard,AdminAuthGuard]}, {path: 'admin/orders', component: AdminOrdersComponent,canActivate:[AuthGuard,AdminAuthGuard]} ]) ], providers: [ AuthService, AuthGuard, AdminAuthGuard, UserService, CategoryService, ProductService ], bootstrap: [AppComponent] }) export class AppModule { }

should be done to get the required output . please guide me in a right direction

Answer 1

This seems to be related to compiler configuration problems. You're trying to add external components and for that you need to make some modifications to your angular project like in your tsconfig.json file. These usually are provided by the library documentation. See this related question for instance: TypeScript error in Angular2 code: Cannot find name 'module'

However, since you're trying to use a table I would highly recommend you some well known Component Libraries for Angular, all of them have well documented and explained examples:

1. Angular Material(My favorite) - https://material.angular.io/components/table/examples
2. Prime NG - https://www.primefaces.org/primeng/#/table

If you decide to do that, just follow the Getting Started of any of them and you should be able to use a well built Table Component and more easily find the solution to related bugs.