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

[krishnanmk]

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.

[filipesilva]

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

[filipesilva]

@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.

[krishnanmk]

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!!

[filipesilva]

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.

[tytskyi]

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?

[krishnanmk]

@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.

[krishnanmk]

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

[filipesilva]

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.

[krishnanmk]

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.

[filipesilva]

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.

[krishnanmk]

ok great. thank you for your reply.

[angular-automatic-lock-bot]

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.}