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 protected]", 
        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!

Hi! Can you provide the code within the UserInfoModal.ts file? And, can you also try to imports the right file -> import { UserInfoModel } from '../models/UserInfoModel'; ? — Raphaël Balet
– Raphaël Balet, Commented Nov 1, 2020 at 13:36

yazantahhan · Accepted Answer · 2020-11-01 13:46:16Z

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

edited Nov 1, 2020 at 13:46

answered Nov 1, 2020 at 13:40

yazantahhan

3,1101 gold badge16 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related