blocks|key|3387528|text|您不能使用-bh选项指定文件夹。您可以指定基本href。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3387529|当你想从根目录提供angular服务时，只需使用-bh+/即可。还要检查你的index.html是否有一个预定义的基本路径。|3387530|<base+href="/">|code-block|syntax|javascript|3387531|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You don't specify a folder with the -bh option. You specify the base href.

When you want to serve angular from the root directory simply use -bh /. Also check your index.html If there's a predefined base path.

<pre><code>&lt;base href="/"&gt;
</code></pre>

blocks|key|3387608|text|默认情况下，Angular使用PathLocationStratergy，当您进行prod构建时，如果我们不显式地指定一个基本href，它将无法使其工作。如果您不想在这种情况下指定一个基本href，那么您需要在路由中使用HashLocationStratergy。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3387609|示例RouterModule.forRoot(appRoutes，{useHash:+true})；|offset|length|style|BOLD|3387610|还有另一个窍门下面的不是最佳实践构建prod构建后，只需将index.html中的基本更改为"."即可。|3387611|entityMap^0|0|X|F|0|A|X|1A|3|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|K|$]]

Angular uses PathLocationStratergy by default, and when you do a prod build, it fails to make it work if we don't specify a base href explicitly.
if you don't want to specify a base href in this case you need to use HashLocationStratergy in routing.

examples 
RouterModule.forRoot(appRoutes, {useHash: true});

there is another trick
below is not the best practice
 after you make a prod build just change base href in index.html to ".".

blocks|key|1070970|text|而不是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1070971|ng+build+--env=prod|code-block|syntax|javascript|1070972|使用|1070973|ng+build+--prod|1070974|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Instead of 

<pre><code>ng build --env=prod
</code></pre>

Use

<pre><code>ng build --prod
</code></pre>

blocks|key|1137513|text|如果任何人还在为angular+2/4/5+app+%2B+Nginx的生产设置而苦苦挣扎，那么这里是完整的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1137514|假设你想把你的angular应用部署在HOST：http://example.com和PORT：8080注意-主机和PORT在你的情况下可能是不同的。|offset|length|style|CODE|1137515|确保你的index.html头标签中有<base+href="/">。|1137516|1137517|首先，转到您机器上的angular存储库(即/home/user/helloWorld)路径。|ordered-list-item|1137518|然后使用以下命令为您的生产服务器构建/dist：|1137519|1137520|ng+build+--prod+--base-href+http://example.com:8080|1137521|Now将/dist+(即/home/user/helloWorld/dist)文件夹从您计算机的angular存储库复制到您想要托管生产服务器的远程计算机。|unordered-list-item|1137522|
|1137523|现在登录到您的远程服务器并添加以下nginx服务器配置。|1137524|1137525|服务器{监听8080；server_name+http://example.com；根/路径/到/你的/dist/位置；#例如。root+/home/admin/helloWorld/dist+index+index.html+index.htm；location+/{+try_files+$uri+$uri/+/index.html；#这将允许您刷新angular应用程序中的页面。这不会给出错误404。}}现在重新启动nginx.|1137526|That's+|1137527|1137528|+!！现在，您可以通过http://example.com:8080|1137529|
访问您的angular应用程序|1137530|希望对您有所帮助。|1137531|entityMap|0|LINK|mutability|MUTABLE|url|http://example.com:8080/|1|http://example.com/|2^0|0|O|I|1C|4|0|J|F|0|0|0|0|0|S|N|0|0|0|0|0|0|N|I|1|0|0|0|B|N|2|0|0|0^^$0|@$1|2|3|4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1N|8|@$D|1O|E|1P|F|G]|$D|1Q|E|1R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1S|8|@$D|1T|E|1U|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|1W|8|@]|9|@]|A|$]]|$1|N|3|O|5|M|7|1X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1Z|8|@]|9|@$D|20|E|21|1|22]]|A|$]]|$1|S|3|T|5|U|7|23|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|24|8|@]|9|@]|A|$]]|$1|X|3|Y|5|U|7|25|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|26|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|27|8|@]|9|@$D|28|E|29|1|2A]]|A|$]]|$1|12|3|13|5|U|7|2B|8|@]|9|@]|A|$]]|$1|14|3|W|5|6|7|2C|8|@]|9|@]|A|$]]|$1|15|3|16|5|U|7|2D|8|@]|9|@$D|2E|E|2F|1|2G]]|A|$]]|$1|17|3|18|5|6|7|2H|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|2I|8|@]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|2J|8|@]|9|@]|A|$]]]|1C|$1D|$5|1E|1F|1G|A|$1H|1I]]|1J|$5|1E|1F|1G|A|$1H|1K]]|1L|$5|1E|1F|1G|A|$1H|1I]]]]

If anyone still struggling with production setup of angular 2/4/5 app + Nginx, then here is the complete solution:

Suppose you want to deploy your angular app at HOST: <code>http://example.com</code> and PORT: <code>8080</code>
Note - HOST and PORT might be different in your case.

Make sure you have <code>&lt;base href="/"&gt;</code> in you index.html head tag.

<ol>
<li>Firstly, go to your angular repo (i.e. /home/user/helloWorld) path at your machine.</li>
<li>Then build /dist for your production server using the following command:

ng build --prod --base-href <a href="http://example.com:8080" rel="nofollow noreferrer">http://example.com:8080</a></li>
<li>Now copy /dist (i.e. /home/user/helloWorld/dist) folder from your machine's angular repo to the remote machine where you want to host your production server.</li>
<li>Now login to your remote server and add following nginx server configuration.

<pre><code>server {

 listen 8080;

 server_name http://example.com;

 root /path/to/your/dist/location;

 # eg. root /home/admin/helloWorld/dist

 index index.html index.htm;

 location / {

 try_files $uri $uri/ /index.html;

 # This will allow you to refresh page in your angular app. Which will not give error 404.

 }

}
</code></pre></li>
<li>Now restart nginx.</li>
<li>That's it !! Now you can access your angular app at <a href="http://example.com:8080" rel="nofollow noreferrer">http://example.com:8080</a></li>
</ol>

Hope it will be helpful.

I'm trying to deploy my Angular 5 app on a nginx server with the command

<pre><code>ng build --env=prod
</code></pre>

But when I go on my website, there's always an error on vendor file.

The application works well when I build it within a folder like /test with the command : <code>ng build --env=prod --bh /test/</code>

I'm really lost. Is it a nginx issue ? 

Thanks a lot.

Angular 5 production issue

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试使用以下命令在nginx服务器上部署我的Angular 5应用程序ng build --env=prod但是当我打开我的网站时，供应商的文件总是有错误。当我使用以下命令在/test这样的文件夹中构建应用程序时，该应用程序运行良好：ng build --env=prod --bh /test/我真的迷路了。是nginx的问题吗？非常感谢。

问Angular 5生产问题
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular 5生产问题EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular 5生产问题
EN