ngneat / elf-ng-router-store Goto Github PK
View Code? Open in Web Editor NEWBindings to connect Angular router to Elf
License: MIT License
Bindings to connect Angular router to Elf
License: MIT License
Looks like when we call selectQueryParams()
without providing names parameter, it will return original params from the router. However, because the way the function is declared, it cause type error. For example:
routerRepo.selectQueryParams().subscribe(params => {
// type error below, params is inferred as string or string[]
if (params && params['year']) {
...
}
})
I will have do const paramsMap = params as unknown as Params
to bypass the type check. Is this behavior by design? Am I doing something wrong? What should I do if want to work on all params?
Thanks!
master
branch failed. π¨I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. Iβm sure you can fix this πͺ.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here are some links that can help you:
If those donβt help, or if this issue is reporting something you think isnβt right, you can always ask the humans behind semantic-release.
An npm token must be created and set in the NPM_TOKEN
environment variable on your CI environment.
Please make sure to create an npm token and to set it in the NPM_TOKEN
environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/
.
Good luck with your project β¨
Your semantic-release bot π¦π
I couldn't find a way to access the outlet data that is stored in the secondary uri. So when working with Auxiliary Routes im forced to use the angular Activated Route.
import { ActivatedRoute } from '@angular/router';
import { RouterRepository } from '@ngneat/elf-ng-router-store';
routerData$ = this.routerStore.selectData();
outletData$ = this.route.data;
constructor( private routerStore: RouterRepository, private route: ActivatedRoute){}
routerData and outletData gives me another result.
example route users/overview(side:create)
Introduce Outlet into elf-ng-router-store
current output:
{
router: {
state: {
url: '/users/overview(side:create)',
urlAfterRedirects: '/users/overview(side:create)',
params: {},
queryParams: {},
fragment: null,
data: {
application: 'account',
menu: 'users',
}
},
navigationId: 1
}
}
requested output:
Introduce Outlet into elf-ng-router-store
current output:
{
router: {
state: {
url: '/users/overview(side:create)',
urlAfterRedirects: '/users/overview(side:create)',
params: {},
queryParams: {},
fragment: null,
data: {
application: 'account',
menu: 'users',
},
outlets: [
{ url: '/create', data: { type: 'human' } }
]
},
navigationId: 1
}
}
### Alternatives considered
any other options :P
### Do you want to create a pull request?
No
Not sure
When using this library in a project with Angular Universal, the first page load in the SSR response loads the requested route, however, subsequent navigations always respond with the initial route from the server site, before CSR boots and navigated to the actual route.
I've traced it to navigateIfNeeded
, here https://github.com/ngneat/elf-ng-router-store/blob/master/libs/ng-router-store/src/lib/router.service.ts#L115, it seems like something is happening with potential stale emissions from the router repository, where the update to the route that is being requested isn't in the store before the call to setUpStoreListener
happens, resulting in navigateIfNeeded
issuing a navigateByUrl
to the previous route on the server side.
I'm attempting to create a reproduction of this issue on this stackblitz: https://stackblitz.com/edit/stackblitz-starters-5q2tm5?file=src%2Findex.html
That said, I've ran into issues with this where it seems to just get stuck in some kind of infinite loop on the server side that I've yet to be able to track down.
No response
My application is an MFE based angular app with multiple static remotes federated into a host app, some using names router outlets, and using the router store helps to ensure that all the MFEs see the same router state, as named router outlets result in things like ActivatedRoute not having the "real" URL represented in their state(s).
I've identified a workaround by adding the following code in the constructor of my AppModule
:
if (isPlatformServer(this.platformId)) {
this.routerRepository.update({ state: null, navigationId: null });
}
Additionally, moving the import of ElfNgRouterStoreModule
from my host application, into each MFE's shell seems to at least sidestep the issue, as the above code was not reliably producing a fix. Not having the state clearing resulted in infinite navigation loops causing the SSR server to hang. That said, moving that import seems to produce multiple subscriptions to the router store and I saw multiple calls to navigateIfNeeded
, that however all resulted in no navigation being performed. However I would imagine that all of this is less than ideal.
If I can figure out a fix to propose.
No
Hi Iam new to state management with Elf and would like to use your plugin because it perfectly fits my requirements of reacting to changes in the router
Steps to reproduce:
npx @ngneat/elf-cli install
npm install @ngneat/elf-ng-router-store
import { ElfNgRouterStoreModule } from '@elf/ng-router-store';
(from documentation)Cannot find module '@elf/ng-router-store' or its corresponding type declarations.
I think the import statement is not correct (so to say the reference in the documentation is not correct) but when I try to change the import to import { ElfNgRouterStoreModule } from '@ngneat/elf-ng-router-store';
(which I think is the correct import) typescript still cant find the module (same error as given above)
When I inspect my node_modules under @ngneat/elf-ng-router-store it displays only a package.json which could be the mistake.
Is this a bug or am I doing something wrong?
Nonetheless thanks for your work
see description above
Cannot find module '@elf/ng-router-store' or its corresponding type declarations.
Angular 12
Typescript 4.2.3
@ngneat/elf-ng-router-store 1.0.1
No response
No
When I install the new version 1.0.3:
npm install @ngneat/elf-ng-router-store
node_modules/@ngneat/elf-ng-router-store only contains package.json. Nothing is installed.
Can we add angular 15 to supported peer dependencies?
Add angular 15 to supported peer dependencies
None
Yes
Hi, i'm trying to use this library with a freshly created angular 13 and ngneat/elf@^2.1.0
But npm complains about peer dependencies
β― npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @ngneat/[email protected]
npm ERR! Found: @ngneat/[email protected]
npm ERR! node_modules/@ngneat/elf
npm ERR! @ngneat/elf@"^2.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @ngneat/elf@"^1.0.2" from @ngneat/[email protected]
npm ERR! node_modules/@ngneat/elf-ng-router-store
npm ERR! @ngneat/elf-ng-router-store@"^1.0.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @ngneat/[email protected]
npm ERR! node_modules/@ngneat/elf
npm ERR! peer @ngneat/elf@"^1.0.2" from @ngneat/[email protected]
npm ERR! node_modules/@ngneat/elf-ng-router-store
npm ERR! @ngneat/elf-ng-router-store@"^1.0.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Do you think we can bump elf version to ^2.0.0 without breaking changes ? or set peerDeps version to "*" ?
or set peerDeps version to "*" ?
i don't want to force or use legacy-peer-deps as it will come again next install
Yes
Yes
In: README.md
`import { ElfNgRouterStoreModule } from '@elf/elf-ng-router-store';
@NgModule({
imports: [
ElfNgRouterStoreModule
})
export class AppModule {
}`
'@elf/elf-ng-router-store'
should be '@ngneat/elf-ng-router-store'
its very small, not really breaking issue just reporting
No response
No response
No response
No response
Yes
No
I cannot install this package for any Angular 12 project with the following command: npm install @ngneat/[email protected]
It works for on Angular 13 though.
No response
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"12.0.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^13.0.0" from @ngneat/[email protected]
npm ERR! node_modules/@ngneat/elf-ng-router-store
npm ERR! @ngneat/elf-ng-router-store@"^1.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Angular 12.0.4
Typescript 4.2.4
rxjs 6.6.2
@ngneat/elf-ng-router-store 1.0.2
No response
No
Hi,
do you have a license for this project? At npm (https://www.npmjs.com/package/@ngneat/elf-ng-router-store/v/1.0.7?activeTab=readme) it says there is no license which means it is not allowed to use due to copyright issues.
when I try to upgrade from akita-ng-router-store, I have using selectParams which the parameter is an optional and there have no problem because when the parameter is undefined, selectParams still will emit the value, but elf-ng-router-store not supporting this. I want to suggest remove the filterNil operator from the selectParams method.
selectParams<T extends string>(
names?: string | string[]
): Observable<T | T[] | Params | null> {
if (names === undefined) {
return store.pipe(sliceState('params'));
}
const _select = (p: string) =>
store.pipe(
sliceState<RouterState>('params'),
pluck(p),
filterNil() <--- remove this line
);
if (Array.isArray(names)) {
const sources = names.map(_select);
return combineLatest(sources);
}
return _select(names).pipe(distinctUntilChanged());
}
no other alternatives
No
No
data
in your lazy loaded route:{}
lastRouterState
is never updated in this case.No response
No response
@ngneat/elf-ng-router-store: 1.0.4
No response
No
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.