Angular应用中的子文件夹路由问题

Question

这是一个有点奇怪的情况，但我们必须像下面这样构建两个angular应用程序。

App1是主angular应用，位于根目录，其他angular应用位于子文件夹。

• http://www.example.com - App1
• http://www.example.com/subfolder - App2

一切正常，除了App2中的路由，因为它被中的路由配置覆盖了主要应用。

我能够使用下面的命令来构建/部署，并且似乎正在为App2(子文件夹)工作

ng build --prod --base-href /subfolder/ --deploy-url /subfolder/

App1被配置为将未知路由重定向到404页面，如下所示

{ path: '**', redirectTo: '/404' }

如果我在App2上刷新页面的问题。它被重定向到App1中定义的404页面。如。http://www.example.com/subfolder/route1

我如何告诉App1中的angular忽略subfolder下的任何内容，并在App2中使用自己的angular路由?

Answer 1

我不确定这是否会起作用，或者是否有帮助。但是当使用像

这样的基础href时

<base href="/subfolder/" />

我必须创建一个代理配置，例如:

proxy.conf.json

{
"/subfolder/*": {
"target": "http://localhost:4200",
"secure": false,
"logLevel": "debug",
"changeOrigin": true,
"pathRewrite": {
"^/subfolder": ""
}
}
}

并使用以下代理配置提供:

ng serve——proxy-config proxy.conf.json

角。Json你也可以添加代理配置:

"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"proxyConfig": "proxy.conf.json"
}
}
...
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"proxyConfig": "proxy.conf.json"
}
}

你可以在这里找到更多信息。

Answer 2

我在一个项目中遇到了同样的问题，并通过使用<a href=""></a>代替routerLink来处理这个问题。

另一种方法是使用Angular工作区将所有项目合并为一个。