CODEWITHSUNDEEP
angularbuildrenderingangular-cli
user1675891
user1675891

Reputation:

Not able to execute Angular application locally after build

I'm toying with the CLI tools for Angular. When I execute

ng serve

the application comes to live and is working all great. Now, I'd like to distribute it to the wide web and attempted building it by

ng build --verbose

which seems to have worked as I see no errors nor warnings. However, as I enter the created dist directory and execute FF on index.html, I arrive at a blank page.

Checking the source, I see that the included bundles are there but that the tag app-root that is the entry point of my Angular application isn't rendered to anything. The list of bundles included is as follows (I try to keep it as default and standard as possible):

<body style="padding-top: 70px;">
  <app-root></app-root>
  <script type="text/javascript" src="inline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js"></script>
  <script type="text/javascript" src="scripts.bundle.js"></script>
  <script type="text/javascript" src="styles.bundle.js"></script>
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script>
</body>

I'm assuming that all the magic required to render the stuff in main.bundle.js is provided in inline.bundle.js and/or any of the other bundles included. Is it so?

Since I see no errors in the console, serving it form the src directory works etc. I'm guessing I've forgotten something fairly simple that needs to be switched on or commented out or something. Googling such a vague question resulted in a bunch of useless info.

What can I do about it? How can I troubleshoot it deeper?

Upvotes: 1

Views: 1566

Answers (3)

k11k2
k11k2

Reputation: 2044

I use this script instead of <base href="/"> in index.html to open file in dist directory. I'm not sure it may be the solution for you but may help.

<script>
    document.write('<base href="' + String(document.location).replace('index.html','') + '">')
    </script>

Upvotes: 4

Robin Dijkhof
Robin Dijkhof

Reputation: 19278

That is because you are not serving you page. You would need a simple webserver like Nginx.

However if you really want this, it is possible, but without routing. You should do the following:

  • Make your scriptpaths in your index.html relative: <script type="text/javascript" src="./inline.bundle.js"></script>
  • Set your base href to the location of your dist folder:
  • Use IE11 or EDGE. FF and Crome will give you security warnings.

Upvotes: 1

Paul K
Paul K

Reputation: 154

I don't think the routers can figure out how to handle a file:// url. The way Angular does the routes is somewhat disturbing. When you navigate to a route, it depends on the web server serving up the default document (index.html) and then it essentially re-writes the URL to consider anything after the base to be handled internally by the router.

In short, serve from an actual web server.

Upvotes: 0

Related Questions