Run Angular2 as static app in browser without a server

Question

As I understand the Angular2 concept - it is transpiling TypeScript files to .js files. In principle, it should be possible to compile, package, and then run that Angular2 a

Answer 1

How to serve an Angular 2 dist folder index.html to serve an Angular 2 dist folder index.html

If it's not obvious to everyone, and it wasn't to me. If you want to run the dist folder locally after building it and fixing it base ref, use something like http-server and point it to the dist folder, not any particular file. From the cmd window in your project folder

c:\user\myProject> http-server ./dist

as explained in the link

Answer 2

What helped me was,

1. Run an ng build --prod --base-href ./ in the app route directory and generate the dist/ files

2. In the dist/ directory, edit the index.html to remote the type="module" and nomodule defer attributes from the scripts.

   Ex:

   <script src="runtime-es2015.1eba213af0b233498d9d.js" type="module"></script>
   <script src="runtime-es5.1eba213af0b233498d9d.js" nomodule defer></script>
   

   should be changed to,

   <script src="runtime-es2015.1eba213af0b233498d9d.js"></script>
   <script src="runtime-es5.1eba213af0b233498d9d.js"></script>
   

Now you should be able to render the index.html file in a browser.

Answer 3

this is a great way to export your application , just need a little change open index.html and change

<base href="/">

to

<base href="./">

Answer 4

Run the BUILD command to BUNDLE/build

ng build

or for a production build/bundle

ng build --prod

It will build/bundle your app into a distributable app.

When it is finished look in your apps root directory for a dist folder and that will contain everything your app needs to run in outside of the node server, say like a tomcat instance.

Update

Thanks to the comment from @Maris, make sure your file paths are relative to the current directory rather than relative to the root directory.

Simply run this command to change the base href element in your index.html.

ng build --prod --base-href ./

Answer 5

It's impossible i think during to error in modern browsers:

Uncaught (in promise): SecurityError: Failed to execute 'replaceState' on 'History':...

it's a pity

Answer 6

This works for me:

$ ng build --prod --base-href ./