Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Run Angular2 as static app in browser without a server

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

like image 910
Maris Avatar asked Oct 13 '16 14:10

Maris


People also ask

Can we run angular without server?

You don't need a server-side engine to dynamically compose application pages because Angular does that on the client-side. If the application uses the Angular router, you must configure the server to return the application's host page ( index.html ) when asked for a file that it does not have.

Does angular run on browser or server?

2 Answers. Show activity on this post. Angular is indeed a front end framework, and as such it runs in the browser.


2 Answers

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

like image 187
Logan H Avatar answered Sep 23 '22 00:09

Logan H


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

<base href="/"> 

to

<base href="./"> 
like image 42
Hamzeh Hirzallah Avatar answered Sep 22 '22 00:09

Hamzeh Hirzallah