Angular Material Table (Cannot find module , Could not find template file 'table-sorting-example.html'.)

Question

app.module

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {MaterialExampleModule} from '../material.module';
import {TableSortingExample} from './table-sorting-example';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatNativeDateModule} from '@angular/material/core';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [TableSortingExample],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    MatNativeDateModule,
    MaterialExampleModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [TableSortingExample],
})
export class AppModule {}

app.component

import {LiveAnnouncer} from '@angular/cdk/a11y';
import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {MatSort, Sort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

/**
 * @title Table with sorting
 */
@Component({
  selector: 'table-sorting-example',
  styleUrls: ['table-sorting-example.css'],
  templateUrl: 'table-sorting-example.html',
})
export class TableSortingExample implements AfterViewInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  constructor(private _liveAnnouncer: LiveAnnouncer) {}

  @ViewChild(MatSort) sort: MatSort;

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

  
  announceSortChange(sortState: Sort) {
    
    if (sortState.direction) {
      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
    } else {
      this._liveAnnouncer.announce('Sorting cleared');
    }
  }
}

Error

./src/app/app.module.ts:5:0-59 - Error: Module not found: Error: Can't resolve '../material.module' in 'D:\Study material\courses\Angular and Net Core\Angular files\Tablecreation\src\app'

./src/app/app.module.ts:6:0-62 - Error: Module not found: Error: Can't resolve './table-sorting-example' in 'D:\Study material\courses\Angular and Net Core\Angular files\Tablecreation\src\app'

Error: src/app/app.module.ts:5:37 - error TS2307: Cannot find module '../material.module' or its corresponding type declarations.

5 import {MaterialExampleModule} from '../material.module';
                                      ~~~~~~~~~~~~~~~~~~~~


Error: src/app/app.module.ts:6:35 - error TS2307: Cannot find module './table-sorting-example' or its corresponding type declarations.     

6 import {TableSortingExample} from './table-sorting-example';
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~


Error: src/app/app.module.ts:12:17 - error NG1010: Value at position 0 in the NgModule.declarations of AppModule is not a reference        
  Value could not be determined statically.

12   declarations: [TableSortingExample],
                   ~~~~~~~~~~~~~~~~~~~~~

  src/app/app.module.ts:12:18
    12   declarations: [TableSortingExample],
                        ~~~~~~~~~~~~~~~~~~~
    Unknown reference.




× Failed to compile.

Just started with angular and was learning angular table. Its a basic angular material table with only app component I have got error "Cannot find module" and Could not find template file 'table-sorting-example.html'. The following are the files . Still going through the basics . stuck - help much appreciated!

Answer 1

Your only error is you have copied the table-sorting-example component code to app.component.ts according to the provided snippet.

Error on line no 6 of app.module now is because you are trying to import TableSortingExample from ./table-sorting-example and in actual you have pasted the code in app.component

import {TableSortingExample} from './table-sorting-example';

if you want your code to be in app.component only then change the line no. 6 of app.module as below

import {TableSortingExample} from './app.component';

Also make sure import {MaterialExampleModule} from '../material.module'; is imported with all the required material modules