Forums

Django + Angular

Hello, first of all I must say that I am a beginner with web applications. I'm trying to run my application and I'm having trouble. I already have the Angular static files and I already ran the "collectstatic" command in the Bash console. In the index.html file, I've already loaded the static files in a Django-compatible way. However, when the index.html page is requested, a blank screen is presented and no errors appear in the browser console. Could someone please help me with this?

On the page for your django app you can find a couple logs for your app. Have you had a look to see if anything is there?

Yes, I've seen the logs. The logs only show something when I'm in the previous screens (which are working correctly). But on the screen that should show the application made in Angular, it does not produce log messages. Would I need to install Angular or some other plugin for the application to work?

You need to take a look at the network tab in the browser's dev tool and see if js is actually loaded. If not, make sure that your static files are configured correctly. see https://help.pythonanywhere.com/pages/DebuggingStaticFiles/

At the network tab in the browser's dev tool, the scripts.js and styles.css files are loaded correctly. However the runtime.js, polyfills.js and main.js files are not mentioned.

That sounds like your frontend code is not trying to download them, then. You will need to check your code to see why that might be.

These files are transpiled files that are minified and uglyfied. Apparently they are loaded correctly in index.html. If I understand it, my angular application should be loaded inside the app-root tag, but it doesn't.

It's something you need to debug. We have no way to help you.

I fixed this issue and now all files are loaded in the network tab. Now an error appeared in the console tab: ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk 697 failed. And in the network tab the 697.js file is blocked with the error: NS_ERROR_CORRUPTED_CONTENT. I thought this file was corrupt somehow, but when I uploaded it in firebase, it loaded correctly and my application page loaded.

How are you serving the file and what is the content type? The reference that I have found for that error suggests that the file may be being served with the wrong content type. Check that the content type in the header of the response is correct for the content that is in the file.

I fixed the problem. The GET method wasn't finding the file because it was looking in the wrong directory. I fixed this in the index.html file by changing <base href="/"> to <base href="/static/">. Thank you all for your help.

Great, glad to hear you worked it out!