Angular2 hash location without folder directory structure

Question

I am developing product with Angualr2 Beta.

I hope to change location policy.

I want THE URL be like

localhost/app.html#location1

(I think alpha version was like above)

NOT

localhost/app.html/#/location1

By provide(LocationStrategy, {useClass: HashLocationStrategy})

NOT

localhost/app.html/location1

By provide(LocationStrategy, {useClass: PathLocationStrategy})

Because the case not for me requires web-server settings. but I don't want to put extra work. and I it's enough for me to be able to just bookmark hash style routing.

If you have an idea about it. please let me know.

Thank you.

Answer 1

You need a custom LocationStrategy. Here is an adapted version of HashLocationStrategy to suit your needs.

The prepareExternalUrl() method is where I made the changes. I'm sure there is a way to stop Angular 2 from removing the html filename from the URL, but as a quick workaround I have added it back in using the prepareExternalUrl() method.

It is worth noting that configuring the URLs in this way stops deep linking from working on the initial page load. Subsequent navigation works as expected.

import { Injectable, Inject, Optional, platform } from 'angular2/core';
import { LocationStrategy, PlatformLocation, APP_BASE_HREF } from 'angular2/router';
import { joinWithSlash, normalizeQueryParams } from 'angular2/src/router/location_strategy';
import { UrlChangeListener } from 'angular2/src/router/platform_location';
import { isPresent } from 'angular2/src/facade/lang';

@Injectable()
export class CustomHashLocationStrategy extends LocationStrategy {
    private _baseHref: string = '';
    constructor(private _platformLocation: PlatformLocation,
        @Optional() @Inject(APP_BASE_HREF) _baseHref?: string) {
        super();
        if (isPresent(_baseHref)) {
            this._baseHref = _baseHref;
        }
    }

    onPopState(fn: UrlChangeListener): void {
        this._platformLocation.onPopState(fn);
        this._platformLocation.onHashChange(fn);
    }

    getBaseHref(): string { return this._baseHref; }

    path(): string {
        // the hash value is always prefixed with a `#`
        // and if it is empty then it will stay empty
        var path = this._platformLocation.hash;

        // Dart will complain if a call to substring is
        // executed with a position value that extends the
        // length of string.
        return (path.length > 0 ? path.substring(1) : path) +
            normalizeQueryParams(this._platformLocation.search);
    }

    prepareExternalUrl(internal: string): string {
        var url = joinWithSlash(this._baseHref, internal);
        return url.length > 0 ? ('app.html#' + url.substring(1)) : url;
    }

    pushState(state: any, title: string, path: string, queryParams: string) {
        var url = this.prepareExternalUrl(path + normalizeQueryParams(queryParams));
        if (url.length == 0) {
            url = this._platformLocation.pathname;
        }
        this._platformLocation.pushState(state, title, url);
    }

    replaceState(state: any, title: string, path: string, queryParams: string) {
        var url = this.prepareExternalUrl(path + normalizeQueryParams(queryParams));
        if (url.length == 0) {
            url = this._platformLocation.pathname;
        }
        this._platformLocation.replaceState(state, title, url);
    }

    forward(): void { this._platformLocation.forward(); }

    back(): void { this._platformLocation.back(); }
}