ng build --prod breaks routes created using multiple variables - Error: cannot match any routes

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

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

Versions.

@angular/cli: 1.1.1
node: 6.9.4
os: win32 x64
@angular/animations: 4.2.3
@angular/common: 4.2.3
@angular/compiler: 4.2.3
@angular/core: 4.2.3
@angular/forms: 4.2.3
@angular/http: 4.2.3
@angular/platform-browser: 4.2.3
@angular/platform-browser-dynamic: 4.2.3
@angular/router: 4.2.3
@angular/cli: 1.1.1
@angular/compiler-cli: 4.2.3
@angular/language-service: 4.2.3

Repro steps.

Create app-routing.module.ts as follows.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FooComponent } from './foo.component';

const orgRoutes: Routes = [{
  path: 'foo',
  component: FooComponent,
}];

const newRoutes: Routes = orgRoutes;

@NgModule({
  imports: [RouterModule.forRoot(newRoutes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }

Run ng build --prod.
Host application on ANY web server.
RESULT: Route /foo does not work - Throws error as mentioned in The log given by the failure. section.

The log given by the failure.

Error log in web browser dev console when the route is accessed:

Error: Cannot match any routes. URL Segment: 'foo1'
    at t.BkNc.t.noMatchError (vendor.71f4b3d….bundle.js:228)
    at e.selector (vendor.71f4b3d….bundle.js:228)
    at e.error (vendor.71f4b3d….bundle.js:557)
    at e.T14+.e._error (vendor.71f4b3d….bundle.js:270)
    at e.T14+.e.error (vendor.71f4b3d….bundle.js:270)
    at e.T14+.e._error (vendor.71f4b3d….bundle.js:270)
    at e.T14+.e.error (vendor.71f4b3d….bundle.js:270)
    at e.T14+.e._error (vendor.71f4b3d….bundle.js:270)
    at e.T14+.e.error (vendor.71f4b3d….bundle.js:270)
    at e.T14+.e._error (vendor.71f4b3d….bundle.js:270)
    at t.BkNc.t.noMatchError (vendor.71f4b3d….bundle.js:228)
    at e.selector (vendor.71f4b3d….bundle.js:228)
    at e.error (vendor.71f4b3d….bundle.js:557)
    at e.T14+.e._error (vendor.71f4b3d….bundle.js:270)
    at e.T14+.e.error (vendor.71f4b3d….bundle.js:270)
    at e.T14+.e._error (vendor.71f4b3d….bundle.js:270)
    at e.T14+.e.error (vendor.71f4b3d….bundle.js:270)
    at e.T14+.e._error (vendor.71f4b3d….bundle.js:270)
    at e.T14+.e.error (vendor.71f4b3d….bundle.js:270)
    at e.T14+.e._error (vendor.71f4b3d….bundle.js:270)
    at u (polyfills.07685bc….bundle.js:43)
    at u (polyfills.07685bc….bundle.js:43)
    at polyfills.07685bc….bundle.js:43
    at t.invokeTask (polyfills.07685bc….bundle.js:36)
    at Object.onInvokeTask (vendor.71f4b3d….bundle.js:139)
    at t.invokeTask (polyfills.07685bc….bundle.js:36)
    at r.runTask (polyfills.07685bc….bundle.js:36)
    at o (polyfills.07685bc….bundle.js:36)
    at <anonymous>

Screenshot of error (if required):

Desired functionality.

Route /foo should work properly, i.e. should load FooComponent in page.

Mention any other details that might be useful.

Alternatively, if you Create app-routing.module.ts as follows.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FooComponent } from './foo.component';

const orgRoutes: Routes = [{
  path: 'foo',
  component: FooComponent,
}];

@NgModule({
  imports: [RouterModule.forRoot(orgRoutes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }

(Notice that I am using only one variable now, to set RouterModule.forRoot().)
Run ng build --prod.
Host application on ANY web server.
RESULT: Route /foo DOES WORK properly here.

Angular app sample repository: https://github.com/kichnan/ng-app

I'm attaching two main.bundle.js files.
Bundle that works: main.c70bc6dc97933f4525f1.bundle.txt
Bundle that does NOT work: main.d2818fc0b709592f3eeb.bundle.txt

NOTE:
The source file app-routes.ts has TWO variables: orgRoutes and routes. If I use the first-created variable, orgRoutes, then my application works fine. If I use the second variable routes which is created using orgRoutes, then the app fails. The bundle does NOT contain routes variable AT ALL.

This is essentially the same as #6782. We don't currently support this kind of indirection.

@kichnan upon discussion in #6782, this one doesn't seem to be related.

If http://localhost:4205/ works, but http://localhost/ng-app-sample/ does not and fails with a runtime error about missing routes, then I think the problem you are facing is one of deployment.

Make sure to correctly match the base tag to your subfolder (ng build --base-href=/ng-app-sample/). More information can be found in https://angular.io/guide/deployment#the-base-tag.

@filipesilva

Thanks @filipesilva . I'm entirely sure it is not a deployment/hosting issue. I have my base-href set properly (without which the app does not work at all). It is definitely a build issue. You can read the "Mention any other details that might be useful." section. The dev-mode bundle file contains the new route variable. The prod bundle file does NOT, at all.

Code example:

const appRoutes = [...]; // I define some routes here
const newRoutes = appRoutes; // a dead simple referencing

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)] // this works
  ...
  imports: [RouterModule.forRoot(newRoutes)] // this does NOT work
})

My original post has the required details without any ambiguity to reproduce the issue. You can try it on a sample app in your local too.

Thanks!!

I'm sorry but I don't follow. The Repro steps. section of your issue show how the build works on one host (http://localhost:4205/) but not another (http://localhost/ng-app-sample/). That to me sounds like a deployment problem.

If those aren't the correct repro steps, please clarify.

I think issue is not about deployment - see screenshot in the topic - app works under that address, just routing does not work.

@kichnan means that dynamically created routes (the array dynamically pushed values) does not work when app is built for production with AOT.

https://github.com/kichnan/ng-app/blob/master/src/app/app-routes.ts#L30

But works when use statically created routes (plain hardcoded array) https://github.com/kichnan/ng-app/blob/master/src/app/app-routes.ts#L11

Can you confirm?

@tytskyi

@tytskyi thank you! Yes, that is exactly what I meant.

@filipesilva I have updated the issue description. Please go through the Repro steps. section AND Mention any other details that might be useful. section. Thanks.

@filipesilva

@filipesilva hope you were able to understand/reproduce the issue now. Should this be reopened as a bug then?

I'm looking at https://github.com/kichnan/ng-app. It doesn't match app-routing.module.ts as you describe them in your post, but https://github.com/kichnan/ng-app/blob/master/src/app/app-routes.ts seem to have the routes and orgRoutes variables.

Looking at them I can tell you this is not supported. Static analysis will never figure out what your routes variable will have at runtime.

This behavior is not a bug then, it is as intended.

@filipesilva

Thanks @filipesilva. Yes, app-routes.ts would be the file to check.

Ok, understood, static analysis will never work on this. So, can you suggest me any alternatives, so that I can add routes like such? I have read about router.resetConfig(...), but I couldn't make it work with route definitions in the child module (e.g. NavigationModule in my repo). It only worked on the parent app-routing.module.ts.

Any help would be great. Thanks.

It's not really easy to get both AOT and dynamic components AFAIK. I don't have an answer off the top of my head, the better place to ask is Stack Overflow or perhaps the main Angular repo, if a bug is suspected.

ok great. thank you for your reply.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

ng build --prod breaks routes created using multiple variables - Error: cannot match any routes #6784

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

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ng build --prod breaks routes created using multiple variables - Error: cannot match any routes #6784

Description

Bug Report or Feature Request (mark with an x)

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

Activity

filipesilva commented on Jun 26, 2017

filipesilva commented on Jun 28, 2017

krishnanmk commented on Jul 1, 2017

filipesilva commented on Jul 3, 2017

tytskyi commented on Jul 3, 2017

krishnanmk commented on Jul 3, 2017

krishnanmk commented on Jul 9, 2017

filipesilva commented on Jul 17, 2017

krishnanmk commented on Jul 17, 2017

filipesilva commented on Jul 17, 2017

krishnanmk commented on Jul 18, 2017

angular-automatic-lock-bot commented on Sep 7, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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