Ionic: Error: Module build failed: Error: ENOENT: no such file or directory

3
votes

I am using Ionic, and get the following error:

Runtime Error Uncaught (in promise): Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/richardmarais/Development/ionic/theWhoZoo/src/pages/model/ratingModel.js'

The error is a result of this line of code:

this.ratingModel = new RatingModel();

When I remove this line, I don't get the error.

ratingModel.ts

import { Injectable } from "@angular/core";
import { PersonModel } from './personModel';
import { JobModel } from './jobModel';

@Injectable()
export class RatingModel {
        public id: number = null;
        public job: JobModel = null;
        public review: string = null;
        public rating: number = null;
        public reviewDate: number = null;
        public time: string = null;
        public person: PersonModel = null;
        public anonymous: number = null;

        constructor() {

        }
}

Reading other forums, people are getting this error due to the case not matching in their imports, but I have checked mine, and they do match.

import { RatingModel } from '../model/ratingModel';

However, I have noticed something strange in my IDE (Visual Studio Code):

enter image description here

As you can see, in the search results, there are two files for the object, ratingModel.ts and RatingModel.ts. But when I check the actual files system, there is only on file, ratingModel.ts:

enter image description here

Question

Does anyone know what and how to resolve what looks like possibly a bug or fault here?

Thanks

More info:

global packages:

    @ionic/cli-utils : 1.0.0
    Cordova CLI      : 6.4.0 
    Ionic CLI        : 3.0.0

local packages:

    @ionic/app-scripts              : 1.3.0
    @ionic/cli-plugin-cordova       : 1.0.0
    @ionic/cli-plugin-ionic-angular : 1.0.0
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v7.10.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002 
    ios-deploy : not installed
    ios-sim    : not installed
2
visual-studioangularionic-frameworkionic2

2 Answers

3
votes

This error occurred when your component can't be found with your app.module settings.

Follow these steps to solve your problem:

  1. Right click on your web browser and select inspect (in this case I use chrome)
  2. In the source tab, navigate to localhost:8100 (the default port for running ionic)
  3. Go to src -> pages and open corresponded page(in this case 'model')
  4. The name of .ts file and path must be as same as the name and path of the added import path in app.module.ts

    In this case, there isn't model/ratingModel.ts

    be aware : The path is case sensitive (maybe the .ts file is RatingModel)
2
votes

Apologies, my bad. I just found another file that was importing the object with the incorrect case. It does appear as if there is no issue, and I had a bug in my code.

import { RatingModel } from '../model/RatingModel';