Reputation: 21

Scroll to anchor in Angular 6

I'm trying to create an anchor on my "Angular 6" page, but when I add the configuration:

imports: [RouterModule.forRoot(routes,{'anchorScrolling': 'enabled',})],

it returns an error:

Unable to assign type '{anchorScrolling: string; scrollPositionRestoration: string; } 'to type' ExtraOptions'. An object literal can only specify known properties, and 'anchorScrolling' does not exist in the 'ExtraOptions' type.

Any idea?

Thank you!

Additional Info: My file is "app-routing-module.ts" and have info about routing:

import { NgModule } from '@angular/core';
import { Routes, RouterModule, ExtraOptions } from '@angular/router';

const routes: Routes = 
[
  { path: '', component: ComIdiomaurlComponent }
];

@NgModule
(
  {
    imports: [RouterModule.forRoot(routes,{'anchorScrolling': 'enabled'})],
    exports: [RouterModule]
  }
)
export class AppRoutingModule { }

The help from Visual Studio Code give me the next options to extraoptions:

Options (see ExtraOptions):
- enableTracing makes the router log all its internal events to the console.
- useHash enables the location strategy that uses the URL fragment instead of the history API.
- initialNavigation disables the initial navigation.
- errorHandler provides a custom error handler.
- preloadingStrategy configures a preloading strategy (see PreloadAllModules).
- onSameUrlNavigation configures how the router handles navigation to the current URL.

See ExtraOptions for more details.

Why does not it appear in other options?

This is my package.json:

{
"name": "gijon-main",
"version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@agm/snazzy-info-window": "^1.0.0-beta.5",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "@fortawesome/angular-fontawesome": "^0.1.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.0",
    "@fortawesome/free-brands-svg-icons": "^5.1.0",
    "@fortawesome/free-solid-svg-icons": "^5.1.0",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "@ng-select/ng-select": "^2.1.3",
    "@ngx-share/button": "^6.0.1",
    "@ngx-share/buttons": "^6.0.1",
    "@ngx-share/core": "^6.0.1",
    "angular-font-awesome": "^3.1.2",
    "angular2-cookie-law": "^6.0.4",
    "bootstrap": "^4.1.1",
    "cookieconsent": "^3.1.0",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "ng-bootstrap": "^1.6.3",
    "ng2-page-scroll": "^4.0.0-beta.12",
    "ng2-translate": "^5.0.0",
    "ngx-cookieconsent": "^2.0.0",
    "ngx-flickity": "0.0.9",
    "popper.js": "^1.14.3",
    "rxjs": "^6.2.0",
    "rxjs-compat": "^6.2.0",
    "snazzy-info-window": "^1.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.1",
    "@angular/cli": "^7.0.3",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/language-service": "^6.0.0",
    "@fortawesome/fontawesome-pro": "^5.1.0",
    "@types/datatables.net": "^1.10.9",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.1",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

Upvotes: 1