Ionic2 looking for js file where ts file exists

Question

I am using Ionic 2, and I get the following error:

Error: Module build failed: Error: ENOENT: no such file or directory, open

'E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\pages\model\mapRangeModel.js' at Error (native)

As you can see, it is looking for a js file. But that obviously does not exist under the src folder. It has the equivalent ts file.

i.e. This file does exist:

\src\pages\model\mapRangeModel.ts

from build\main.js:

/***/ function(module, exports) {

throw new Error("Module build failed: Error: ENOENT: no such file or directory, open 'E:\\Development\\IDE\\ionic-apps\\theWhoZoo-chat\\src\\pages\\model\\mapRangeModel.js'\n    at Error (native)");

/***/ },

More info:

I am also getting the following error in my CLI when I run ionic serve:

[12:26:34]  watch failed: A watch configured to watch the following paths failed to start. It likely that a file
            referenced does not exist: E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\assets\**\*,
            E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\index.html,
            E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\manifest.json,
            E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\service-worker.js,
            E:\Development\IDE\ionic-apps\theWhoZoo-chat\node_modules\ionicons\dist\fonts\**\*,
            E:\Development\IDE\ionic-apps\theWhoZoo-chat\node_modules\ionic-angular\fonts\**\*,
            E:\Development\IDE\ionic-apps\theWhoZoo-chat\node_modules\ionic-angular\polyfills\polyfills.js,
            E:\Development\IDE\ionic-apps\theWhoZoo-chat\node_modules\sw-toolbox\sw-toolbox.js

Ionic Info:

Your system information:

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.2
Xcode version: Not installed

package.json

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "@types/googlemaps": "^3.25.42",
    "angular2-moment": "^1.1.0",
    "angularfire2": "^2.0.0-beta.7.1-pre",
    "firebase": "^3.6.4",
    "ionic-angular": "2.0.0-rc.4",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.0.0",
    "typescript": "^2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "theWhoZoo-chat: An Ionic project"
}

Any help appreciated.

Answer 1

In my case, the problem was that I had navigated to my project using case-insensitive directory names in the windows command prompt, like so:

"C:/Users/.../my documents/project1/"

which was no problem for the Windows command prompt (Windows being case-insensitive regarding directories), but when the Ionic scripts fetched the current working directory, Windows returns the incorrectly-cased directory and this error is eventually thrown. I had to navigate directory using the correct name & case (the use of the tab shortcut key is always advised):

"C:/Users/.../My Documents/Project1/"

Answer 2

The above error was caused due to a case sensitivity issue on the imports.

In my example, I was doing the following:

import { MapRangeModel } from '../model/maprangeModel';

when it should have rather been:

import { MapRangeModel } from '../model/mapRangeModel';