路由问题 - 哈希标记 - 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>

<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

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

** 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

Answer 2

Can you try by removing href="#header" as it needs routerLink property only. And need to add router-outLet where you want to load that component.