Lazy loading auxiliary routes
Here the scenario,
I have a mainpage with 3 routes (child of mainpage each lazy loaded).
Here the auxiliary component has one primary outlet and other auxiliary as
<router-outlet name="auxone"></router-outlet>
and this is how my mainpage.route file looks
Now my auxilary route loads perfectly and im able to route in primary outlet with any problem. But as soon as i try to load a route in the auxiliary outlet like this
& try to navigate them using
(Aux route has one child as its own, and im trying to load another route as another child for the same aux)
i get errors:
Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'mainpage/aux'
As im unable to see any documentation on how to load and route aux routes lazy loading im at my wits end finding out how to make this work.
where exactly am i going wrong?
Here's my project structure
angular typescript angular2-routing angular2-router3
add a comment |
Here the scenario,
I have a mainpage with 3 routes (child of mainpage each lazy loaded).
Here the auxiliary component has one primary outlet and other auxiliary as
<router-outlet name="auxone"></router-outlet>
and this is how my mainpage.route file looks
Now my auxilary route loads perfectly and im able to route in primary outlet with any problem. But as soon as i try to load a route in the auxiliary outlet like this
& try to navigate them using
(Aux route has one child as its own, and im trying to load another route as another child for the same aux)
i get errors:
Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'mainpage/aux'
As im unable to see any documentation on how to load and route aux routes lazy loading im at my wits end finding out how to make this work.
where exactly am i going wrong?
Here's my project structure
angular typescript angular2-routing angular2-router3
add a comment |
Here the scenario,
I have a mainpage with 3 routes (child of mainpage each lazy loaded).
Here the auxiliary component has one primary outlet and other auxiliary as
<router-outlet name="auxone"></router-outlet>
and this is how my mainpage.route file looks
Now my auxilary route loads perfectly and im able to route in primary outlet with any problem. But as soon as i try to load a route in the auxiliary outlet like this
& try to navigate them using
(Aux route has one child as its own, and im trying to load another route as another child for the same aux)
i get errors:
Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'mainpage/aux'
As im unable to see any documentation on how to load and route aux routes lazy loading im at my wits end finding out how to make this work.
where exactly am i going wrong?
Here's my project structure
angular typescript angular2-routing angular2-router3
Here the scenario,
I have a mainpage with 3 routes (child of mainpage each lazy loaded).
Here the auxiliary component has one primary outlet and other auxiliary as
<router-outlet name="auxone"></router-outlet>
and this is how my mainpage.route file looks
Now my auxilary route loads perfectly and im able to route in primary outlet with any problem. But as soon as i try to load a route in the auxiliary outlet like this
& try to navigate them using
(Aux route has one child as its own, and im trying to load another route as another child for the same aux)
i get errors:
Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'mainpage/aux'
As im unable to see any documentation on how to load and route aux routes lazy loading im at my wits end finding out how to make this work.
where exactly am i going wrong?
Here's my project structure
angular typescript angular2-routing angular2-router3
angular typescript angular2-routing angular2-router3
edited Jan 11 '17 at 9:24
Veve
5,24052747
5,24052747
asked Jan 11 '17 at 9:12
Pratik KelwalkarPratik Kelwalkar
91321018
91321018
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You should not and can not include the outlet:
parameter on the lazy load path. the lazy loaded routes are hidden away from the eagerly loaded application by design.
Instead you should build a module for outlets components and it should have its own routing configuration. In that router configuration you can set up a route to your Auxiliary outlets.
im a bit confused as to what or how its to be to done, correct me if im wrong, Il create another module which will contain the routes required to be loaded in auxiliary route except the wont be lazy loaded something like aux.seperate.module@NgModule( imports : [ CommonsModule,FormsModule,HttpModule, RouterModule.forChild([ path: 'sample-one', component: SampleOneComponent , outlet : 'aux' ]) ], declarations : [ TestUIComponent ], providers : [ TestUIService,SharedDataService ] )
?? export class TestUIModule
– Pratik Kelwalkar
Jan 11 '17 at 9:29
you are correct. I was confused. I found a workaround here: github.com/angular/angular/issues/12842 but I haven't played with it yet
– Nate May
Jan 11 '17 at 9:30
looks like they stuff the lazy load in a child route with a default path''
– Nate May
Jan 11 '17 at 9:31
yes but im not looking for a workaround, anyways thanks :) i guess il wait
– Pratik Kelwalkar
Jan 11 '17 at 9:34
add a comment |
You did nothing wrong, it just was a long lasting bug in angular router, that got fixed (partly) in angular@6.1. Partly because, to achieve your goal, you have to configurate the lazy loaded module in your app routes as unnamed route and instead name the parent route in your lazy loaded module router configuration:
app.routes
const routes: Routes = [
path: '',
redirectTo: 'home',
pathMatch: 'full'
,
/* no name for lazy loaded route */
path: '',
loadChildren: './home/home.module#HomeModule'
,
/* you can add multiple empty routes without conflicts */
path: '',
loadChildren: './about/about.module#AboutModule'
];
@NgModule(
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
)
export class AppRoutingModule
home.routes
export const homeRoutes: Routes = [
/* your lazy loaded module route needs to be named */
path: 'home',
component: HomeComponent,
children: [
path: '',
component: HomeListComponent
,
path: 'form',
component: HomeFormComponent,
outlet: 'popup'
]
];
@NgModule(
imports: [RouterModule.forChild(homeRoutes)],
exports: [RouterModule]
)
export class HomeRoutingModule
while your home component template look like this:
<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>
and the routerLink
has to look like this
[routerLink]="['/home', outlets: popup: ['form'] ]"
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41586738%2flazy-loading-auxiliary-routes%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You should not and can not include the outlet:
parameter on the lazy load path. the lazy loaded routes are hidden away from the eagerly loaded application by design.
Instead you should build a module for outlets components and it should have its own routing configuration. In that router configuration you can set up a route to your Auxiliary outlets.
im a bit confused as to what or how its to be to done, correct me if im wrong, Il create another module which will contain the routes required to be loaded in auxiliary route except the wont be lazy loaded something like aux.seperate.module@NgModule( imports : [ CommonsModule,FormsModule,HttpModule, RouterModule.forChild([ path: 'sample-one', component: SampleOneComponent , outlet : 'aux' ]) ], declarations : [ TestUIComponent ], providers : [ TestUIService,SharedDataService ] )
?? export class TestUIModule
– Pratik Kelwalkar
Jan 11 '17 at 9:29
you are correct. I was confused. I found a workaround here: github.com/angular/angular/issues/12842 but I haven't played with it yet
– Nate May
Jan 11 '17 at 9:30
looks like they stuff the lazy load in a child route with a default path''
– Nate May
Jan 11 '17 at 9:31
yes but im not looking for a workaround, anyways thanks :) i guess il wait
– Pratik Kelwalkar
Jan 11 '17 at 9:34
add a comment |
You should not and can not include the outlet:
parameter on the lazy load path. the lazy loaded routes are hidden away from the eagerly loaded application by design.
Instead you should build a module for outlets components and it should have its own routing configuration. In that router configuration you can set up a route to your Auxiliary outlets.
im a bit confused as to what or how its to be to done, correct me if im wrong, Il create another module which will contain the routes required to be loaded in auxiliary route except the wont be lazy loaded something like aux.seperate.module@NgModule( imports : [ CommonsModule,FormsModule,HttpModule, RouterModule.forChild([ path: 'sample-one', component: SampleOneComponent , outlet : 'aux' ]) ], declarations : [ TestUIComponent ], providers : [ TestUIService,SharedDataService ] )
?? export class TestUIModule
– Pratik Kelwalkar
Jan 11 '17 at 9:29
you are correct. I was confused. I found a workaround here: github.com/angular/angular/issues/12842 but I haven't played with it yet
– Nate May
Jan 11 '17 at 9:30
looks like they stuff the lazy load in a child route with a default path''
– Nate May
Jan 11 '17 at 9:31
yes but im not looking for a workaround, anyways thanks :) i guess il wait
– Pratik Kelwalkar
Jan 11 '17 at 9:34
add a comment |
You should not and can not include the outlet:
parameter on the lazy load path. the lazy loaded routes are hidden away from the eagerly loaded application by design.
Instead you should build a module for outlets components and it should have its own routing configuration. In that router configuration you can set up a route to your Auxiliary outlets.
You should not and can not include the outlet:
parameter on the lazy load path. the lazy loaded routes are hidden away from the eagerly loaded application by design.
Instead you should build a module for outlets components and it should have its own routing configuration. In that router configuration you can set up a route to your Auxiliary outlets.
answered Jan 11 '17 at 9:23
Nate MayNate May
2,00011954
2,00011954
im a bit confused as to what or how its to be to done, correct me if im wrong, Il create another module which will contain the routes required to be loaded in auxiliary route except the wont be lazy loaded something like aux.seperate.module@NgModule( imports : [ CommonsModule,FormsModule,HttpModule, RouterModule.forChild([ path: 'sample-one', component: SampleOneComponent , outlet : 'aux' ]) ], declarations : [ TestUIComponent ], providers : [ TestUIService,SharedDataService ] )
?? export class TestUIModule
– Pratik Kelwalkar
Jan 11 '17 at 9:29
you are correct. I was confused. I found a workaround here: github.com/angular/angular/issues/12842 but I haven't played with it yet
– Nate May
Jan 11 '17 at 9:30
looks like they stuff the lazy load in a child route with a default path''
– Nate May
Jan 11 '17 at 9:31
yes but im not looking for a workaround, anyways thanks :) i guess il wait
– Pratik Kelwalkar
Jan 11 '17 at 9:34
add a comment |
im a bit confused as to what or how its to be to done, correct me if im wrong, Il create another module which will contain the routes required to be loaded in auxiliary route except the wont be lazy loaded something like aux.seperate.module@NgModule( imports : [ CommonsModule,FormsModule,HttpModule, RouterModule.forChild([ path: 'sample-one', component: SampleOneComponent , outlet : 'aux' ]) ], declarations : [ TestUIComponent ], providers : [ TestUIService,SharedDataService ] )
?? export class TestUIModule
– Pratik Kelwalkar
Jan 11 '17 at 9:29
you are correct. I was confused. I found a workaround here: github.com/angular/angular/issues/12842 but I haven't played with it yet
– Nate May
Jan 11 '17 at 9:30
looks like they stuff the lazy load in a child route with a default path''
– Nate May
Jan 11 '17 at 9:31
yes but im not looking for a workaround, anyways thanks :) i guess il wait
– Pratik Kelwalkar
Jan 11 '17 at 9:34
im a bit confused as to what or how its to be to done, correct me if im wrong, Il create another module which will contain the routes required to be loaded in auxiliary route except the wont be lazy loaded something like aux.seperate.module
@NgModule( imports : [ CommonsModule,FormsModule,HttpModule, RouterModule.forChild([ path: 'sample-one', component: SampleOneComponent , outlet : 'aux' ]) ], declarations : [ TestUIComponent ], providers : [ TestUIService,SharedDataService ] )
?? export class TestUIModule – Pratik Kelwalkar
Jan 11 '17 at 9:29
im a bit confused as to what or how its to be to done, correct me if im wrong, Il create another module which will contain the routes required to be loaded in auxiliary route except the wont be lazy loaded something like aux.seperate.module
@NgModule( imports : [ CommonsModule,FormsModule,HttpModule, RouterModule.forChild([ path: 'sample-one', component: SampleOneComponent , outlet : 'aux' ]) ], declarations : [ TestUIComponent ], providers : [ TestUIService,SharedDataService ] )
?? export class TestUIModule – Pratik Kelwalkar
Jan 11 '17 at 9:29
you are correct. I was confused. I found a workaround here: github.com/angular/angular/issues/12842 but I haven't played with it yet
– Nate May
Jan 11 '17 at 9:30
you are correct. I was confused. I found a workaround here: github.com/angular/angular/issues/12842 but I haven't played with it yet
– Nate May
Jan 11 '17 at 9:30
looks like they stuff the lazy load in a child route with a default path
''
– Nate May
Jan 11 '17 at 9:31
looks like they stuff the lazy load in a child route with a default path
''
– Nate May
Jan 11 '17 at 9:31
yes but im not looking for a workaround, anyways thanks :) i guess il wait
– Pratik Kelwalkar
Jan 11 '17 at 9:34
yes but im not looking for a workaround, anyways thanks :) i guess il wait
– Pratik Kelwalkar
Jan 11 '17 at 9:34
add a comment |
You did nothing wrong, it just was a long lasting bug in angular router, that got fixed (partly) in angular@6.1. Partly because, to achieve your goal, you have to configurate the lazy loaded module in your app routes as unnamed route and instead name the parent route in your lazy loaded module router configuration:
app.routes
const routes: Routes = [
path: '',
redirectTo: 'home',
pathMatch: 'full'
,
/* no name for lazy loaded route */
path: '',
loadChildren: './home/home.module#HomeModule'
,
/* you can add multiple empty routes without conflicts */
path: '',
loadChildren: './about/about.module#AboutModule'
];
@NgModule(
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
)
export class AppRoutingModule
home.routes
export const homeRoutes: Routes = [
/* your lazy loaded module route needs to be named */
path: 'home',
component: HomeComponent,
children: [
path: '',
component: HomeListComponent
,
path: 'form',
component: HomeFormComponent,
outlet: 'popup'
]
];
@NgModule(
imports: [RouterModule.forChild(homeRoutes)],
exports: [RouterModule]
)
export class HomeRoutingModule
while your home component template look like this:
<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>
and the routerLink
has to look like this
[routerLink]="['/home', outlets: popup: ['form'] ]"
add a comment |
You did nothing wrong, it just was a long lasting bug in angular router, that got fixed (partly) in angular@6.1. Partly because, to achieve your goal, you have to configurate the lazy loaded module in your app routes as unnamed route and instead name the parent route in your lazy loaded module router configuration:
app.routes
const routes: Routes = [
path: '',
redirectTo: 'home',
pathMatch: 'full'
,
/* no name for lazy loaded route */
path: '',
loadChildren: './home/home.module#HomeModule'
,
/* you can add multiple empty routes without conflicts */
path: '',
loadChildren: './about/about.module#AboutModule'
];
@NgModule(
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
)
export class AppRoutingModule
home.routes
export const homeRoutes: Routes = [
/* your lazy loaded module route needs to be named */
path: 'home',
component: HomeComponent,
children: [
path: '',
component: HomeListComponent
,
path: 'form',
component: HomeFormComponent,
outlet: 'popup'
]
];
@NgModule(
imports: [RouterModule.forChild(homeRoutes)],
exports: [RouterModule]
)
export class HomeRoutingModule
while your home component template look like this:
<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>
and the routerLink
has to look like this
[routerLink]="['/home', outlets: popup: ['form'] ]"
add a comment |
You did nothing wrong, it just was a long lasting bug in angular router, that got fixed (partly) in angular@6.1. Partly because, to achieve your goal, you have to configurate the lazy loaded module in your app routes as unnamed route and instead name the parent route in your lazy loaded module router configuration:
app.routes
const routes: Routes = [
path: '',
redirectTo: 'home',
pathMatch: 'full'
,
/* no name for lazy loaded route */
path: '',
loadChildren: './home/home.module#HomeModule'
,
/* you can add multiple empty routes without conflicts */
path: '',
loadChildren: './about/about.module#AboutModule'
];
@NgModule(
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
)
export class AppRoutingModule
home.routes
export const homeRoutes: Routes = [
/* your lazy loaded module route needs to be named */
path: 'home',
component: HomeComponent,
children: [
path: '',
component: HomeListComponent
,
path: 'form',
component: HomeFormComponent,
outlet: 'popup'
]
];
@NgModule(
imports: [RouterModule.forChild(homeRoutes)],
exports: [RouterModule]
)
export class HomeRoutingModule
while your home component template look like this:
<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>
and the routerLink
has to look like this
[routerLink]="['/home', outlets: popup: ['form'] ]"
You did nothing wrong, it just was a long lasting bug in angular router, that got fixed (partly) in angular@6.1. Partly because, to achieve your goal, you have to configurate the lazy loaded module in your app routes as unnamed route and instead name the parent route in your lazy loaded module router configuration:
app.routes
const routes: Routes = [
path: '',
redirectTo: 'home',
pathMatch: 'full'
,
/* no name for lazy loaded route */
path: '',
loadChildren: './home/home.module#HomeModule'
,
/* you can add multiple empty routes without conflicts */
path: '',
loadChildren: './about/about.module#AboutModule'
];
@NgModule(
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
)
export class AppRoutingModule
home.routes
export const homeRoutes: Routes = [
/* your lazy loaded module route needs to be named */
path: 'home',
component: HomeComponent,
children: [
path: '',
component: HomeListComponent
,
path: 'form',
component: HomeFormComponent,
outlet: 'popup'
]
];
@NgModule(
imports: [RouterModule.forChild(homeRoutes)],
exports: [RouterModule]
)
export class HomeRoutingModule
while your home component template look like this:
<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>
and the routerLink
has to look like this
[routerLink]="['/home', outlets: popup: ['form'] ]"
edited Nov 15 '18 at 23:09
answered Nov 15 '18 at 23:04
Marcello di SimoneMarcello di Simone
1,3521125
1,3521125
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41586738%2flazy-loading-auxiliary-routes%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown