blocks|key|2124484|text|因为它只是javascript，所以服务器不知道路由。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2124485|您必须在.htaccess中添加这些行|2124486|RewriteEngine+On
#+If+an+existing+asset+or+directory+is+requested+go+to+it+as+it+is
RewriteCond+%25{DOCUMENT_ROOT}%25{REQUEST_URI}+-f+[OR]
RewriteCond+%25{DOCUMENT_ROOT}%25{REQUEST_URI}+-d
RewriteRule+%5E+-+[L]

#+If+the+requested+resource+doesn't+exist,+use+index.html
RewriteRule+%5E+/index.html|code-block|syntax|javascript|2124487|因此，如果服务器没有找到这个路由，您可以重定向到您的角根和角可以处理这个路由。因此，您也可以将"index.html“替换为您的角根所在的路由。|2124488|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Because it´s just javascript, the server didn´t know the route. 
You have to add these lines in .htaccess

<pre><code>RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
</code></pre>

So, if the server didn´t find this route, you redirect to your angular-root and angular can handle this route. Therefore you can also replace "index.html" with the route, where your angular-root is.

blocks|key|1316007|text|对于不是资源的所有内容，您都可以将简单的重定向应用到index.html。我有一个公共回购系统，你可能会发现它很有用，它是一个非常简单的特快服务器，我用它来测试各种角度应用程序的托管：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1316008|https://github.com/hevans90/node-ng-server/blob/master/server.js|offset|length|1316009|tl;dr:列出资源文件类型及其目录，以服务您的资产，但否则将所有请求重定向到index.html+&让角度路由器完成其工作。|1316010|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1S|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

You can apply simple redirects to the index.html for everything that isn't a resource. I've got a public repo you might find useful, it's an incredibly simple express server I use to test the hosting of various Angular apps:

<a href="https://github.com/hevans90/node-ng-server/blob/master/server.js" rel="nofollow noreferrer">https://github.com/hevans90/node-ng-server/blob/master/server.js</a>

tl;dr: make a list of resource file types &amp; their directory, to serve your assets, but otherwise redirect ALL requests to index.html &amp; let the Angular router do its work.

blocks|key|2756070|text|当然，您需要配置您的服务器来路由到正确的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2756071|两个例子是apache+http服务器或nginx。|offset|length|2756072|以下是两种情况下的一些最小配置示例。|2756073|角apache示例+(.htaccess)：|2756074|<IfModule+mod_rewrite.c>
++RewriteEngine+On
++RewriteBase+/
++RewriteRule+%5Eindex\.html$+-+[L]
++RewriteCond+%25{REQUEST_FILENAME}+!-f
++RewriteCond+%25{REQUEST_FILENAME}+!-d
++RewriteRule+.+index.html+[L]
</IfModule>|code-block|syntax|javascript|2756075|Nginx示例+(nginx.conf)：|2756076|server+{
++++listen+80;

++++server_name+your.app;

++++location+/+{
++++++++proxy_pass+++++++http://localhost:4200;
++++++++proxy_set_header+Upgrade++++$http_upgrade;
++++++++proxy_set_header+Connection+$http_connection;
++++++++proxy_set_header+Host+++++++$host;
++++}
}|2756077|entityMap|0|LINK|mutability|MUTABLE|url|https://httpd.apache.org/|1|https://www.nginx.com/|2|https://github.com/mgechev/angular-seed/wiki/Deploying-prod-build-to-Apache-2|3|https://medium.com/better-programming/how-to-properly-get-angular-and-nginx-working-together-for-development-3e5d158734bf^0|0|5|E|0|K|5|1|0|0|0|9|2|0|0|0|7|3|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]|$D|1B|E|1C|1|1D]]|A|$]]|$1|F|3|G|5|6|7|1E|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1F|8|@]|9|@$D|1G|E|1H|1|1I]]|A|$]]|$1|J|3|K|5|L|7|1J|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1K|8|@]|9|@$D|1L|E|1M|1|1N]]|A|$]]|$1|Q|3|R|5|L|7|1O|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]|12|$5|V|W|X|A|$Y|13]]|14|$5|V|W|X|A|$Y|15]]]]

Of course you need to config your server to route to the right content.

Two examples are <a href="https://httpd.apache.org/" rel="nofollow noreferrer">apache http server</a> or <a href="https://www.nginx.com/" rel="nofollow noreferrer">nginx</a>.

Here are some minimal config examples for both.

<a href="https://github.com/mgechev/angular-seed/wiki/Deploying-prod-build-to-Apache-2" rel="nofollow noreferrer">Angular apache example</a> (.htaccess):

<pre><code>&lt;IfModule mod_rewrite.c&gt;
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . index.html [L]
&lt;/IfModule&gt;
</code></pre>

<a href="https://medium.com/better-programming/how-to-properly-get-angular-and-nginx-working-together-for-development-3e5d158734bf" rel="nofollow noreferrer">Nginx example</a> (nginx.conf):

