New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Router: Use '**' wildcard as catch-all to lazy loaded module with child routes #13848

Closed
NathanWalker opened this Issue Jan 9, 2017 · 15 comments

Comments

Projects
None yet
@NathanWalker
Contributor

NathanWalker commented Jan 9, 2017

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

The '**' catch-all definition lazily loads the module, however it does not properly handle the child routes.

Expected behavior

Lazy load the module and properly handle all the child routes. The catch-all '**' lazily loaded module could either define more '**' catch-all's with other lazy loaded modules or it could of course also have it's own '**' catch-all to just a component to show a not found component if desired.

Minimal reproduction of the problem with instructions

This SO post describes the issue:
http://stackoverflow.com/questions/40276372/angular-router-wildcard-as-a-catch-all-with-child-routes-using-latest-2-4

This plunkr demonstrates the issue:
https://plnkr.co/edit/QfXx5KJGfhMskIldA0AA?p=preview

If you open the console, you will see created [NameComponent] for each link you click on except the 'whatever' link which lazily loads the AnythingModule.

What is the motivation / use case for changing the behavior?

More flexible routing setups.

Please tell us about your environment:

Mac os Sierra

  • Angular version: 2.0.X

Angular 2.4.0, Router: 3.4.1

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

All

  • Language: [all | TypeScript X.X | ES6/7 | ES5]

TypeScript

  • Node (for AoT issues): node --version =

Node 6.9.1, npm 3.10.1

/cc @zoechi since he had helped initially with the SO post. Thank you!

@DzmitryShylovich

This comment has been minimized.

Show comment
Hide comment
@DzmitryShylovich

DzmitryShylovich Jan 9, 2017

Contributor

It's a bug.

Contributor

DzmitryShylovich commented Jan 9, 2017

It's a bug.

@NathanWalker

This comment has been minimized.

Show comment
Hide comment
@NathanWalker

NathanWalker Jan 9, 2017

Contributor

Thanks @DzmitryShylovich just edited original description to specify bug. (wasn't sure if this was outside original design - didn't think so). 👍

Contributor

NathanWalker commented Jan 9, 2017

Thanks @DzmitryShylovich just edited original description to specify bug. (wasn't sure if this was outside original design - didn't think so). 👍

DzmitryShylovich pushed a commit to DzmitryShylovich/angular that referenced this issue Jan 10, 2017

DzmitryShylovich pushed a commit to DzmitryShylovich/angular that referenced this issue Jan 10, 2017

@dherges

This comment has been minimized.

Show comment
Hide comment
@dherges

dherges Apr 21, 2017

Contributor

@DzmitryShylovich @NathanWalker did this fix make it into a release?

Contributor

dherges commented Apr 21, 2017

@DzmitryShylovich @NathanWalker did this fix make it into a release?

@dherges

This comment has been minimized.

Show comment
Hide comment
@dherges

dherges Apr 21, 2017

Contributor

duplicated by #12024, #12955 ? there was a fix in #12024 but appears to not work in 2.4.x

Tried various combinations in 2.4.x

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

this fails (module is loaded, no component is shown for url /):

{
  path: '**',
  loadChildren: './+content/content.module#ContentModule'
}

setting to constant value works (module loaded, component shown for url /content)

{
  path: 'content',
  loadChildren: './+content/content.module#ContentModule'
}

prefixing with a path and a catch-all fails (error message Promise rejection: Cannot match any routes. URL Segment: 'content/foo' for url /content/foo):

{
  path: 'content/**',
  loadChildren: './+content/content.module#ContentModule'
}

setting to empty string works (module loaded, component shown):

{
  path: '',
  loadChildren: './+content/content.module#ContentModule'
}
Contributor

dherges commented Apr 21, 2017

duplicated by #12024, #12955 ? there was a fix in #12024 but appears to not work in 2.4.x

Tried various combinations in 2.4.x

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

this fails (module is loaded, no component is shown for url /):

{
  path: '**',
  loadChildren: './+content/content.module#ContentModule'
}

setting to constant value works (module loaded, component shown for url /content)

{
  path: 'content',
  loadChildren: './+content/content.module#ContentModule'
}

prefixing with a path and a catch-all fails (error message Promise rejection: Cannot match any routes. URL Segment: 'content/foo' for url /content/foo):

{
  path: 'content/**',
  loadChildren: './+content/content.module#ContentModule'
}

setting to empty string works (module loaded, component shown):

