Home > Software engineering >  Angular page shows white blank page on GitHub
Angular page shows white blank page on GitHub

Time:04-01

I deployed my build version of ANgular project on GitHub but it shows blank page. index.html file is as follows:

<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.ef46db3751d8e999.css"></head>
<body>
  <app-root></app-root>
<script src="runtime.64248f028ac7b239.js" type="module"></script><script src="polyfills.baf191c8bfeb89f2.js" type="module"></script><script src="main.b49d142c39a156bd.js" type="module"></script>

</body></html>

How can I fix this?

Update: The routing is enabled in my project. This is a very simple project that angular offers when you create a new project.

The Error is: Network Console

CodePudding user response:

This is how Angular works. In an SPA (Single-Page Application), the HTML is generated "on-the-fly" from an almost blank document (what you are seeing currently). These tags: <script src="runtime.64248f028ac7b239.js" type="module"></script><script src="polyfills.baf191c8bfeb89f2.js" type="module"></script><script src="main.b49d142c39a156bd.js" type="module"></script> point to the rest of the application.

After the index.html is downloaded to the browser, the browsers then is pointed to the Javascript (JS) files in those script tags to download to the browser as well. Those JS files manipulate the DOM in a way that will produce a UI. If nothing is produced, then it is probably that either JS is blocked on the browser, or the browser can't access the JS files (runtime.64248f028ac7b239.js, polyfills.baf191c8bfeb89f2.js, and main.b49d142c39a156bd.js) for some reason.

As suggested, I'd check the network tab and see if those JS files are being downloaded successfully. Is they are, check if JS is blocked on your browser (Angular won't be able to run without it). If neither of those is the problem, you may have an issue with routing (if you are using it), and may want to share what your app.component.html file looks like.

  • Related