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 lengthused anywhere in the code! can you add that information — Aravind
– Aravind, Commented Apr 5, 2018 at 6:12
@Aravind . apologize. i really dont understand what you mean about property.? can explain what should i do.? — Mr. Learner
– Mr. Learner, Commented Apr 5, 2018 at 6:18
are u trying to redirect to a different page or point to the fragment (element with #) on the same page? — Akanksha Gaur
– Akanksha Gaur, Commented Apr 5, 2018 at 6:54
Sure.. Here is the complete link... stackblitz.com/edit/angular-hxzu3s?embed=1&file=app/… — miiiii
– miiiii, Commented Apr 5, 2018 at 9:33

miiiii · Accepted Answer · 2018-04-05 13:21:44Z

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

answered Apr 5, 2018 at 13:21

miiiii

1,6201 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikas Garg · Accepted Answer · 2018-04-05 08:49:20Z

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 5, 2018 at 8:49

Vikas Garg

2002 silver badges8 bronze badges

1 Comment

Mr. Learner Over a year ago

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

Collectives™ on Stack Overflow

Issue in Routing - Hash Tag - Angular 2

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related