{
  path: '',
  loadChildren: './+content/content.module#ContentModule'
}
@tskweres

This comment has been minimized.

Show comment
Hide comment
@tskweres

tskweres May 10, 2017

Is there a fix for this in the works?

tskweres commented May 10, 2017

Is there a fix for this in the works?

@tskweres

This comment has been minimized.

Show comment
Hide comment
@tskweres

tskweres May 22, 2017

@DzmitryShylovich @NathanWalker anyone know any version where this works?

tskweres commented May 22, 2017

@DzmitryShylovich @NathanWalker anyone know any version where this works?

@jasonaden jasonaden self-assigned this Jun 6, 2017

@jasonaden

This comment has been minimized.

Show comment
Hide comment
@jasonaden

jasonaden Jun 6, 2017

Contributor

I'll be taking a look at the PR that should fix this issue. Hopefully we can get this into an upcoming release.

Contributor

jasonaden commented Jun 6, 2017

I'll be taking a look at the PR that should fix this issue. Hopefully we can get this into an upcoming release.

jasonaden added a commit to jasonaden/angular that referenced this issue Jul 14, 2017

fix(router): fix wildcard route with lazy loaded module (again)
Closes angular#13848

Description:
We doesn't handle children of wildcard route properly link. It's always an empty array.

Created from angular#13851

mhevery added a commit to jasonaden/angular that referenced this issue Jul 26, 2017

fix(router): fix wildcard route with lazy loaded module (again)
Closes angular#13848

Description:
We doesn't handle children of wildcard route properly link. It's always an empty array.

Created from angular#13851
@MrSnappingTurtle

This comment has been minimized.

Show comment
Hide comment
@MrSnappingTurtle

MrSnappingTurtle Aug 30, 2017

Am having this issue with 4.2.4. @jasonaden Any updates on your PR? Looks like the build is failing. Thanks!

MrSnappingTurtle commented Aug 30, 2017

Am having this issue with 4.2.4. @jasonaden Any updates on your PR? Looks like the build is failing. Thanks!

@Suzukaze-Yoru

This comment has been minimized.

Show comment
Hide comment
@Suzukaze-Yoru

Suzukaze-Yoru Sep 4, 2017

router 4.3.6 also having this issue

Suzukaze-Yoru commented Sep 4, 2017

router 4.3.6 also having this issue

@sopretty

This comment has been minimized.

Show comment
Hide comment
@sopretty

sopretty Nov 10, 2017

I'm using Angular 5 and I have the same issue :
Module is loaded, but no component is shown for different url then 'error' or '/'.

const ROUTES: Routes = [
  {path: '', component: LoginComponent, canActivate: [LoginGuard]},
  {path: 'error', loadChildren: './modules/error/error.module#ErrorModule'},
  {path: '**', loadChildren: './modules/error/error.module#ErrorModule'},
];

sopretty commented Nov 10, 2017

I'm using Angular 5 and I have the same issue :
Module is loaded, but no component is shown for different url then 'error' or '/'.

const ROUTES: Routes = [
  {path: '', component: LoginComponent, canActivate: [LoginGuard]},
  {path: 'error', loadChildren: './modules/error/error.module#ErrorModule'},
  {path: '**', loadChildren: './modules/error/error.module#ErrorModule'},
];
@DominicBoettger

This comment has been minimized.

Show comment
Hide comment
@DominicBoettger

DominicBoettger Nov 10, 2017

Same problem here with angular4 and angular5

DominicBoettger commented Nov 10, 2017

Same problem here with angular4 and angular5

@customcodepl

This comment has been minimized.

Show comment
Hide comment
@customcodepl

customcodepl Nov 20, 2017

I have used:
{path: 'error', loadChildren: './pages/error/error.module#ErrorModule'}, {path: '**', redirectTo: 'error', pathMatch: 'full'}

customcodepl commented Nov 20, 2017

I have used:
{path: 'error', loadChildren: './pages/error/error.module#ErrorModule'}, {path: '**', redirectTo: 'error', pathMatch: 'full'}

@yarrgh

This comment has been minimized.

Show comment
Hide comment
@yarrgh

yarrgh Nov 30, 2017

I've used the same as @customcodepl using a redirect on a wildcard "catch all" route. Redirecting to a lazy loaded route/module works as expected.

yarrgh commented Nov 30, 2017

