Cannot find name 'module'

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

Gustavo Morais · Accepted Answer · 2019-02-09 16:57:18Z

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:

Angular Material(My favorite) - https://material.angular.io/components/table/examples
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.

answered Feb 9, 2019 at 16:57

Gustavo Morais

5886 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mohan Rahatekar Over a year ago

Thanks a lot for your response @Gustavo Morais sir. But to get rid of that compiler configuration and all those things I have tried with angular 5 command of data table "npm i angular5-data-table --save "and imported from the same in app.module.ts. now it is compiling but showing this runtime error: unexpected closing tag "data-table" I ave checked admin-product.component.html file but I am not getting whre I made the mistake. Can you please help me out on this?

Gustavo Morais Over a year ago

In the .html you've posted you have this tags: <data-table-coloumn [property]="'title'" [header]="'title'" [sortable]="true" [resizable]="true" > it this the word column is written wrong, perhaps try to fix it and see if it fixes the problem. Like this: <data-table-column [property]="'title'" [header]="'title'" [sortable]="true" [resizable]="true" >

Mohan Rahatekar Over a year ago

Yes sir I corrected that mistake. Now the data table is showing the information but it is showing only currency info of products in the table. how can I get all info that is products along with its price with edit option in each row. where I need to modify the code?? Can you please tell me?? @Gustavo Morais

Mohan Rahatekar Over a year ago

it is showing only one column that is title and in the title column it is showing prices of the products. I want in title column the name of the product and in the price column the price of the product.@Gustavo Morais

Gustavo Morais Over a year ago

Check your Product model if it's written exactly as you use here [property]="'price'" and [property]="'title'", make sure the items variable has this items written like this. Also, update your code in the question or open a new question because It will be easier for you to share your new errors.

|

Collectives™ on Stack Overflow

Cannot find name 'module'

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related