File:///build/main.js failed to load

candide · August 14, 2017, 3:17pm

Hi,

I’m trying to run an app on IOS and failing to do so because my application files are not being found.

I tried running from XCode and then looking in the Safari developer console for my app, and it looks like the WebView is simply not finding the files.

However, when I check the contents of the app (doing a ‘Show package content’) in the Finder, I find that my files are rightly there (e.g, index.html is under www and main.js is under www/build).

I’m using Ionic’s app-scripts v 2.1.3.

Also, I tried removing the IOS platform and re-adding it afterwards, with no effect (ionic cordova platform rm/add ios).

The app works perfectly in web mode (using ionic serve)

It just, somehow, seems to not be able to find the app files…

Looking forward to your help,

Candide

Sujan12 · August 14, 2017, 3:40pm

Post your ionic info output please.

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Look at the console and network tabs for errors.

candide · August 14, 2017, 6:19pm

Hi Sujan12,

Thanks! Here’s my ionic info:

cli packages: (/Users/candide/work/myproject/apps/ng2/node_modules)

    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 6.4.0

local packages:

    @ionic/app-scripts : 1.3.0
    Cordova Platforms  : browser 4.1.0 ios 4.3.1
    Ionic Framework    : ionic-angular 3.0.1

System:

    Node       : v7.7.4
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : 5.0.13
    npm        : 3.9.3

Yes, I did remote debug the problem on the device. Here’s what I see in Safari:

…and also (excerpt):

I’m referencing those files in a totally standard way:

  [...]
  <link href="build/main.css" rel="stylesheet">

</head>
<body class="page__body">
  <!-- Ionic's root component and where app-page app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>
  [...]

I don’t know where else to look. Any idea?

Looking forward to your comments.

BR,

Candide

Sujan12 · August 15, 2017, 6:01pm

Do these files actually exist in your www or www/build folder you have locally?
It seems to not be able to find anything but index.html, right?
How exactly did you build your app?

You might want to upgrade these to more recent versions. (Note the breaking changes at app-scripts 2.x in the changelog)

candide · August 16, 2017, 2:55pm

I updated the CLI tools, now ionic info gives me:

cli packages: (/Users/candide/work/myproject/apps/ng2/node_modules)

    @ionic/cli-utils  : 1.8.1
    ionic (Ionic CLI) : 3.8.1

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : browser 4.1.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.0.1

System:

    ios-deploy : 1.9.1
    ios-sim    : 5.0.13
    Node       : v7.7.4
    npm        : 5.3.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b

I clean rebuilt everything (I also deleted node_modules) but the problem persists

Sujan12 · August 16, 2017, 3:26pm

Awesome. Not look at these questions please:

What exact command did you use?

candide · August 16, 2017, 3:37pm

I can confirm that those files are indeed under www (index.html) and www/build (main.js, main.css, etc):

I ran ionic cordova build ios, then opened my .xcodeproj file under platforms/ios and edited it to specify my development team, then from XCode, I hit the ‘play’ button:

To debug, I opened Safari and went to the Develop Menu / My Ipad / My App
I can reload the index page in the WebView, and always get the same result:

Sujan12 · August 16, 2017, 4:02pm

What do you get when you click one of these broken URLs in the network panel? Any headers or anything?

Does your .xcodeproj contain a folder blue www and contain these files as well?

candide · August 16, 2017, 4:16pm

Clicking those files doesn’t do anything. Notice all the broken files have a FILE Scheme.

They do show up in XCode:

Sujan12 · August 16, 2017, 4:46pm

Hm, I am quite sure we are missing something here.

Can you right click on the first file that is not loaded and “Copy link address” and paste it here?
Should look something like file:///Users/sujan/Library/Developer/CoreSimulator/Devices/EDDDD4B6-81EB-48FD-A18B-1D631E3F8222/data/Containers/Bundle/Application/23932B49-F50B-4A65-A645-8A37A79F6EBF/Za%CC%88hlerstand.app/www/index.html

candide · August 16, 2017, 6:45pm

Oh, indeed right-clicking gives me, e.g.:

file:///build/main.js
file:///build/main.css

index.html (which loads successfully) is more like your example:
file:///Users/candide/Library/Developer/CoreSimulator/Devices/7D193B8D-F40E-4C73-A4B6-DCF1B05067C9/data/Containers/Bundle/Application/93572C45-CA58-44CE-B490-6ABB5D443BCE/lify-ng2.app/www/index.html

I switched to the context of an iPad simulator for this (previously I used a real device, so I don’t know if the result would have been different).

Sujan12 · August 16, 2017, 7:09pm

Can you post the content of the index.html inside the device?

candide · August 16, 2017, 7:45pm

Here you go, as copy-n-pasted from Safari’s remote web inspector:

