Ionic 2.0 tabs project error generating main.js.map?

ozexpert · January 26, 2017, 6:15am

I did the following

ionic start --v2 myApp tabs
ionic serve --prod

then i get below error… same with my project, so i tried with the tabs project, but same failure

— update — “someone didn’t like my image copy&paste”

Error: Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/youngpark/CIF/oneverse-one-v2-2/src/app/main.js.map'
    at Error (native)
url: http://localhost:8100/build/main.js
line: 73
column: 1
error: Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/youngpark/CIF/oneverse-one-v2-2/src/app/main.js.map'
    at Error (native)

Any clue??? it works fine with ionic serve or ionic run android, but fails if i append --prod option.

ozexpert · January 26, 2017, 6:23am

Looks like if I do ionic serve under /build/ there is main.js.map file. However, if I use --prod then the map file is not generated. Unsure how this works…

tycho01 · January 26, 2017, 7:49am

I’ve actually been running into this same issue, on both a Windows and a Mac machine, persistent across various kinds of reinstalls… I’ve yet to really understand where it’s coming from as well; most Google hits appear related to Angular-CLI rather than Ionic.

ozexpert · January 26, 2017, 8:01am

Hi. What is your angular cli version?

tycho01 · January 26, 2017, 8:15am

I’m at 1.0.0. I just realized it had to do with our custom webpack handling though, as we’d tried to add babel for async-await support. That way, manually running a tsc compile helped to generate the sourcemap files.

ozexpert · January 26, 2017, 4:53pm

ionic doesn’t depend on angular-cli, right?
I’m still stuck, i tried fresh installing ionic cli, but no luck. I still get that error thrown from main.js looking for main.js.map file when --prod.

I’m using ionic CLI v 2.2.1

mhartington · January 26, 2017, 4:59pm

You can not run serve with the --prod flag.
it’s not setup to work that way

ozexpert · January 26, 2017, 5:09pm

I see, i did that because when i do ionic run android --prod i get blank screen. So i was trying to debug what’s going on.
however, without --prod, application runs fine. Need to know what’s going on. How can I debug in this case??

I’m sure it’s some sort of minification or compressing issue.

ozexpert · January 26, 2017, 5:22pm

Or is there an issue with the scss compiler? seems the app is working but seeing blank screen.

mhartington · January 26, 2017, 5:39pm

Its not easy to tell, but run through your app and double check everything. Chances are there’s a typescript error you are missing or some out put that you are missing.

ozexpert · January 26, 2017, 6:19pm

I can see that when using --prod those files under /www/build/ are very much compressed.
Is there easy way to run those with ionic serve ? skipping to generate build file, but use files that are already built?

Then i might be able to run from browser with the compressed files. Right?

From RC3 - my app’s loading time was 3-4 seconds. After the update with ionic 2.0 lib, loading time doubled to 8-9 seconds (without --prod option). I’ve heard many ppl saying use --prod and app will be faster than ever. So would love to try that but with the white screen … i can’t do much.

I’m capturing possible errors in the JS, and those outputs are the same with and without --prod option.
It could be a problem in the JS, or i am guessing it might be minified css have a problem.

mhartington · January 26, 2017, 6:39pm

running the prod build.
Sure you can run those files if you start a simple server. Simple Python server, httpster, or something else. But this will not tell you anything new that you could not see if you connected the dev tools and check the dev logs there.

it is probably not a css error as that would be pretty visible even in dev builds.
Whats your package.json look like?

ozexpert · January 26, 2017, 6:50pm

this is my package.json

{
  "name": "ProjectOne",
  "author": "ProjectOne",
  "homepage": "https://project.one/",
  "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",
    "electron": "electron .",
    "electron dist": "electron ."
  },
  "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",
    "chance": "^1.0.4",
    "crypto-js": "^3.1.6",
    "imgcache": "^0.2.1",
    "ionic-angular": "2.0.0",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26",
    "sw-toolbox": "3.4.0",
    "make-9patched-splash-ionic": "0.0.7",
    "moment": "^2.15.1",
    "ng2-translate": "^3.1.1",
    "pouchdb": "^6.0.6",
    "pouchdb-adapter-cordova-sqlite": "^1.0.0",
    "pouchdb-authentication": "^0.5.5",
    "pouchdb-find": "^0.10.4",
    "version_compare": "0.0.3"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.0.0",
    "electron": "^1.4.2",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "description": "ProjectOne: An Ionic project",
  "main": "electron.js"
}

mhartington · January 26, 2017, 6:54pm

Hmm, thought something would be there.
Still, run the app on ios or android with the prod build flag and attach the dev tools.
You need to debug once it’s on the device to figure it out.

Or run through the rest of the build flags,

ozexpert · January 26, 2017, 6:58pm

I’ll follow the steps again, but doing ionic build ios --prod works with no issue. Hmm… wonder why for android.

mhartington · January 26, 2017, 7:14pm

debug debug debug

tycho01 · January 27, 2017, 4:00am

Right, it doesn’t depend on that.
So you ran tsc and manually confirmed the sourcemap files exist where
it’s looking for them, huh? I don’t really know how --prod differs either
– I imagine the place it’s looking for them is the same, right?

ozexpert · January 27, 2017, 4:49pm

Looks like if i do ionic run android --aot then it works.
might be a minification problem??

If so, for production release, would using --aot only instead of --prod would work?

mhartington · January 27, 2017, 4:56pm

Wait… so I’m not following.
When you run on a device with

ionic run android --prod

Does your app work?
Is it just not generating a map file?

ozexpert · January 27, 2017, 5:02pm

okay. so i was asking that when i do ionic serve --prod doesn’t work and browser complains that main.js.map is missing.

However, you told me that ionic serve doesn’t work with --prod option. So ignore me about the missing main.js.map. I think the problem is something else.

For clarification, here’s the summary.

ionic serve works
ionic run android works
ionic run android --aot works, i believe this doesn’t minify the code
ionic run android --prod DOESN’T WORK.

So it might be the minification problem i guess?? I tried copy pasting the main.js file after minification to online tools like http://jsonlint.com/, it gives me an error, but i’m not confident that whether validating minification code through those online linter is the right way to validate.