<pre><code>server {
 listen 80;

 server_name your.app;

 location / {
 proxy_pass http://localhost:4200;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection $http_connection;
 proxy_set_header Host $host;
 }
}
</code></pre>

blocks|key|2756105|text|正如其他人所写的，这只是一个重定向到index.html的问题，而不是将404抛到服务器端。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2756106|有一个完整的部分，确切地说，关于这个角的网页。|offset|length|2756107|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/guide/deployment#server-configuration^0|0|6|2|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

As other people wrote, it's just a matter of redirect to index.html instead of throwing 404 on the server side.

There's a whole <a href="https://angular.io/guide/deployment#server-configuration" rel="nofollow noreferrer">section</a> that talks exactly about this on Angular's webpage.

blocks|key|2756140|text|这是因为您的服务器不知道路由。服务器只理解一条路由，即index.html|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2756141|加载索引页时，将显示客户端呈现。角确定要在客户端加载的组件，并加载适当的组件。|2756142|当您使用页面中的链接导航时，跟踪您的网络调用，您将看到没有任何请求进入后端。当您重新加载路由时，整个路由将转到服务器，并抛出404。|2756143|您可以使用HashLocationStrategy。这将在您的路线#/类别/水果/苹果中添加#。|2756144|在#加载主页面之后，所有服务器都将忽略该路由，这将允许客户端再次呈现。|2756145|如果希望使用do服务器端呈现，请查看https://angular.io/guide/universal。|offset|length|2756146|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/guide/universal^0|0|0|0|0|0|I|Y|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

Its because your server does not know the route. The server understands only one route 
i.e. index.html

When the index page is loaded, client side rendering comes into picture. Angular determines the component to be loaded at client side and loads appropriate component.

When you navigate using links in the page, track your network calls, you will see that no request goes to backend. When you reload the route, then this entire route goes to server and it throws 404.

You can use HashLocationStrategy. This would append # in your route #/category/fruit/apple

All servers will ignore the route after # loading the main page, which would allow client side rendering again.

If you wish the do server side rendering, have a look at <a href="https://angular.io/guide/universal" rel="nofollow noreferrer">https://angular.io/guide/universal</a>

blocks|key|2756187|text|在nodejs中使用index.html返回|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2756188|+//+Redirect+all+the+other+requests
++++this.app.get('*',+(req:+Request,+res:+Response)+=>+{
++++++++if+(allowedExt.filter((ext)+=>+req.url.indexOf(ext)+>+0).length+>+0)+{
++++++++++++res.sendFile(path.resolve(`dist/assets/${req.url.split('?')[0]}`));
++++++++}+else+{
++++++++++++res.sendFile(path.resolve('dist/app/index.html'));
++++++++}
++++});|code-block|syntax|javascript|2756189|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

in nodejs return with index.html

<pre><code> // Redirect all the other requests
 this.app.get('*', (req: Request, res: Response) =&gt; {
 if (allowedExt.filter((ext) =&gt; req.url.indexOf(ext) &gt; 0).length &gt; 0) {
 res.sendFile(path.resolve(`dist/assets/${req.url.split('?')[0]}`));
 } else {
 res.sendFile(path.resolve('dist/app/index.html'));
 }
 });
</code></pre>

blocks|key|2124627|text|也有一个只有前端的解决方案(所以，零配置服务器端)，即哈希路由.加一行|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2124628|useHash:+true|code-block|syntax|javascript|2124629|在根路由器模块的配置(然后，urls将类似于http://myserver/#/category/fruit/apple)。|offset|length|style|CODE|2124630|entityMap^0|0|0|M|12|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

There is a frontend-only solution (so, zero configuration server-side), too, namely hash routing. Add a line

<pre><code>useHash: true
</code></pre>

in the root router module's configuration (then, the urls will look something like <code>http://myserver/#/category/fruit/apple</code>).

I have an angular project which has multiple routes say <code>/category/fruit/apple</code> so the full url is <code>http://myserver/category/fruit/apple</code> through router link everything is fine but if I open this link directly in typing in URL then it is <code>404</code> my backend is nodejs with express. And the 404 make sense as there is no route configured like this.

My Question, In this kind of situation how should I handle? 

I thought I had, redirect to root <a href="http://myserver?path=category-fruit-apple" rel="noreferrer">http://myserver?path=category-fruit-apple</a> and from the root component do the dynamic routing. Is it the correct way ?

Please suggest the best way.

Angular URL mapping with routes for initial load

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

/category/fruit/apple说，我有一个有多个路由的角度项目，所以完整的url是http://myserver/category/fruit/apple，通过路由器链接，一切都很好，但是如果我在输入URL时直接打开这个链接，那么就是404，我的后端是带有404的nodejs。而404是有意义的，因为没有像...

问带有初始负载路由的角URL映射
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有初始负载路由的角URL映射EN