Deploy Angular app outside Angular environment

Question

I'm trying to create an app in Angular 7, following the tutorial that gives you the default page

ng new my-app

I already reviewed it with ng serve --o and it works, but I have no idea now how to pass it to an environment outside of Angular. I've done

ng --build --aot = true

This has created a folder / dist / my-app and 3 JS files come in: main.js, polyfills.js and runtime.js I opened the index.html but nothing is shown, I expected to see the same thing I was doing in development.

I tried to run them with node, doing for example node main.js but it has not worked, in the 3 options it says

window is not defined

Has anyone already done these deploys to see how it would be in production?

What am I doing wrong....

... opened the index.html but nothing is shown. <= You are likely getting an error in the browser. Open the browsers debug window and look at the console output. What is the error. Include the error(s) in the question or, better yet, search on the error message and see if you can figure out the solution based on the error. — Igor
– Igor, Commented Feb 26, 2019 at 19:22
Wow @Igor I got an error loading all the JS files, I don´t know why the browser is looking for them in C:/ I moved the files, only the files co C:/ and it worked, — Alberto Siurob
– Alberto Siurob, Commented Feb 26, 2019 at 19:31

Sohail · Accepted Answer · 2019-02-26 19:41:47Z

1

Apps built with Angular or similar frameworks such as React or VueJs needs to be deployed in a weserver. Simply opening the index.html file in the browser will not work.

Now there are several ways of doing this -

Development

You can use http-server

npm install http-server -g

http-server -p 8080 ./dist

You can visit http://localhost:8080 to view your server

Production

There can be several options for production deployment depending upon a variety of factors such as your cloud provider, web server etc. The following two are an example -

Firebase Hosting

Firebase has a very simple deployment step - do firebase init once and firebase deploy to deploy your newly built webapp.

You can use Nginx running in docker

Dockerfile:

FROM nginx:alpine

COPY config/nginx.conf /etc/nginx/nginx.conf
COPY build/ /var/www

answered Feb 26, 2019 at 19:41

Sohail

4,6162 gold badges40 silver badges44 bronze badges

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

Comments

eduardo tordecilla paez · Accepted Answer · 2019-02-26 19:25:12Z

1

what you must do is mount your dist folder, which is the result of the ng-build you made on any http server.

apache: copies the dist folder in the www/html path of your apache

answered Feb 26, 2019 at 19:25

eduardo tordecilla paez

113 bronze badges

Collectives™ on Stack Overflow

Deploy Angular app outside Angular environment

2 Answers 2

Development

Production

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Development

Production

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related