17

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!

Betzel11
  • 559
  • 2
  • 6
  • 12
  • can you share more error you got? – dev-assassin Aug 07 '18 at 02:36
  • I got no error, the html file is just blank. My angular 5 project is made up of various pages and each page is made up of components. ng serve works perfectly with the website and hopping between pages, but as for ng build, when I open the index.html file it creates in my dist folder, it just opens an empty webpage instead of my website. – Betzel11 Aug 07 '18 at 02:45

3 Answers3

22

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/
Pete Ankelein
  • 221
  • 1
  • 6
  • Just to confirm, is the baseHref relative to the root of your web server, rather than to the root folder on the file system? i.e. If my index & js files are under `/root/myapp/dist/myapp` and I run `http-server -p 4200 /root/myapp/dist/myapp` then baseHref is `/` rather than '/root/myapp/dist/myapp/'? – JohnLBevan Jun 06 '20 at 07:39
  • I have followed these steps, however, my web is not showing. It just shows the favicon, and as you said, 404 on styles. I just added "/project/" to the base href, but it is not working. any tips on this? – Germán Jul 30 '20 at 14:11
10

Simple trick is just Remove / from the <base href="/"> line from the index.html Change line <base href="/"> to <base href="">

And one more important thing do not open index.html directly because it will give cors error and show blank output. Open it with any server.

Ashok
  • 131
  • 2
  • 7
  • save my life, but don't know why, can you explain more? – Tony Lucas Aug 26 '21 at 20:02
  • @TonyLucas Angular makes use of the base href to tell router how to compose navigation URLs. If your application exists at the root, then you can use / as the href value as shown below. – Ashok Sep 04 '21 at 04:21
1

index.html in the project is not the actual index.html you deploy on a server. You have to generate the files you need to deploy in a web server using ng build --prod.

But, even when you build the production files, still your designer won't be able to do anything with the generated index.html and other js files. Best thing is, giving the whole project to the designer and teach him/her how to run it with ng serve

Lahiru Chandima
  • 22,324
  • 22
  • 103
  • 179
  • if I want to deploy it to a domain so he can view it, can I use the dist folder made from ng build --prod and ftp it using FileZilla to make it live, and send him the domain? – Betzel11 Aug 07 '18 at 02:48
  • Yes. `ng build --prod` generates some static files, which you can deploy in any web server which supports deploying static files. – Lahiru Chandima Aug 07 '18 at 02:49