Angular 4 routing doesn't work on prod

Question

I'm developing an angular 4 web app, and did routing like so:

const routes: Routes = [
    { path: '', redirectTo: "raids", pathMatch: 'full' },
    {
        path: 'raids',
        component: RaidsContainerComponent
    },
    {
        path: 'gyms',
        component: GymsContainerComponent
    },
    {
        path: 'raid/:rid',
        component: RaidDetailsComponent
    },
    {
        path: 'user',
        component: UsersContainerComponent
    },
    {
        path: 'register',
        component: RegisterComponent
    }, 
    { path: '**', redirectTo: "raids", pathMatch: 'full' }
];

when i'm on local host and I write in the url line localhost/raids it gets me to RaidsContainerComponent as it should, but when I do the same on production after I've published the app, I get:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

How can I fix it?

Answer 1

OK I've figured it out, in order to publish my site to azure i had to make web.config file:

<?xml version="1.0"?>
<configuration>
<system.webServer>
<staticContent>
  <mimeMap fileExtension=".json" mimeType="application/json" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
</staticContent>
</system.webServer>
<system.webServer>
<rewrite>
  <rules>
    <rule name="angular cli routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/index.html" />
    </rule>
  </rules>
</rewrite>
</system.webServer>
</configuration>

but ng-build didn't add it to the dist file so i had to add it manually to the ftp server, now its working.