3

I'm following this link to implement localization in Angular using i18n.

When i navigate to "url/en" or "url/fr", instead of pointing to respective directory folders it is trying to search for a route and giving the below error message.

core.js:15723 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'fr'

I have created this Angular 7 project using VS2019. For the backend i'm using asp.net core 2.2 web api.

Running following commands shows the page with the correct translations locally.

ng serve --configuration=fr

My angular.json file as shown below. enter image description here

My Package.json file as shown below enter image description here

I have configured route in this way in app.modules.ts

RouterModule.forRoot([
  {
    path:'',      
    component:HomeComponent,
    canActivate:[AuthGuard]
  },

I modified the .csproj file in this way.

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-locale" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-locale:ssr" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

Here are my directory structure enter image description here

Arshath Shameer
  • 453
  • 4
  • 15

1 Answers1

0

Looks like you should overide the url on Web server level. For example add web.config:

    <rule name="FR Rule" stopProcessing="true">
      <match url="(fr/)" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/fr/" />
    </rule>
Dmitriy Ivanko
  • 950
  • 8
  • 17