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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With