angular-cli: ng build --prod breaks routes error "cannot match any routes"

Bug Report or Feature Request (mark with an `x`)

- [ ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.0 node: 6.9.2 os: win32 x64 @angular/common: 4.2.2 @angular/compiler: 4.2.2 @angular/core: 4.2.2 @angular/forms: 4.2.2 @angular/http: 4.2.2 @angular/platform-browser: 4.2.2 @angular/platform-browser-dynamic: 4.2.2 @angular/router: 4.2.2 @angular/cli: 1.0.0 @angular/compiler-cli: 4.2.2

Repro steps.

Simple steps to reproduce this bug. Before bundling the app it works all fine, but once its bundled up it somehow can’t find any routes on IE but works on chrome just fine.

ng build --prod --base-href ./ this seems to work on chrome, but not IE if the base is just / it doesn’t work at all. Then just redirects me to the IIS root folder. Tried --base-href='/Demo/AppFiles/ didn’t work as well.

I copied the dist folder and stick it to my IIS server.

Router.ts

const routes: Routes = [
    {
        path: '',
        component: CatalogsComponent,
        pathMatch: 'full'
    }
];

export const appRoutingProviders: any[] = [];

// - Updated Export
export const routing = RouterModule.forRoot(routes);

The log given by the failure.

ERRORError: Uncaught (in promise): Error: Cannot match any routes. URL 
Segment: 'SalesNew
Error: Cannot match any routes. URL Segment: 'SalesNew'
   at Anonymous function

Also when I refresh the page it goes to 404 error.

Directory tree

/root
  /Appfolder(SalesNew
    /AppFiles (index.html, etc)

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 6
Comments: 23 (2 by maintainers)

Most upvoted comments

My issue was that I was trying to create my routes array dynamically based on components. Angular 4 uses UglifyJS in production to rename components and types. The result was incorrect routes. Creating a static array of routes fixed the issue for me.

const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
     path: 'login',
     component: LoginComponent
  }
];

jkuczek15 on Jul 29, 2017

@estradamarkie Hi… can you check out my repo and try making that application work? I have my base-href properly set. The dev mode has always built and ran fine when hosted in IIS.

If I compile the app in dev mode, ng build --env=dev --base-href /ng-app-sample/, and host those files, the routing works fine. Hence, I figure that this has got something to do with the “prod” mode. Also, I had someone test the dist file on a different web-server than IIS. It didn’t work there either. (I’ll check with that person again.)

The IIS web.config does a 404 redirection instead of url.rewrite actually. Here it is:

<configuration>
    <system.webServer>
        <httpErrors existingResponse="Replace" errorMode="Custom">
            <remove statusCode="404" subStatusCode="-1" />
            <error statusCode="404" prefixLanguageFilePath="" path="/ng-app-sample/index.html" responseMode="ExecuteURL" />
        </httpErrors>
    </system.webServer>
    <system.web>
        <sessionState mode="Off" />
        <httpRuntime
            requestValidationMode="2.0"
            requestPathInvalidCharacters="&lt;,&gt;,%,&amp;,\,?,*" />
        <pages validateRequest="false" />
    </system.web>
</configuration>

krishnanmk on Jun 22, 2017