Skip to content
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

feat(router): add hash-based navigation option to setUpLocationSync #28609

Closed
wants to merge 2 commits into from
Closed
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.
+37 −3
Diff settings

Always

Just for now

@@ -58,7 +58,7 @@ export function locationSyncBootstrapListener(ngUpgrade: UpgradeModule) {
*
* @publicApi
*/
export function setUpLocationSync(ngUpgrade: UpgradeModule) {
export function setUpLocationSync(ngUpgrade: UpgradeModule, urlType: 'path' | 'hash' = 'path') {

This comment has been minimized.

Copy link
@gkalpak

gkalpak Feb 20, 2019

Member

No API docs? 😱 😱 😱

if (!ngUpgrade.$injector) {
throw new Error(`
RouterUpgradeInitializer can be used only after UpgradeModule.bootstrap has been called.
@@ -71,7 +71,16 @@ export function setUpLocationSync(ngUpgrade: UpgradeModule) {

ngUpgrade.$injector.get('$rootScope')
.$on('$locationChangeStart', (_: any, next: string, __: string) => {
const url = resolveUrl(next);
let url;
if (urlType === 'path') {
url = resolveUrl(next);
} else if (urlType === 'hash') {
// Remove the first hash from the URL
const hashIdx = next.indexOf('#');
url = resolveUrl(next.substring(0, hashIdx) + next.substring(hashIdx + 1));
} else {
throw 'Invalid URLType passed to setUpLocationSync: ' + urlType;

This comment has been minimized.

Copy link
@gkalpak

gkalpak Feb 20, 2019

Member

It is better to throw Errors instead of strings 🤔

}
const path = location.normalize(url.pathname);
router.navigateByUrl(path + url.search + url.hash);
});
@@ -79,6 +79,30 @@ describe('setUpLocationSync', () => {
expect(RouterMock.navigateByUrl).toHaveBeenCalledWith(normalizedPathname + query + hash);
});

it('should allow configuration to work with hash-based routing', () => {
const url = 'https://google.com';
const pathname = '/custom/route';
const normalizedPathname = 'foo';
const query = '?query=1&query2=3';
const hash = '#new/hash';
const combinedUrl = url + '#' + pathname + query + hash;
const $rootScope = jasmine.createSpyObj('$rootScope', ['$on']);

upgradeModule.$injector.get.and.returnValue($rootScope);
LocationMock.normalize.and.returnValue(normalizedPathname);

setUpLocationSync(upgradeModule, 'hash');

const callback = $rootScope.$on.calls.argsFor(0)[1];
callback({}, combinedUrl, '');

expect(LocationMock.normalize).toHaveBeenCalledTimes(1);
expect(LocationMock.normalize).toHaveBeenCalledWith(pathname);

expect(RouterMock.navigateByUrl).toHaveBeenCalledTimes(1);
expect(RouterMock.navigateByUrl).toHaveBeenCalledWith(normalizedPathname + query + hash);
});

it('should work correctly on browsers that do not start pathname with `/`', () => {
const anchorProto = HTMLAnchorElement.prototype;
const originalDescriptor = Object.getOwnPropertyDescriptor(anchorProto, 'pathname');
@@ -98,4 +122,5 @@ describe('setUpLocationSync', () => {
Object.defineProperty(anchorProto, 'pathname', originalDescriptor !);
}
});

});
@@ -5,4 +5,4 @@ export declare const RouterUpgradeInitializer: {
deps: (typeof UpgradeModule)[];
};

export declare function setUpLocationSync(ngUpgrade: UpgradeModule): void;
export declare function setUpLocationSync(ngUpgrade: UpgradeModule, urlType?: 'path' | 'hash'): void;
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.