Angular shows table breaks page

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

it comes through all fine on the console saying compiled succesfully like usual — Isaac Lyne, May 15 '20 at 04:57
Did you happen to run ```$ cd your_angular_project$ ng add @angular/material ``` before Importing the Angular Material Data-Table Module? — thommu, May 15 '20 at 05:02
Where is your page's component.ts and html parts? This is just app.module. Please share AppComponent.html and ts codes too — mr. pc_coder, May 15 '20 at 05:02
@IsaacLyne, can you please confirm which version of angular app you have and which version of @angular/material package you have installed ? — Ankit Prajapati, May 15 '20 at 05:02
@IsaacLyne https://stackblitz.com/edit/angular-ivy-k83ww6 it seems to be working — Luckyy, May 15 '20 at 05:09
@luckyy it must be in the other code then for it to still not be working for me — Isaac Lyne, May 15 '20 at 05:13
https://gyazo.com/05a62301b4937a8669690f1c2168f32b this is the console error on chrome — Isaac Lyne, May 15 '20 at 05:38
@IsaacLyne that time you said there were no errors, can you please edit the editor link I have sent you. Just add html and ts code to reproduce it. Without viewing the error code it is difficult to find out. — Luckyy, May 15 '20 at 07:23
I used your given HTML file as well. It is still working fine. — Luckyy, May 15 '20 at 07:29

thommu · Answer 1 · 2020-05-16T00:39:00.360

0

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/

edited May 16 '20 at 00:39

answered May 15 '20 at 05:05

thommu

86
5

dont think i did ng add before hand – Isaac Lyne May 15 '20 at 05:13

score 0 · Answer 2 · answered May 15 '20 at 05:18

0

add angular material to ur project

ng add @angular/material 
npm i 
ng serve

answered May 15 '20 at 05:18

ahmed hlaimi

51
6

just did and it didnt seem to change anything, still white screen – Isaac Lyne May 15 '20 at 05:23
can u share ur console screen in ur browser – ahmed hlaimi May 15 '20 at 05:26
https://gyazo.com/6715d66af41bac6104fc540322973a42 https://gyazo.com/81b06562275ed3c2a368545dbe14f5e3 – Isaac Lyne May 15 '20 at 05:31
https://gyazo.com/05a62301b4937a8669690f1c2168f32b console error on chrome – Isaac Lyne May 15 '20 at 05:39
check the issues here https://stackoverflow.com/questions/51485868/inject-must-be-called-from-an-injection-context – ahmed hlaimi May 15 '20 at 08:00

score 0 · Answer 3 · answered May 15 '20 at 20:55

0

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

answered May 15 '20 at 20:55

Isaac Lyne

190
1
3
18

Angular shows table breaks page

3 Answers3