I am trying to convert a regular bootstrap template to an angular website. I ran into a problem while routing while navigating from one page to another, like About to Contact .
The template already has a format that uses some css to smoothly scroll with hashtag # .
my app.compo.html
To: <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 clicked npm start , its shown below on 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 cannot understand the white papers and other related topics for my problem.
kindly direct me on the right path. if possible share some plunker or stackblitz examples
source share