Comments (11)
Okay, changed it to that now the link works on click (had mediaPlayerModule
set as parent
before), thanks for the help on that. :D
But I noticed a small thing that could still be a problem, when the module is not yet loaded any link that would navigate to /watch/stream/<id>
just links to /watch
(problematic when opened in another tab) is that still something that occurs because I have incorrectly set things up or is that normal and I should just generate a static link from it as placeholder?
from angular.
As the module holds the state definitions, I think that is normal. You can however (and I would encourage you to) split the lazyloaded routes each into a future state to minimize the chunk size and give the future state a full url description. that way the url is always known, even when the state itselt if not.
from angular.
Okay will do that, thank you very much for your help.
Hope you have a pleasant Tuesday :)
from angular.
Hi @Lubjan,
there is a lot missing here - like: do you use angular cli or custom build config?
as long as you do not import that MediaPlayer module into another Module imported in the root module, the cli build generates a chunkfile that is then lazyloaded automatically by the code you shared - same as with angular router, as the dynamic import is the indicator for the bundler
This is not a problem with ui-router btw but most likely with your code or setup. My first guess would be you still import the media player module somewhere so the bundler sees no benefit in chunking it out.
from angular.
Hey,
sorry for the forgotten information there, I use the default CLI no custom configuration.
As you pointed out, I did indeed forget to remove the MediaPlayerModule (and others) from the app.module.ts, resulting in no generated chunks. Removing them now generates them.
But now it won't let me navigate to any routes of lazy modules, gotta figure out why.
from angular.
@Lubjan: you forgot the url for the lazyloading future state.
you need the url in the future state, otherwise ui-router does not activate the state afaik.
url: '/player'
in your case should work
from angular.
Okay I've added the url
{
name: 'mediaPlayerModule.**',
+ url: '/watch',
loadChildren: async () => import('./modules/media-player/media-player.module').then((m) => m.MediaPlayerModule),
},
and adjusted the children accordingly
export const states: Ng2StateDeclaration[] = [
{
name: 'mediaPlayerModule',
abstract: true,
},
{
name: 'stream',
- url: '/stream/:id?t',
+ url: '/watch/stream/:id?t',
component: MediaPlayerComponent,
params: {
t: {
type: 'int',
inherit: false,
},
},
resolve: {
info: [
ApiService, Transition,
async (api: ApiService, trans: Transition) => api.mediaInfo({ episode: trans.params().id }).toPromise(),
],
playlist: [
ApiService, Transition,
async (api: ApiService, trans: Transition) => api.mediaPlaylist({ episode: trans.params().id }).toPromise(),
],
discoverySimilar: [
ApiService, Transition,
async (api: ApiService, trans: Transition) => api.discoverySimilar().toPromise(),
],
},
data: { enabled: environment.modules.streams },
},
];
Navigating to localhost:4200/watch/stream/<id>
works fine, but when used as a link (e.g. <a uiSref="stream" [uiParams]="{id:519}">stream</a>
) it won't navigate, only after a link with uiSref="mediaPlayer.mediaPlayer"
is clicked it will resolve them. I feel extremely dumb right now.
Any idea where my problem could lie?
from angular.
I would argue that stream
is not a child of mediaPlayerModule
.
Eigher call it mediaPlayerModule.stream
or set parent: 'mediaPlayerModule'
.
Not sure why you use that abstract though. seems unnecessary if you only have 1 route.
In general: mediaPlayerModule.**
means als children of mediaPlayerModule (including itself) are to be found in this lazy chunk, so they must be nested accordingly.
In link you would call it like mediaPlayerModule.stream
anyways if you are not a sibling of this route (e.G. mediaPlayerModule.info
)
from angular.
I also tried mediaPlayerModule.stream
before but with the same result, only difference being that there was no component loaded when navigated directly to (resolvers did load though).
There are other sub-routes planned, that's why stream is a separate child of mediaPlayerModule
and itself being abstract.
from angular.
have you tried adding a layout view (can be an empty component with
<div ui-view></div>
) to your abstract? I have to admit I have not tried an abstract state without view.
That fixed the view being empty, but the links can still not be navigated to unless the link to the parent is used once.
Is there by any chance a setting (that I may have overlooked) to tell UI router to load lazy modules as soon as the initial chunk finished loading like in Angulars preloadingStrategy
for the default router. But I guess the problem would still stand for users with slow connections.
from angular.
As I said, they need to be nested. There is no stream
state in root.
You tell root all there is, but a future state indicates, there is more nested here with this name after lazyloading.
mediaPlayerModule.stream
is the identifyer coming from root, however you have to tell him in the state (by naming it like that or by adding the parent, as I stated before). Navigation via URL works, as you tell him to look into all states after loading that module in /watch
and there is a state that matches the given url in there. however it is not a child of abstract mediaPlayerModule
from angular.
Related Issues (20)
- Support Angular 11 HOT 1
- Angular 12 HOT 8
- Future of ui-router? HOT 6
- Error: State 'quizzes' is already defined HOT 2
- uiSref doesn't work unless matching "name". Can't use full path/name. HOT 2
- Incompatibility with Angular v13 - removal of `NgModuleFactoryLoader` HOT 1
- Angular 13 Support (libs update) and version policy HOT 13
- [Discussion] Monorepo requirements for ui-router packages HOT 11
- Redirects on local anchor reference HOT 2
- onError not redirecting HOT 1
- Angular v14 support HOT 2
- [bug(?)]: future state declaration's data not passed/merged to/with loaded child state HOT 1
- Angular 15 support HOT 5
- MergeInjector breaks normal Angular DI priority HOT 3
- [question] Lazy loaded module empty after creating
- Breaks when building with Angular 16
- Angular 16 support HOT 9
- Angular 17 support HOT 4
- Incorrect Ui Routing on iOS 17 safari private browsing mode.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular.