在Angular 2中，base href大小写敏感。

Question

我已为一个Angular 2应用程序设置了基本引用，如下所示：

<base href="MyApp"/>

如果我访问 localhost/MyApp ，一切都正常。然而，如果我访问 localhost/myapp ，则路由无法识别。如何告诉 Angular 将基本路由视为不区分大小写？

- Dan O'Leary

---

请看这里：https://dev59.com/pVoV5IYBdhLWcg3wgvDw - Vova Bilyachat

但是再次强调，最好使用小写字母以避免所有这些问题。 - Vova Bilyachat

Answer 1

你需要编写代码来覆盖基础链接。可能可以覆盖的位置是： 1. Angular2: 使路由路径不区分大小写 2. 你可以编写自己的位置策略，在那里忽略大小写敏感性。并且在你的app.module.ts文件中，在提供者部分告诉你的Angular2应用程序使用自定义位置策略。 {provide:LocationStrategy,useClass:CustomPlatformLocation}

- Parth Ghiya

Answer 2

我在路由器配置中添加了基于类型的 base href 作为路由，redirectTo 属性设置为应用程序的默认路由，我的情况是 'login'，因此任何组合的 base href 都可以工作。这更像是一种 hack。

我将该代码写在 app.component.ts 文件中。

ngOnInit() {
   var baseHref  = window.location.pathname.split('/')[1];
   if(baseHref != "" && baseHref != "login")
      this.router.config.Add({path:baseHref,redirectTo:'/login',pathMatch:'full'});
}

注意：正如其他答案所建议的那样，LowerCaseUrlSerializer对我来说并不起作用，因为它要求我应用程序中指定的所有路由都必须是小写的。

- Ashish Jain

Answer 3

我尝试了Parth的方法，但是我找不到一种方法来修复我的问题，使用LocationStrategy方法。

基于这个问题的一些想法，最终得出了以下结果：

import { DefaultUrlSerializer, UrlTree } from "@angular/router";

export class LowercaseUrlSerializer extends DefaultUrlSerializer {

    parse(url: string): UrlTree {

        let urlUpperBaseUrl = url;

        if (url.startsWith("/app")) {
            urlUpperBaseUrl = "/APP" + url.slice(4);
        }
        if (url.startsWith("app")) {
            urlUpperBaseUrl = "APP" + url.slice(3);
        }

        return super.parse(urlUpperBaseUrl);
    }

}

你还需要配置注入器：

@NgModule({
    ...
    providers: [
        ...
        { provide: UrlSerializer, useClass: LowercaseUrlSerializer },
    ],
    ...
})
export class AppModule {
}

希望它有所帮助！

- Bruno Medeiros

Answer 4

使用 <base href="./"> 而不是 <base href="MyApp"/>（隐式）解决了我的问题。现在虚拟目录是不区分大小写的。

- user3292624

---

我怀疑这只能工作，因为您的网站没有任何深层导航URL。如果有人访问了您网站中的深层链接（例如“MyApp/Admin/Configure”），这将会错误地设置基本URL（例如“MyApp/Admin”）。 - StriplingWarrior