-
Notifications
You must be signed in to change notification settings - Fork 25k
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
Lazy loaded module's resolver is not being kept as singleton #13722
Comments
Will be fixed here #13593 |
please review and merge the above PR |
Our team is facing a similar problem. |
@pkozlowski-opensource duplicate of #12869 |
duplicate of #12869 |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
I'm submitting a ...
Current behavior
What we're trying to achieve:
Our implementation is very similar to the Tour of Heroes example with the resolve guard navigating to another page on failure. See this plunkr example, and click on any crisis under the
Crisis Center
We have produced an example of the problem by extending the Tour of Heroes example.
When
CrisisCenterModule
is lazily loaded, we have observed:CrisisDetailComponent
is different to the instance being injected in toErrorComponent
, which is a sibling route to the activate route. We have confirmed that the resolver is only provided inside theCrisisCenterRoutingModule
, which is inside the lazily loaded module.CrisisCenterModule
and all it's contained modules and components are instantiated twice, with different injectors.When
CrisisCenterModule
module is not lazily loaded, this problem does not occur.This was previously working when we were using Angular 2.1.0, until we upgraded to 2.3.1/2.4.1. We narrowed it down to when the version of
@angular/router
changed from3.1.0
to3.2.0
. This problem did not occur with the beta and RC versions of3.2.0
.We did consider using an intermediate service for the resolver to share the error message to another component, but we experienced the same issue with multiple instances of this service.
Expected behavior
Clicking on a crisis under the
Crisis Center
in this plunkr example, you will seeError component - error message:
, whereas we expect to seeError component - error message: error
.We created another plunkr example where
CrisisCenterModule
module is not lazily loaded, and the problem does not occur.Minimal reproduction of the problem with instructions
We have modified Tour of Heroes example in the following ways:
app/crisis-center/crisis-detail-resolver.service.ts
- Modified to always set theerrorMessage
field, and navigate to theErrorComponent
.app/crisis-center/error.component.ts
- Newly added. Displays theerrorMessage
field from the injectedCrisisDetailResolver
.You can download this example Github project where the
@angular/router
version is3.2.0
. To run:http://localhost:4200
Crisis Center
Error component - This is the error message:
, which is missing the error message from the resolver.CrisisCenterModule
is instantiated twice with different injectors, and the error message is not displayed.To see it working, you must switch the version of
@angular/router
to3.1.0
inpackages.json
, clear thenpm_modules
folder, and re-run the above steps. You should see the following displayed:Error component - This is the error message:I failed to load crisis
. You will also see in the console log that components are only being initialised once.Alternatively, you can reproduce with this plunkr example.
What is the motivation / use case for changing the behavior?
We want the resolver to handle failure to load data and navigate to a component that can handle this failure appropriately. This seems to be the pattern that is shown in the Tour of Heroes example (from the Routing advanced guide).
The alternative would be to modify the resolver to wrap failures in a result object, and let the activated route component handle success and failure cases. We'd like to avoid this, as it would make the component more complex.
Please tell us about your environment:
Mac OS X 10.11.5
Angular version: 2.4.1.
@angular/router
at3.4.1
. Works when router is at3.1.0
.Browser: Chrome 55.0.2883.95
Language: TypeScript 2.0.3
Node (for AoT issues):
node --version
= 6.2.1The text was updated successfully, but these errors were encountered: