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
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 insightsThe 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!stackblitz