Deploying Angular website on nginx

Question

I have a simple website built with angular which I want to deploy on nginx.

I have installed nginx on my pc and have modified the root and index of nginx.conf file as below,

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   C:/Angular-Project/angular2-trial/src;
            index  index.html;
        }
      }

No when I access the localhost, I get the index page - html content, but it doesn't resolve any Angular part. And there are no errors in the console.

Index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular2Trial</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

src - Folder Structure:

Is there something else I need to do so that my angular app is functional?

Parth Ghiya · Accepted Answer · 2017-04-11 07:13:22Z

3

Looking at your structure, you haven't actually created a build. Seems like you are using angular-cli.

Generate a build using

ng build --base-href .

dist folder is generated. Keep that in nginx.

Its content would be this.

And when u look at its index.html it should be something like this.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular2Liferay7</title>
  <base href=".">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

Note : how pollyfills & main.bundle.js are loaded which are not in your index.html. Then Angular related stuff would be loaded.

answered Apr 11, 2017 at 7:13

Parth Ghiya

6,9692 gold badges32 silver badges37 bronze badges

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

2 Comments

Vinay Over a year ago

Thanks a lot...As you mentioned I did forget to build. Building it solved my problem

Parth Ghiya Over a year ago

@Vinay: You are welcomed :) You can upvote it too :p

Collectives™ on Stack Overflow

Deploying Angular website on nginx

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related