Angular - Module parse failed: Unexpected token. You may need an additional loader to handle the result of these loaders

Question

I'm in new angular. I follow the angular course from Udemy. Angular in the course is old version but my version is up to date. Because of this, I am getting the following errors. Can you help me?

datasource.model.ts file:

import { Product } from "./product.model";

export class SimpleDataSource {
    private products:Product[];
    getProducts: any;

    constructor(){
        this.products = new Array<Product>(
            new Product(1,"Samsung S5","iyi telefon","1.jpg",1000),
            new Product(2,"Samsung S6","iyi telefon","2.jpg",2000),
            new Product(3,"Samsung S7","iyi telefon","3.jpg",3000),
            new Product(4,"Samsung S8","iyi telefon","4.jpg",4000),
            new Product(5,"Samsung S9","iyi telefon","5.jpg",5000)
        );
    }
}

getProducts(): Product[] {
    return this.products
}

function getProducts(): void {
    throw new Error("Function not implemented.");
}

product.model.ts file:

export class Product{
    constructor(
        public id?:number,
        public name?: string,
        public description?: string,
        public imageUrl?: string,
        public price?: number
    ){}
}

repository.model.ts file:

import { SimpleDataSource } from "./datasource.model";
import { Product } from "./product.model";


export class ProductRepository{
    private dataSource:SimpleDataSource;
    private products:Product[];

    constructor(){
        this.dataSource = new SimpleDataSource();
        this.products = new Array<Product>();
        this.dataSource.getProducts().forEach(p => this.products.push(p));
    }

    getProducts():Product[]{
        return this.products;
    }

    getProductsById(id:number):Product | undefined{
        return this.products.find(p=>p.id==id);
    }
}

Errors are:

./src/app/models/datasource.model.ts:8:8 - Error: Module parse failed: Unexpected token (8:8) File was processed with these loaders:

• ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
• ./node_modules/@ngtools/webpack/src/ivy/index.js You may need an additional loader to handle the result of these loaders. | } | getProducts();

Product[]; | { | return this.products;

Error: src/app/models/datasource.model.ts:18:14 - error TS1005: ';' expected.

18 getProducts(): Product[] { ~

Error: src/app/models/datasource.model.ts:18:24 - error TS1011: An element access expression should take an argument.

18 getProducts(): Product[] {

Error: src/app/models/datasource.model.ts:18:26 - error TS1005: ';' expected.

18 getProducts(): Product[] {