@ ng-bootstrap / ng-bootstrap / pagination / pagination.d.ts（52,14）：错误TS2304：找不到名称“ pageCount”

Question

I added ngbootstrap to an Angular2 project, following the instructions at https://ng-bootstrap.github.io/#/getting-started . But now, when I compile it, I get the Errors

• @ng-bootstrap/ng-bootstrap/pagination/pagination.d.ts (52,14): error TS1005: '=' expected.
• @ng-bootstrap/ng-bootstrap/pagination/pagination.d.ts (52,23): error TS1005: ';' expected.
• @ng-bootstrap/ng-bootstrap/pagination/pagination.d.ts (52,14): error TS2304: Cannot find name 'pageCount'.

Moreover bootstrap components are not shown correctly on the website.

Answer 1

Here is my package.json:

{
  "name": "webshop",
  "version": "0.1.0",
  "scripts": {
    "build": "webpack --progress",
    "build:prod": "webpack -p --progress",
    "postinstall": "typings install",
    "serve": "webpack-dev-server --inline --progress"
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "^0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.8",
    "angular2-in-memory-web-api": "0.0.15",
    "bootstrap": "^4.0.0-alpha.4",
    "core-js": "2.4.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "browserify": "^13.1.0",
    "html-webpack-plugin": "^2.17.0",
    "ts-loader": "^0.8.2",
    "tsify": "^1.0.7",
    "typescript": "^1.8.10",
    "typings": "^1.0.4",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

and here the app.module.ts:

     import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NavbarModule } from './navbar';

import { AppComponent } from './app.component';


@NgModule({
    imports: [ NgbModule.forRoot(), BrowserModule, NavbarModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

I do not have a system.js

Answer 2

I'm not 100% certain, but I think it's related to the version of typescript in use. ng-bootstrap has started using some of the typescript v2 features which were breaking changes from typescript v1.8. The VS extension you get from the gallery implements v1.8 so it cant compile ng-bootstrap any more.

[edit] Fixed it! You need to update visual studio 2015 to update 3, download and install the new typescript 2 tools from here; https://www.microsoft.com/en-us/download/details.aspx?id=48593 then edit your .csproj file and change this tag

<TypeScriptToolsVersion>1.8</TypeScriptToolsVersion> 

to say

<TypeScriptToolsVersion>2.0</TypeScriptToolsVersion>

Then VS will build with the latest typescript, recognise the new language features and build ok.