问题描述
我正在尝试将我的 Angular 应用程序部署到在 url 中具有附加位置步骤的生产环境，例如www.production-server.com/name-of-my-app 附加到它.
I am trying to deploy my angular application to a production environment that has an additional location step in url e.g. www.production-server.com/name-of-my-app appended to it.
当我通过 localhost:4200 上的 angular cli 运行它并通过页面重定向时，我的应用程序工作得很好，例如从 localhost:4200/page1 到 localhost:4200/page2.
My application works just fine when I run it through angular cli on localhost:4200 and redirects through pages like it is supposed to for example from localhost:4200/page1 to localhost:4200/page2.
但是当我尝试设置基本 href
But when I try to set the base href
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"baseHref" : "/name-of-my-app/",
"outputPath": "dist",
"index": "src/index.html",
...
并像这样配置我的路由:
and configure my Routes like this:
const routes: Routes = [
Route.withShell([
{path: '', redirectTo: '/sredstva', pathMatch: 'full'},
{path: 'sredstva', component: OsebnasredstvaComponent, data: {title: extract('Osebna sredstva')}}
])
];
/**
* Provides helper methods to create routes.
*/
export class Route {
/**
* Creates routes using the shell component and authentication.
* @param routes The routes to add.
* @return {Route} The new route using shell as the base.
*/
static withShell(routes: Routes): ngRoute {
return {
path: '',
component: ShellComponent,
children: routes,
canActivate: [AuthenticationGuard],
// Reuse ShellComponent instance when navigating between child views
data: { reuse: true }
};
}
}
应用程序仍然路由 localhost:4200/page1 到页面 localhost:4200/page2 而不是 localhost:4200/name-of-my-app/page1 和 localhost:4200/name-of-my-app/page2.这是为什么?
The application still routs localhost:4200/page1 to page localhost:4200/page2 instead of localhost:4200/name-of-my-app/page1 and localhost:4200/name-of-my-app/page2. Why is that?
我想补充一点，当我检查页面时，base href 显示正确.但它没有显示在 URL 中.
I would like to add that the base href is showing up correctly when I inspect the page. But it doesn't show up in the URL.
推荐答案
base href 仅在生产中使用.如果您仍想在部署前查看它的行为，您可以尝试以下操作:
The base href is used only in production. If you still want to see how it behaves before deployment you could try the following:
在第一个终端上，在 watch 模式下运行 ng build 命令将应用程序编译到 dist 文件夹:
On the first terminal, run the ng build command in watch mode to compile the application to the dist folder:
ng build --watch --outputPath=outputPath --baseHref=baseHref
在第二个终端上，安装一个 Web 服务器(例如 lite-server)，并针对输出文件夹运行它.例如:
On the second terminal, install a web server (such as lite-server), and run it against the output folder. For example:
lite-server --baseDir="dist"
您可以从官方文档此处阅读更多相关信息.
You can read more about it from the official docs here.
这篇关于Angular base href 未显示在 URL 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！