<html lang="en" dir="ltr"><head>
  <script async="" src="//www.google-analytics.com/analytics.js"></script><script type="text/javascript" async="" src="https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"></script><script data-ionic="inject">
    (function(w){var i=w.Ionic=w.Ionic||{};i.version='3.0.1';i.angular='4.0.0';i.staticDir='build/';})(window);
  </script>
  <meta charset="UTF-8">
  <style>
    /* This helps the ng-show/ng-hide animations start at the right place. */
    /* Since Angular has this but needs to load, this gives us the class early. */
    .ng-hide { display: none!important; }
  </style>
  <title ng-bind="title">myproject</title>
  <meta charset="utf-8">
  <base href="/">

  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

  <!-- favicon -->
  <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="assets/images/favicon/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="assets/images/favicon/favicon-16x16.png" sizes="16x16">
  <link rel="manifest" href="assets/images/favicon/manifest.json">
  <link rel="mask-icon" href="assets/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
  <link rel="shortcut icon" href="assets/images/favicon/favicon.ico">
  <meta name="msapplication-config" content="assets/images/favicon/browserconfig.xml">
  <meta name="theme-color" content="#ffffff">
  <!-- end favicon -->

  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    }
  </script>-->

  <link href="assets/styles/bootstrapTheme/assets/skin/default_skin/css/theme.css" rel="stylesheet">
  <link href="build/main.css" rel="stylesheet">

<script async="" src="//static.hotjar.com/c/hotjar-172759.js?sv=5"></script></head>
<body class="page__body">
<!--<myproject-shell></myproject-shell>-->
  <!-- Ionic's root component and where app-page app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- all code from node_modules directory is here -->
  <script src="build/vendor.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>


<!-- build:js /js/lib.js -->
  <!-- bower:js -->
  <!-- endbower -->
  <!-- endbuild -->

  <!-- load webviewer pro widget -->
  <!--<script type="text/javascript" src="/api/orthanc/osimis-vieapp-page/app/js/widget.js"></script>-->

  <!-- build:js /js/config.js -->
  <!--<script type="text/javascript" sapp-page"app/config.js"></script>-->
  <!-- endbuild -->

  <!-- build:js app-page/app.js -->
  <!-- inject:js -->
  <!-- endinject -->

  <!-- inject:templates:js -->
  <!-- endinject -->
  <!-- endbuild -->

</body></html>

rapropos · August 16, 2017, 7:51pm

This line leaps out at me. Can you take it out of your src’s index.html?

candide · August 16, 2017, 8:00pm

If I remove <base href="/"> I get this:

Sujan12 · August 16, 2017, 8:03pm

Get also rid of the hotjar.js temporarily. Quite a lot of differences to the default index.html here
(Should have asked you to try with a new project via ionic start blank blank much sooner…)

rapropos · August 16, 2017, 8:04pm

OK, please create a brand-new blank project somewhere, and completely replace your index.html with the vanilla version from that blank project.

candide · August 16, 2017, 8:26pm

If I do that, I get:

The document, from Safari remote inspector:

<html lang="en" dir="ltr"><head>
  <script data-ionic="inject">
    (function(w){var i=w.Ionic=w.Ionic||{};i.version='3.0.1';i.angular='4.0.0';i.staticDir='build/';})(window);
  </script>
  <meta charset="UTF-8">
  <title>MyProject - Not Found</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

<script src="file:///Users/candide/Library/Developer/CoreSimulator/Devices/7D193B8D-F40E-4C73-A4B6-DCF1B05067C9/data/Containers/Bundle/Application/EB499B6E-1EEA-49ED-85D2-3682F7995E4A/lify-ng2.app/cordova_plugins.js"></script></head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app ng-version="4.0.0" class="ios platform-cordova platform-mobile platform-ios platform-ios10 platform-ios10_3 platform-tablet platform-ipad"><div app-viewport=""></div><ng-component ng-version="4.0.0" class="app-root"><router-outlet></router-outlet><page-not-found ng-version="4.0.0">    
<div class="fluid-height">
    <div ng-class="{'page__main--min-padding': false, 'page__main': true}">
        <div class="pt50 col-xs-6 col-xs-offset-3">
            <h1 class="h1"><span class="fs50 block">404</span><span class="block fs24">The page you're looking for can’t be found.</span></h1>
            <a class="btn btn-primary col-xs-4" routerlink="/" ng-reflect-router-link="/" href="/">Go to homepage</a>
        </div>
    </div>
</div>
</page-not-found>
</ng-component><div overlay-portal="" ng-reflect-_overlay-portal=""></div><div overlay-portal="" ng-reflect-_overlay-portal=""></div><div class="loading-portal" overlay-portal="" ng-reflect-_overlay-portal=""></div><div class="toast-portal" ng-reflect-_overlay-portal="10000"></div><div class="click-block"></div></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>



</body></html>

Also, my app.html is pretty simple:

<router-outlet></router-outlet>

I should have probably said that we got rid of the NavController and only use the standard Angular router. Is that a problem?

rapropos · August 16, 2017, 8:30pm

Likely so. See if the problem persists if you remove all reference to the Angular router in your code and dependencies.

Sujan12 · August 16, 2017, 9:05pm

Please create a new project with ionic start blank blank and try to build that. Then we know if it is your project or a problem with your system in general.