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
– Katana24, Commented Oct 13, 2016 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
– maartenpaauw, Commented Oct 13, 2016 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 stackoverflow.com/a/18587027/1754020 — Eddie Martinez
– Eddie Martinez, Commented Oct 13, 2016 at 14:44

Alex Gyoshev · Accepted Answer · 2016-10-13 15:16:01Z

6

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 "./"

answered Oct 13, 2016 at 15:16

Alex Gyoshev

12k4 gold badges49 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular-cli build without a webserver

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related