I've used the same as @customcodepl using a redirect on a wildcard "catch all" route. Redirecting to a lazy loaded route/module works as expected.

jasonaden added a commit to jasonaden/angular that referenced this issue Dec 21, 2017

fix(router): fix wildcard route with lazy loaded module (again)
Closes angular#13848

Description:
We doesn't handle children of wildcard route properly link. It's always an empty array.

Created from angular#13851

IgorMinar added a commit that referenced this issue Dec 22, 2017

fix(router): fix wildcard route with lazy loaded module (again) (#18139)
Closes #13848

Description:
We doesn't handle children of wildcard route properly link. It's always an empty array.

Created from #13851

PR Close #18139

@IgorMinar IgorMinar closed this in 5ba1cf1 Dec 22, 2017

@dereklin

This comment has been minimized.

Show comment
Hide comment
@dereklin

dereklin Dec 29, 2017

@customcodepl @yarrgh

I am using Angular 5.1.2

When I use the redirect approach, my "root" redirect no longer works.

Here is my set up:

const routes: Routes = [
  {
    path: '',
    component: CoreComponent,
    children: [
      { path: '', redirectTo: 'f1', pathMatch: 'full' },
      { path: 'f1', component: Feature1Component },
      { path: 'f2', component: Feature2Component },
      { path: 'not-found', loadChildren: '@nx-demo-jest/not-found/src/not-found.module#NotFoundModule' },
      {
        path: '**',
        // component: NotFoundComponent // this works
        // loadChildren: '@nx-demo-jest/not-found/src/not-found.module#NotFoundModule' // this doesn't
        redirectTo: 'not-found', pathMatch: 'full' // the root (/) redirects to non-found
      },
    ]
  }
];

When I go to /f1, it goes to Feature1Component
When I go to /, it gets redirected to not-found; it should be redirected to f1 instead.

Here is my github repo:

https://github.com/dereklin/nx-demo-jest/tree/wildcard-route-lazy-load-1

dereklin commented Dec 29, 2017

@customcodepl @yarrgh

I am using Angular 5.1.2

When I use the redirect approach, my "root" redirect no longer works.

Here is my set up:

const routes: Routes = [
  {
    path: '',
    component: CoreComponent,
    children: [
      { path: '', redirectTo: 'f1', pathMatch: 'full' },
      { path: 'f1', component: Feature1Component },
      { path: 'f2', component: Feature2Component },
      { path: 'not-found', loadChildren: '@nx-demo-jest/not-found/src/not-found.module#NotFoundModule' },
      {
        path: '**',
        // component: NotFoundComponent // this works
        // loadChildren: '@nx-demo-jest/not-found/src/not-found.module#NotFoundModule' // this doesn't
        redirectTo: 'not-found', pathMatch: 'full' // the root (/) redirects to non-found
      },
    ]
  }
];

When I go to /f1, it goes to Feature1Component
When I go to /, it gets redirected to not-found; it should be redirected to f1 instead.

Here is my github repo:

https://github.com/dereklin/nx-demo-jest/tree/wildcard-route-lazy-load-1

@dereklin

This comment has been minimized.

Show comment
Hide comment
@dereklin

dereklin Dec 29, 2017

Oh. Nevermind, the wildcard redirect actually works. What I am seeing here is the forChild routes overriding another forChild routes.

In my NotFoundModule, I set my routes like this:

RouterModule.forChild([{ path: '', component: NotFoundComponent }])

And when I import it here:

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    NotFoundModule
  ],
  exports: [RouterModule]
})
export class CoreRoutingModule {}

the path: '' overrides the parent routes. That's why I am getting not-found when I go to /

dereklin commented Dec 29, 2017

Oh. Nevermind, the wildcard redirect actually works. What I am seeing here is the forChild routes overriding another forChild routes.

In my NotFoundModule, I set my routes like this:

RouterModule.forChild([{ path: '', component: NotFoundComponent }])

And when I import it here:

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    NotFoundModule
  ],
  exports: [RouterModule]
})
export class CoreRoutingModule {}

the path: '' overrides the parent routes. That's why I am getting not-found when I go to /

jmleoni pushed a commit to jmleoni/angular that referenced this issue Oct 6, 2018

fix(router): fix wildcard route with lazy loaded module (again) (angu…
…lar#18139)

Closes angular#13848

Description:
We doesn't handle children of wildcard route properly link. It's always an empty array.

Created from angular#13851

PR Close angular#18139
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment