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>

注意：pollyfills＆amp;加载了main.bundle.js，它们不在index.html中。然后将加载Angular相关的东西。

在nginx上部署Angular网站

1 个答案: