When running ng build, the index.html does nothing?

Question

I have an Angular 5 project, and it works fine when running ng serve, but I want to send it to a designer to work on it further. After running ng build, opening the index.html results in a completely blank page.

Is there something else I need to do? In my environment.ts folder, I have production set to true. Please let me know if there is an easier way to send a simulation or how to fix this one, thanks!

Answer 1

Most likely it's the <base href=""> settings. Let's say we have an angular-cli-created project called, "foo". When we run ng build --prod, by default, Angular will output dist/foo without any terminal errors. A couple of things:

1. This needs to be put on a server and won't work by simply opening up index.html.

2. Our <base href=""> needs to reflect how this is being put on a server (i.e., adding the 'foo' folder alongside other projects/directories on the server or dumping all of foo's contents in the server's root).

So, for our example, let's say we want to copy the 'foo' directory onto a local server like mamp/wamp with other projects. We do that, go to localhost/foo and voila! Still a blank page. If you look at (Chrome's) dev console, you'll most likely see 404s for missing styles/js. Open up the index file and change the <base href="/"> to <base href="/foo/"> and now it should show up without issues. You could also leave <base href="/"> as is and tack 'foo' onto all the css/js file paths that are throwing errors and it would work.

Now that we know what the issue is, how can we set this in the project? In the root of your project, let's open up angular.json (NG6) and modify this bit to add the baseHref and deployUrl key/values:

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "baseHref" : "/foo/",
        "deployUrl": "/foo/",

Now, when we save and do another build, and replace the previous on the server, everything should show up. You can also set this up with a flag on build. From the docs:

# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/