Error NG0203 when trying to import material

Issue

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.

EDIT 2: The error specifically appears when I put the imports: [MatTableModule] line

Solution

I have found the answer! Since this project was made with a VS2022 template, the Package Manager Console decided to install the damn @angular/material package in the main directory of the project where the solution file is rather than the actual subfolder where the package.json is.

Answered By - Baltr