0

Normally, all the web-app that I develop runs locally on browsers using the file system by launching the index.html which then fetches all the other files through the embedded script and css links.

However, If I try to do the same with a build app generated by angular's ng build --prod --base-href ./ or ng build --prod --aot --base-href ./ the app doesn't run at all.

Interestingly, there are no console errors and the browser even downloads all the required file as shown below.

Why does this happen ? Is there any resolution to it ?

browsers-network-tab

Edit: I am aware of how a normal angular app works. I am just curious to know what is the reason that despite all the required files, why the app can't be loaded in the browser in the traditional manner.

Saurabh Tiwari
  • 4,632
  • 9
  • 42
  • 82

2 Answers2

0

The ng build command builds the Angular App but does not start a local development web server to run the app.

To build and start the app you need to run,

ng serve

Then you can view the app running in your browser at http://localhost:4200

Joel Oughton
  • 416
  • 3
  • 6
  • Thanks for answering, however I am aware of what you are saying. My question is why cant I run these files in the browser normally if I have all the required JS and CSS files bundled by the angular client. – Saurabh Tiwari Jun 30 '19 at 18:29
  • The default Angular routing strategy is path based. That is, it relies on the HTML pushState API with a compatible web server configured with rewrites. You should be able to use the hash based routing model and run without a web server. – Joel Oughton Jun 30 '19 at 19:22
0

It is because when you build your angular application you build it for a base href. All the resources etc. are relative to that base href.

If you edit your built index.html file's base href with the exact location where your angular distrubution files are, it will work.

For example I built my app like this:

ng build --prod --base-href /test/

The built index file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Testtalha</title>
  <base href="/test/">
  <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.3ff695c00d717f2d2a11.css"></head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.26209474bfa8dc87a77c.js"></script><script type="text/javascript" src="es2015-polyfills.bda95d5896422d031328.js" nomodule></script><script type="text/javascript" src="polyfills.8bbb231b43165d65d357.js"></script><script type="text/javascript" src="main.4eae417d78b7086fd00a.js"></script></body>
</html>

When I update the base href as I explained, it works on local browser. Just like below:

<base href="./">

EDIT: I've just realized that I got your question wrong. Check this answer, if your problem is to do with routing on local browser without any server. You need to get rid of push state and provide an appropriate base href: https://stackoverflow.com/a/45163344/11420760

But if you are telling that your application is not even opening up not even rendering some stuff then your case seems a bit complicated. There is a long thread here, a similar discussion: https://github.com/angular/angular/issues/13948

I suggest to create an empty test project and try the same with it maybe that way you can pinpoint what's causing the wierdness in your project.

talhature
  • 2,246
  • 1
  • 14
  • 28