如何从子文件夹生成要运行的Angular 8 build_Angular_Angular Cli

如何从子文件夹生成要运行的Angular 8 build

angular

如何从子文件夹生成要运行的Angular 8 build,angular,angular-cli,Angular,Angular Cli,我正在使用标准的localhost:4200进行开发。但我也想看看构建是如何工作的。为此，我修改了angular.json文件。变化如下所示： "outputPath": "D:/a_root/dist", <head> <base href="/dist/"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta

我正在使用标准的localhost:4200进行开发。但我也想看看构建是如何工作的。为此，我修改了angular.json文件。变化如下所示：

"outputPath": "D:/a_root/dist",

<head>
  <base href="/dist/">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="shortcut icon" href="assets/favicon.ico">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" 
   rel="stylesheet"/>
  <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body class="app" style="overflow-y: hidden;">
   <script src="runtime.js"></script><script src="polyfills-es5.js" nomodule></script><script 
   src="polyfills.js"></script><script src="styles.js"></script>
   <script src="scripts.js"></script><script src="vendor.js"></script>
   <script src="main.js"></script>
 </body>
</html>

其中，a_root是应用程序根文件夹，其中包含所有后端文件和web.config。因此，为了不弄乱后端和前端文件，我想将所有前端文件都放在一个子文件夹/dist中。我想做的就是这样。我的项目中有一个index.html文件。我正在将基本标记更改为：

<base href="/dist">

并在正确的位置获取dist文件夹。然后，我将index.file从dist文件夹复制到_根目录中以运行应用程序

Index.file如下所示：

"outputPath": "D:/a_root/dist",

<head>
  <base href="/dist/">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="shortcut icon" href="assets/favicon.ico">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" 
   rel="stylesheet"/>
  <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body class="app" style="overflow-y: hidden;">
   <script src="runtime.js"></script><script src="polyfills-es5.js" nomodule></script><script 
   src="polyfills.js"></script><script src="styles.js"></script>
   <script src="scripts.js"></script><script src="vendor.js"></script>
   <script src="main.js"></script>
 </body>
</html>

当以localhost/a_root/index.html运行它时，我会立即收到脚本错误，因为它们没有被正确引用。但即使在它们前面加上dist/也有助于加载脚本，但无助于运行应用程序。它无法加载第一个ts组件

我做错了什么

谢谢

如果您的

dist

文件夹位于与域根相关的

/a\u root/dist

，则您当然需要更新

index.html

中的路径，方法是在所有引用的

.js

、

.css

文件前面加上前缀，例如：

<script src="/a_root/dist/runtime.js"></script>
<script src="/a_root/dist/polyfills-es5.js" nomodule></script>
<script src="/a_root/dist/polyfills.js"></script>
<script src="/a_root/dist/styles.js"></script>
<script src="/a_root/dist/scripts.js"></script>
<script src="/a_root/dist/vendor.js"></script>
<script src="/a_root/dist/main.js"></script>

之后，您可能应该在

index.html

中将

更新为

，因为相对于域根目录，

index.html

文件位于

中<代码>

确保相对URL（路由路径）在子文件夹中正常工作

理想情况下，例如在生产中，您不会在同一个文件夹中混合后端和前端代码。

您当然需要更新

index.html

中的路径，方法是在所有引用的

.js

、

.css

和任何其他文件前面加上

/a_root/dist/

，作为前缀，如果您的

dist

文件夹相对于域根位于

/a\u root/dist

，例如：

<script src="/a_root/dist/runtime.js"></script>
<script src="/a_root/dist/polyfills-es5.js" nomodule></script>
<script src="/a_root/dist/polyfills.js"></script>
<script src="/a_root/dist/styles.js"></script>
<script src="/a_root/dist/scripts.js"></script>
<script src="/a_root/dist/vendor.js"></script>
<script src="/a_root/dist/main.js"></script>

之后，您可能应该在

index.html

中将

更新为

，因为相对于域根目录，

index.html

文件位于

中<代码>

确保相对URL（路由路径）在子文件夹中正常工作

理想情况下，例如在生产环境中，您不会在同一文件夹中混合后端和前端代码。

您是否尝试使用CLI命令更改这些设置，例如，更改文件夹、基等，并显示我正在使用的所有命令。你到底在想什么？以下是错误：GET net:：ERR_ABORTED 404（未找到）16:38:25.620 index.html:37 GET net:：ERR_ABORTED 404（未找到）16:38:25.621 index.html:37 GET net:：ERR_ABORTED 404（未找到）16:38:25.621 index.html:37 GET net:：ERR_ABORTED 404 404（未找到）16:38:25.622 index.html:37 GET net:：ERR_ABORTED 404（未找到）16:38:25.637 index.html:37 GET net:：ERR_中止404（未找到），有命令：ng build--watch=true--baseHref=dist--outputPath=D:\a_root\dist。构建完成后，我将dist/index.html复制到一个_根目录并从那里运行它。基本上与我之前的设置相同。是否尝试使用CLI命令更改这些设置，例如，更改文件夹、基、etcI am显示我使用的所有命令。你到底在想什么？以下是错误：GET net:：ERR_ABORTED 404（未找到）16:38:25.620 index.html:37 GET net:：ERR_ABORTED 404（未找到）16:38:25.621 index.html:37 GET net:：ERR_ABORTED 404（未找到）16:38:25.621 index.html:37 GET net:：ERR_ABORTED 404 404（未找到）16:38:25.622 index.html:37 GET net:：ERR_ABORTED 404（未找到）16:38:25.637 index.html:37 GET net:：ERR_中止404（未找到），有命令：ng build--watch=true--baseHref=dist--outputPath=D:\a_root\dist。构建完成后，我将dist/index.html复制到一个_根目录并从那里运行它。基本上和我以前一样。我喜欢你不混合两种内容的想法。但让我问你一个问题。两个不同的地方不会产生CORS问题吗？看起来我已经开始工作了。现在，当我导航到localhost/a_root/index.html时，我恰好看到了登录页面和url显示：。因此，它将始终在地址栏中显示dist？@标记，这确实会导致CORS错误，但通过属性配置web服务器（取决于您使用的服务器），该问题很容易解决。这就是大多数SPA架构的工作原理。@Mark您是否更新了

？但是，如果您是从

http://localhost/a_root/index.html

，则更新后，“/a_root/”部分将始终显示。如果您只是想要一个干净的

http://localhost:8080

（使用不同的端口），然后您可以从

dist

文件夹为角度站点提供服务。因此，您的后端将位于

http://localhost:80

，以及角度

http://localhost:8080

。在生产中，它们将在各自的域中运行。如果您只有一个域，并且不希望显示端口，那么您可以使用子文件夹，或者混合文件/文件夹。好的，我所做的就是运行以下命令：ng build--watch=true--baseHref=/dist/--outputPath=D:\a\u root\dist。然后我将dist/index.html复制到了一个\u root。第一次运行并开始加载应用程序。那么，你认为我还需要做些什么呢？我喜欢你不混合两种内容的想法。但让我问你一个问题。两个不同的地方不会产生CORS问题吗？看起来我已经开始工作了。现在，当我导航到localhost/a_root/index.html时，我恰好看到了登录页面和url显示：。因此，它将始终在地址栏中显示dist？@标记，这确实会导致CORS错误，但通过属性配置web服务器（取决于您使用的服务器），该问题很容易解决。这就是大多数SPA架构的工作原理。@Mark您更新了吗<