angular-cli build without a webserver

Question

Last week I started building a portfolio website using Angular 2 created with Angular-Cli. This portfolio website is a school assignment.

one of the end requirements is that the website can run without a webserver.

When I open the website on a webserver (after building it with ng build) I have no problem at all loading it. But when I open it locally in the browser I receive 404 file not found on each javascript file.

These javascript files are in the same directory as the index page shown below.

This is my index.hmtl generated by ng build.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hallo, ik ben Maarten.</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/favicon.ico">

  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
</head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="inline.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="scripts.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

But the files aren't found when opening the index file in the browser.

Is it possible to run a Angular 2 project build with Angular-Cli without a webserver?

Thanks,

Maarten Paauw

What's the reasoning behind it being able to run without the server? — Katana24, Oct 13 '16 at 14:31
The reason why is because the website will be archived so in the future someone could look it up and use it without any extra program, like a web server. A strange rule on a ICT-educational institution. But I can't do anything about that. — maartenpaauw, Oct 13 '16 at 14:39
This is your browser stopping the files from loading locally because of security reasons. If you are using chrome you could do something like this: "C:\PathTo\Chrome.exe" --allow-file-access-from-files But I don't how viable that is at your institution http://stackoverflow.com/a/18587027/1754020 — Eddie Martinez, Oct 13 '16 at 14:44

score 5 · Accepted Answer · answered Oct 13 '16 at 15:16

The files are failing to load because of the <base href="/"> tag. It rewrites all file:// requests, so they start referencing files that do not exist.

The ng-cli provides a --base-href configuration option, which can be set to ./, so that the links continue working:

ng build --base-href "./"

angular-cli build without a webserver

1 Answers1