Angular url 不区分大小写

Question

我是 Angular 新手。我有个问题。本地主机:4200/产品工作但本地主机:4200/产品不工作。我尝试；

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

    export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
        parse(url: string): UrlTree {
        return super.parse(url.toLowerCase()); 
        }
    }
    .

    .

    .


      providers: [
            {
                provide: UrlSerializer,
                useClass: LowerCaseUrlSerializer
            }
        ],

但将所有字母变小。我想要所有的链接都可以工作。

/产品

/产品

/产品

/产品

……

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Route } from '@angular/router';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ProductComponent } from './product/product.component';
import { HomeComponent } from './home/home.component';

const routeConfig: Route[] = [
{
  path: '',
  component: HomeComponent
},
{
  path: 'product',
  component:  ProductComponent
}
];

@NgModule({
  declarations: [
    AppComponent,
    ProductComponent,
    HomeComponent
],
  imports: [
    BrowserModule, FormsModule, RouterModule.forRoot(routeConfig)
  ],
  providers: [],

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Title';
}

希望你能理解。抱歉我的英语不好。

Answer 1

您应该添加此provide语句，

providers: [
            {
                provide: UrlSerializer,
                useClass: LowerCaseUrlSerializer
            }
        ],

到 app.module.ts 文件。您的应用程序模块中的提供程序为空。