Amanrajsingh71 commented 4 years ago

Cordova lazy loading support for angular 8 application

Motivation Behind Feature:

We are using cordova for mibile hybrid applications. It was working fine with earlier deployed version but after we implemented lazy loading to optimize script bundle, the apps start and shows splash screen but does not proceed further and shows white screen indefinitely. Not sure whether a new feature or we are missing some thing

janpio commented 4 years ago

Have you remote debugged your app to look at the console for errors? https://ionic.zone/debug/remote-debug-your-app

Amanrajsingh71 commented 4 years ago

We are using Angular 8 framework and use cordova to build the .apk. We have not used ionic framework. We have debugged the application in android simulator and real device. In android simulator we got error "to much work done by thread and skipped frame 30".

janpio commented 4 years ago

The instructions on that domain apply to all Cordova apps. Please read them and remote debug the webview of the Andorid app to find out why the screen is white.

Amanrajsingh71 commented 4 years ago

Hi, Thanks for the information. I was able to debug and below are the error thrown in console:

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec. polyfills-es2015.c1d076c765b5a6049f69.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec. main-es2015.2a7d1e25ee26f4704128.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

Please let me know if any other information is required.

Thanks.

janpio commented 4 years ago

Is this the cause for the web app crashing and showing a white screen? Does it stop the loading of the scripts in the network panel? Do you get any other errors in the console panel?

Amanrajsingh71 commented 4 years ago

Hi,

Thanks for the guidance.

The issue was caused due to differential loading in Angular 8 due to which the dynamically generated .js files were not loading due to file type not recognized. The issue has been fixed by adding TYPE of file Manually.

Best Regards.

janpio commented 4 years ago

Awesome, great that I could point you into the correct direction.

Could you maybe share some code that helped to solve your problem? Maybe other people will find this issue via Google and be thankful for instructions.

Is this something we should bring up with Angular to better support somehow?

Amanrajsingh71 commented 4 years ago

Hi, We have fixed the issue by adding "type=text/javascript" in index.html after creation of .dist file.

Because of angular differential loading runtime.js, polyfill.js gets added to indexl.html file and they have a TYPE=MODULE but "type=text/javascript" is not there (it would be helpful if it is included) hence web browser dose not have any issue identifying the MIME type but if we built an apk or ipa using the same .dist through cordova then Android native is not able to identify the MIME type hence the error is thrown.

Thanks.

janpio commented 4 years ago

Oh that is very interesting!

Can you point me to some documentation about this "differential loading" in Angular 8? (I know very little about Angular, so I would be interested in learning a bit more to udnerstand how exactly this works.) Maybe we can create a PR for Angular to fix this permanently.

timbru31 commented 4 years ago

Oh that is very interesting!

Can you point me to some documentation about this "differential loading" in Angular 8? (I know very little about Angular, so I would be interested in learning a bit more to udnerstand how exactly this works.) Maybe we can create a PR for Angular to fix this permanently.

Here you go: https://auth0.com/blog/angular-8-differential-loading/ (Angular specific) https://html.spec.whatwg.org/multipage/scripting.html#attr-script-nomodule (HTML spec)

janpio commented 4 years ago

Hmm, that probably means this should better be implemented on the webview or Cordova side, as Angular is doing exactly what is expected. Correct?

timbru31 commented 4 years ago

I assume yes. But I haven't made any tests so far (sadly this issue doesn't include any version information, too)

janpio commented 4 years ago

@Amanrajsingh71 Can you help us to create a minimal Android app that reproduces this behavior (without the fix you did)? That would be awesome!

jamcoupe commented 4 years ago

@janpio I have attached a minimal cordova app that reproduces the issue. I think it may be more of an issue with the Android WebView. But all default Angular8 apps will not work in Cordova without modifications.

www/replace-app.js

const p = document.querySelector("p");
p.textContent = "I works!!!";

www/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <p>I should not be seen :(</p>
        <script type="text/javascript" src="cordova.js"></script>
        <script src="replace-app.js" type="module"></script>
    </body>
</html>

cd into the root directory

npm install cordova@9.0.0 -g
cordova create app
cd app
# add the index.html and replace-app.js to the www folder
cordova platform add android
cordova build android

Install the app.

Expected: App should display the text "It works!!!"

Actual: App displays: "I should not be seen :(".

cordova-bug-type-module.zip - zipped app for your convenience