I get this error in my angular-cli project 'Cannot find module'

Question

I am following a little Angular-cli tutorial, and in one of my component TS file, I import a class from another folder, but apparently it cannot be reached.

Here is my component file (display-user-data-form.component.ts):

import { Component, OnInit } from '@angular/core';
import { UserInfoModel } from '../models';

@Component({
  selector: 'display-user-data-form',
  templateUrl: './display-user-data-form.component.html',
  styleUrls: ['./display-user-data-form.component.css']
})
export class DisplayUserDataFormComponent implements OnInit {
    
    user: UserInfoModel = new UserInfoModel({guid: "D21ds12x", 
        customerUid: "cust2dsa12dsa", 
        first_name: "John", 
        last_name: "Doe", 
        email: "email@email.com", 
        zipcode: 10283,
        password: "Idasn2x2#"});

  constructor() { }

  ngOnInit(): void {
  }

}

You see I am importing a class called "UserInfoModel" from a folder named "models".

My file tree looks like this in the 'app' folder:

app
-display-user-data-form
--display-user-data-form.component.ts
--display-user-data-form.component.html
--display-user-data-form.component.css
-models
--UserInfoModel.ts

I really don't know why it can't find the module and can't figure out why the path I give is not correct.

Thanks in advance for your answers!

Answer 1

You need to specify the file names too. As the UserInfoModel in import { UserInfoModel } is actually the class name, so you need to specify which file you will get your class from, so it will be like this:

import { UserInfoModel } from '../models/UserInfoModel';

The first UserInfoModel is the class name and the second one is the file name

However, there is an option to not include the file name using the Barrel Import. You can read more about it here