skip to Main Content

I’ve been having an issue trying to import material. I’ve used similar code to the examples they have on material.angular.io yet I get the "inject() must be called from an injection context…" error. I’ve just been trying to get this to work as a simple table since I’m mostly required to focus on the design part rather than the extensive functionality behind it.

main.ts

import { AppComponent } from './app/app.component';
import { bootstrapApplication } from '@angular/platform-browser';

bootstrapApplication(AppComponent).catch(err => console.error(err));

app.component.ts

import { Component } from '@angular/core';
import { MatTableModule } from '@angular/material/table';

interface brojInfo {
  broj: number,
  ime: string,
  prezime: string
}

var counter: brojInfo[] = [];

for (var i = 0; i <= 1000; i++) {
  counter.push({ broj: i, ime: "Name " + i, prezime: "Surname " + i });
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  standalone: true,
  imports: [MatTableModule]
})

export class AppComponent {
  displayedColumns: string[] = ['broj', 'ime', 'prezime'];
  dataSource = counter;
}

app.component.html

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="broj">
    <th mat-header-cell *matHeaderCellDef> Broj </th>
    <td mat-cell *matCellDef="let element"> {{element.broj}} </td>
  </ng-container>

  <ng-container matColumnDef="ime">
    <th mat-header-cell *matHeaderCellDef> Ime </th>
    <td mat-cell *matCellDef="let element"> {{element.ime}} </td>
  </ng-container>

  <ng-container matColumnDef="prezime">
    <th mat-header-cell *matHeaderCellDef> Prezime </th>
    <td mat-cell *matCellDef="let element"> {{element.prezime}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

I’m sorry if this question is too simple, but I’ve gone through all of the SO questions relating to this issue that Google showed me, the documentation itself, and I can’t for the love of it figure this out. This is my first rodeo with not only Angular, but front end itself. Thank you for your time.

I’ve tried multiple ways that I could find to possibly write the imports: [] part, even tried to make the app.module.ts file and use it instead of the app.component.ts file import in main.ts, but I still had the same error.

EDIT: Forgot to mention I also tried to add the paths: to tsconfig.app.json and that other thing (forgot the word) to angular.json that worked for some other peeps.

2

Answers


  1. Have a look at this issue on the Angular repo.

    Basically, you have a dependency issue, there is more than one instance @angular/core in your bundle.

    npm ls @angular/core should be able to give you some insights

    Login or Signup to reply.
  2. The code provided works fine, Please find below a working stackblitz, kindly modify the stackblitz and share back if the issue persists!

    Search your source code for some place you are using inject() maybe that will bring you closer to a solution!

    import { Component } from '@angular/core';
    import { bootstrapApplication } from '@angular/platform-browser';
    import { MatTableModule } from '@angular/material/table';
    import 'zone.js';
    
    interface brojInfo {
      broj: number;
      ime: string;
      prezime: string;
    }
    
    var counter: brojInfo[] = [];
    
    for (var i = 0; i <= 1000; i++) {
      counter.push({ broj: i, ime: 'Name ' + i, prezime: 'Surname ' + i });
    }
    
    @Component({
      selector: 'app-root',
      standalone: true,
      template: `
        <table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="broj">
        <th mat-header-cell *matHeaderCellDef> Broj </th>
        <td mat-cell *matCellDef="let element"> {{element.broj}} </td>
      </ng-container>
    
      <ng-container matColumnDef="ime">
        <th mat-header-cell *matHeaderCellDef> Ime </th>
        <td mat-cell *matCellDef="let element"> {{element.ime}} </td>
      </ng-container>
    
      <ng-container matColumnDef="prezime">
        <th mat-header-cell *matHeaderCellDef> Prezime </th>
        <td mat-cell *matCellDef="let element"> {{element.prezime}} </td>
      </ng-container>
    
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
      `,
      imports: [MatTableModule],
    })
    export class App {
      displayedColumns: string[] = ['broj', 'ime', 'prezime'];
      dataSource = counter;
    }
    
    bootstrapApplication(App);
    

    stackblitz

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search