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


#1

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.


#2

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…


#3

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.


#4

Hi. What is your angular cli version?


#5

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.


#6

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.:cold_sweat:

I’m using ionic CLI v 2.2.1


#7

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


#8

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.


#9

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


#10

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.


#11

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.


#12

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?


#13

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"
}

#14

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,


#15

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


#16

debug debug debug :bug:


#17

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?


#18

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?


#19

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?


#20

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.

  1. ionic serve works
  2. ionic run android works
  3. ionic run android --aot works, i believe this doesn’t minify the code
  4. 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.