Angular 显示分表页

Question

Ive been using angular for a while took a year break to do some other stuff, then coming back to develop a new website i was developing a website which seemed to be working fine, until i tried importing the mat-table and all its dependencies.

here is my.ts code for the maincomponent i have

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {MatTableModule} from '@angular/material/table';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

as soon as i remove the MatTableModule line in the imports part. the page shows back as usual again.

.ts file

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
}

.html file

    <!-- Toolbar -->
<div class="toolbar" role="banner">
  <img
    width="40"
    alt="game logo"
    src="https://gamepedia.cursecdn.com/valorant_esports_gamepedia_en/thumb/d/d9/Logo_square.png/123px-Logo_square.png?version=4e7ad8c9f85ac6ace6fa98cf2eecdbeb"
  />
  <span>Valorant LFG</span>
    <div class="spacer"></div>
    <!--anything for the right side of toolbar-->
</div>

<div class="content" role="main">
  <!-- Options -->
  <h2>Create a valorant team of your own, allowing other playerrs to join you</h2>

  <div class="card-container">

    <a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
      <img class="createteamicon" src="https://image.flaticon.com/icons/png/512/1189/1189206.png" alt="handshake" width="45" height="45">

      <span>Create Team</span>
    </a>

  </div>

  <div>
    <h2>Current LFG Requests, resets after 24 hours</h2>
  </div>

</div>
<router-outlet></router-outlet>

im sure ive done something very small but this is my small issue atm.

this is the console error on chrome

https://gyazo.com/05a62301b4937a8669690f1c2168f32b

if you have any answers to this it would be greatly appreciated, thanks

Answer 1

You could refer to the following tutorial for a detailed explanation of how to use the Material Data-Table Module.

https://www.techiediaries.com/angular-material-table/

Answer 2

add angular material to ur project

ng add @angular/material 
npm i 
ng serve 

Answer 3

I still dont know what i did, but i made a new project and installed the materials and imported tables again and it worked this time so i just copied the files over to that one and it works