Ionic-app-scripts: Ionic2 - Failed to load resource: The requested URL was not found on this server.

[abomadi]

Hi, when trying to build a prod release it builds smoothly but when openning the app it gives the following error

Failed to load resource: The requested URL was not found on this server. file:///var/containers/Bundle/Application/39C211E1-ACD2-4798-96FF-8909F63DB55A/TestApp.app/www/build/main.js.map Failed to load resource: The requested URL was not found on this server.

command used to build this ionic build --prod --no-aot
Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.10
OS: macOS Sierra
Node Version: v7.0.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[michaelyuen]

Same problem. In my case, using ionic build --prod and ionic run --device --prod. main.js is output and references main.js.map, but the sourcemap is not output. I also tried removing the reference to the sourcemap, but that didn't work either.

I can run the app using ionic serve and ionic run --device.

With the prod flag, I notice ngc is one of the build tasks. Could it be related to that?

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002

[abomadi]

Any help please ?

[michaelyuen]

I _finally_ resolved my issue. It was the export of my app.module in the barrel file in my app folder. In main.js, I imported app.module from the barrel file. When I changed that import to the app.module file specifically, the prod build works.

For posterity:
Debugging was pretty difficult because there were not many indicators for debugging and those present weren't helpful.

• ionic serve worked
• ionic build / ionic run --device worked
• ionic build --prod would run to completion, not indicating any issue
• ionic run --device --prod would run and launch the app, display the splashscreen, then leave a white screen.
  
  
  
  • inspecting using safari logged an error (the one mentioned by OP): Failed to load resource: The requested URL was not found on this server.
  
  
  • the file specified was main.js.map
  
  
  • I could see in the DOM by the tag that the app never initialized
  
  

Hence my suspicion of the ngc build task. Googling resulted in various things being reported like font imports, uglifyjs, etc. Everything I tried didn't work. Eventually, I just went back to old commits and tried the production build until I found one that worked. From there I began basically reconstructing the app to its current state until I discovered the main.js import.

Another thing worth mentioning is that I updated the versions of all the packages my app uses. I played around with various combinations of package versions (based on other threads and reports), trying to determine if it may be in some way related. It turned out it wasn't, so now this is what my information looks like and it runs beautifully.

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3 Build version 8E162

@abomadi Does any of this sound familiar to your situation? What does your main.js look like? Do you use barrels similarly?

[abomadi]

@michaelyuen i really appreciate your help and sharing your case, my is app is a little bit big, however i am referencing the app.module directly no barrels.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

after building --prod i found that it's references in main.js

defineProperty(e,"__esModule",{value:!0});var i=n(61),r=n(551),o=n(0);n.i(o.enableProdMode)(),n.i(i.a)().bootstrapModuleFactory(r.AppModuleNgFactory)}]);
//# sourceMappingURL=/Users/user/Desktop/app/Src/app/www/build/main.js.map

This is the only place i found main.js.map requested, i tried to remove this line manually that app didn't report any errors but it did not initialize at all only blank white screen, i don't know honestly how to start debugging such case! also :

• ionic serve worked
• ionic build / ionic run --device worked
• ionic build --prod gives same error with blank screen

• ionic run --device --prod would run and launch the app, display the splashscreen, then leave a white screen.

  my app info
  Cordova CLI: 6.5.0
  Ionic Framework Version: 2.3.0
  Ionic CLI Version: 2.2.2
  Ionic App Lib Version: 2.2.1
  Ionic App Scripts Version: 1.2.3
  ios-deploy version: 1.9.0
  ios-sim version: 5.0.10
  OS: macOS Sierra
  Node Version: v7.0.0
  Xcode version: Xcode 8.2.1 Build version 8C1002

command output

ionic-app-scripts build "--device" "--prod"

[12:59:16] ionic-app-scripts 1.2.3
[12:59:16] build prod started ...
[12:59:16] clean started ...
[12:59:16] clean finished in 2 ms
[12:59:16] copy started ...
[12:59:16] ngc started ...
[12:59:45] ngc finished in 29.42 s
[12:59:45] preprocess started ...
[12:59:45] deeplinks started ...
[12:59:47] deeplinks finished in 2.27 s
[12:59:47] optimization started ...
[12:59:47] optimization finished in 7 ms
[12:59:47] preprocess finished in 2.28 s
[12:59:47] webpack started ...
[13:00:02] webpack finished in 14.26 s
[13:00:02] sass started ...
[13:00:02] transpile bundle started ...
[13:00:22] transpile bundle finished in 20.24 s
[13:00:22] uglifyjs started ...
[13:00:24] sass finished in 22.62 s
[13:00:24] cleancss started ...
[13:00:24] copy finished in 68.61 s
[13:00:32] cleancss finished in 7.71 s
[13:01:08] uglifyjs finished in 45.78 s
[13:01:08] postprocess started ...
[13:01:08] postprocess finished in 68 ms
[13:01:08] lint started ...
[13:01:08] build prod finished in 112.13 s
[13:01:20] lint finished in 12.15 s

OS project Code Sign Entitlements now set to: app/Resources/app.entitlements
Entitlements file is not in references section, adding it
Building project: /Users/user/Desktop/app/Src/app/platforms/ios/app.xcworkspace
    Configuration: Debug
    Platform: device
User defaults from command line:

Thanks

[expcapitaldev]

any news?

[abomadi]

Yes, most probably the break comes from Webpack mostly with the import definitions i have created a PR to enable webpack show the errors while transpiling, https://github.com/driftyco/ionic-app-scripts/pull/871
The above does not fix the .map resource but it can lead you to any breaks in your transpiling.

In my case the issue was from the import statement path case sensitive on Mac, the folders inside the solution were small letters but on mac directory were Capital ... using the modified script in the above PR will help you to know exactly where is your issue come from.

[grapemix]

1. It is not webpack's problem. We use rollup and still face this problem
2. It is also not the Mac's Capital case's problem too. We use Linux and still have this problem
3. This problem only shows in iOS and with the --prod flag

[doender]

I have the same issue as @grapemix: ionic cordova build ios --prod generates a main.js with an absolute reference to a sourcemap which is not there. Hence the error message:

The requested URL was not found on this server.

If I remove the reference I don't get the error message, but still a blank screen. The prod build is working fine for Android. Here's my environment:

global packages:

    @ionic/cli-utils : 1.1.2
    Cordova CLI      : 6.0.0
    Ionic CLI        : 3.1.2

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.1.2
    @ionic/cli-plugin-ionic-angular : 1.1.2
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v6.9.5
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002
    ios-deploy : 1.9.1
    ios-sim    : 5.0.8