Issue in Routing - Hash Tag - Angular 2

Question

I am trying to converting normal bootstrap template into angular website. I am facing issue in routing while navigating from one page to another like About to Contact vice versa.

The template already has below format which using some css for smooth scrolling with help of hashtag #.

my app.compo.html

Before : <li><a href="#header">About</a></li>

after : <li><a routerLink="/about" routerLinkActive="active" href="#header">About</a></li>

Click to copy

<a href="#header" id="btp" class="back-to-top btn-floating waves-effect waves-light btn-large custom-btn">
    <i class="ion-ios-arrow-up"></i>
</a>

app.routing.ts

Click to copy

const routes: Routes = [
{ path: '', redirectTo: 'about', pathMatch: 'full' },
  { path: 'about', component: about, data: { state: 'about'} },
  { path: 'contact', component: contact, data: { state: 'contact'} },
];
export const AppRouting = RouterModule.forRoot(routes, { 
  useHash: true
});

After I hit npm start, its showing like below in my console

Click to copy

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-04-05T05:55:06.359Z
Hash: 0bace8e39ad063fd5145
Time: 3614ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.91 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 577 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 46 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 852 kB [initial] [rendered]

ERROR in Cannot read property 'length' of undefined

webpack: Failed to compile.

This is my first attempt with angular 2. I am not able to understand official docs and other related threads for my issue.

kindly direct me to right way. if possible please share some plunker or stackblitz example

Answer 1

This could be done without using href hash (#) functionality..

Here is a working example..

https://stackblitz.com/edit/angular-hxzu3s?embed=1&file=app/app.module.ts&view=preview

---

One more way to do is, using hash #

Here is another working example..

https://stackblitz.com/edit/angular-ji6grr?embed=1&file=app/app.component.html&view=preview