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>

<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

I cannot see the property `length`used anywhere in the code! can you add that information — Aravind, Apr 05 '18 at 06:12
@Aravind . apologize. i really dont understand what you mean about property.? can explain what should i do.? — Mr. Learner, Apr 05 '18 at 06:18
https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor — erni, Apr 05 '18 at 06:20
are u trying to redirect to a different page or point to the fragment (element with #) on the same page? — Akanksha Gaur, Apr 05 '18 at 06:54
try useHash = false, useHash works when you are routing to a different page like this www.smth.com#about — Akanksha Gaur, Apr 05 '18 at 06:56
@Akanksha am trying navigate to another fragment of my single page application . like this |home|about|contact| — Mr. Learner, Apr 05 '18 at 07:15
@Akanksha is right, just set `useHash` flag to `false` and no need to change other `href's`... angular's routing is based on routerLink and router oultets. see this example created for you on slackblithz.. https://angular-hxzu3s.stackblitz.io/ — miiiii, Apr 05 '18 at 09:17
@Manoj Shukla tried.. but issue still persisting.. can you pls show stackblitz code? not able see your code formation — Mr. Learner, Apr 05 '18 at 09:32
Sure.. Here is the complete link... https://stackblitz.com/edit/angular-hxzu3s?embed=1&file=app/app.component.html&view=editor — miiiii, Apr 05 '18 at 09:33
plz lemme know if it's still not working.. !! Will try few more options. :) — miiiii, Apr 05 '18 at 09:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168282/discussion-between-manoj-shukla-and-worstcoder). — miiiii, Apr 05 '18 at 09:39

score 1 · Accepted Answer · answered Apr 05 '18 at 13:21

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

score 0 · Answer 2 · answered Apr 05 '18 at 08:49

0

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.

answered Apr 05 '18 at 08:49

Vikas Garg

202
2
8

but if i do what your saying, how can call scrolling functionality . i have update my code.. pls see that. #header comes in two places – Mr. Learner Apr 05 '18 at 09:00

Issue in Routing - Hash Tag - Angular 2

2 Answers2