在Nginx上部署Angular網站

Question

我有一個使用angular創建的簡單網站，我想在nginx上進行部署。

我已經在我的電腦上安裝了nginx ，並如下修改了nginx.conf文件的根目錄和索引，

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;
        }
      }

當我訪問localhost ，沒有，我得到了索引頁面-html內容，但是它不能解析任何Angular部分。 並且控制台中沒有錯誤。

的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-文件夾結構：

我還需要做些其他事情才能使我的角度應用程序正常工作嗎？

Answer 1

查看您的結構，您實際上尚未創建構建。 似乎您正在使用angular-cli。

使用生成一個生成

ng build --base-href .

dist文件夾已生成。 保留在nginx中。

它的內容就是這個。

當您查看其index.html時，應該是這樣的。

<!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>

注意：index.html中沒有的pollyfills和main.bundle.js的加載方式。 然后將加載與Angular相關的內容。

在Nginx上部署Angular網站

問題描述

1 個解決方案

解決方案1
2 已采納 2017-04-11 07:13:22

在Nginx上部署Angular網站

問題描述

1 個解決方案

解決方案1 2 已采納 2017-04-11 07:13:22

解決方案1
2 已采納 2017-04-11 07:13:22