33

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 application as a static application from AWS S3 bucket, GitHub or whatever static source.

If I run Angular2 application on node server (with angular-cli "ng serve" command), it takes 500 MB of RAM on server - it's "Heey, common!" - is it really supposed to be that way! What's the benefit of this framework then against React, for example, which needs only a browser.

I can't seem to find anything useful on serving Angular2 application as a static compiled HTML+JS.

Maybe you can help me understand this, and solve?

Thanks a lot!

Maris

Maris
  • 664
  • 1
  • 5
  • 15
  • There is [Webpack](https://angular.io/docs/ts/latest/guide/webpack.html) for bundling your js files. Other than that I'd suggest using [Angular 2 with Dart](https://angular.io/docs/dart/latest/quickstart.html), since everything gets bundled and published into a `build` folder automatically. – Maximilian Riegler Oct 13 '16 at 14:48
  • Both React and Angular 2/4 compile to static code. Most of the time, the development build is served using some sort of build tool like webpack, but at the end of the day, your front end application can be served from a static location, like an S3 bucket. – penguinsource Feb 09 '18 at 02:53

6 Answers6

48

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

Logan H
  • 3,383
  • 2
  • 33
  • 50
  • Yess, super thanks - this is the right and most simple solution! – Maris Oct 13 '16 at 18:59
  • @Maris Sure! Glad to help out! – Logan H Oct 13 '16 at 18:59
  • 6
    I tried this earlier, but when opening dist/index.html file on my machine, it was just showing "Loading...", and didn't really load - so I assumed it still needs a server. But now after your answer, I checked the JavaScript console, and found out that it just can't find the .js files, because they are in absolute path "/...", not relative to current dir. But as soon as those files are found, all works like a charm! ;) – Maris Oct 13 '16 at 19:01
  • @Maris Oh Nice debugging! I'm glad you figured out your problem, just needed a little boost, Good work! – Logan H Oct 13 '16 at 19:03
  • @Logan H, I tried above solution but its not working with localhost:4200. without using angular cli development server. – Anil Jagtap May 23 '17 at 14:22
  • @AnilJagtap look at the comment above from Maris, check you console, you might have to adjust your file paths, make sure your paths are absolute rather than relative. – Logan H May 23 '17 at 14:35
  • 1
    I always had problem getting it to work, this answer solved the problem! – Abbas Mar 20 '18 at 16:03
  • I expected the app to work if I open index.html in browser, since all the required JS and CSS files are available in dist. However, the page doesn't show up. Any idea why ? – Saurabh Tiwari Jun 30 '19 at 17:31
14

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

<base href="/">

to

<base href="./">
Hamzeh Hirzallah
  • 263
  • 2
  • 17
  • Good point, but better is to give it at the time of command not manually like in below answer here https://stackoverflow.com/a/45525661/5043867 – Pardeep Jain Aug 26 '17 at 06:49
  • According to Angular documentation (as well as WebPack's documentation), you should NOT alter the auto-generated files. Just use the flag `--base-href ` as mentioned in the other answers. for more info see: https://angular.io/guide/deployment#simplest-deployment-possible – Gil Epshtain Mar 19 '18 at 13:40
  • Trying this, but I keep getting CORS errors. Any suggestions? – DonCarleone May 01 '23 at 03:53
7

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.

Rizan Zaky
  • 4,230
  • 3
  • 25
  • 39
6

This works for me:

$ ng build --prod --base-href ./
Larry Parker
  • 61
  • 1
  • 1
6

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

Vlad
  • 7,997
  • 3
  • 56
  • 43
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

vtechmonkey
  • 123
  • 2
  • 3
  • 11