Class 'Tabs' incorrectly implements interface 'NavigationContainer'. Types of property 'parent' are incompatible. Type 'NavControllerBase' is not assignable to type 'NavController'. Types of property 'popTo' are incompatible

Ionic Framework ionic-v3
1

This morning I was updating the ionic and after the upgrade appeared this error:

Typescript Error

Class ‘Tabs’ incorrectly implements interface ‘NavigationContainer’. Types of property ‘parent’ are incompatible. Type ‘NavControllerBase’ is not assignable to type ‘NavController’. Types of property ‘popTo’ are incompatible. Type ‘(indexOrViewCtrl: any, opts?: NavOptions, done?: () => void) => Promise<any>’ is not assignable to type ‘(page: string | Page | ViewController, params?: any, opts?: NavOptions, done?: Function) => Promi...’. Types of parameters ‘done’ and ‘opts’ are incompatible. Type ‘NavOptions’ is not assignable to type ‘() => void’. Type ‘NavOptions’ provides no match for the signature ‘(): void’.

node_modules/ionic-angular/components/tabs/tabs.d.ts

150.  */
151. export declare class Tabs extends Ion implements AfterViewInit, RootNode, ITabs, NavigationContainer {
152.     viewCtrl: ViewController;

Typescript Error

Class ‘NavControllerBase’ incorrectly implements interface ‘NavController’. Types of property ‘popTo’ are incompatible. Type ‘(indexOrViewCtrl: any, opts?: NavOptions, done?: () => void) => Promise<any>’ is not assignable to type ‘(page: string | Page | ViewController, params?: any, opts?: NavOptions, done?: Function) => Promi...’. Types of parameters ‘done’ and ‘opts’ are incompatible. Type ‘NavOptions’ is not assignable to type ‘() => void’. Type ‘NavOptions’ provides no match for the signature ‘(): void’.

node_modules/ionic-angular/navigation/nav-controller-base.d.ts

19.  */
20. export declare class NavControllerBase extends Ion implements NavController {
21.     parent: any;


Ionic Framework: ^3.6.0
Ionic App Scripts: 2.1.4
Angular Core: ^4.3.5
Angular Compiler CLI: ^4.3.5
Node: 6.11.2
OS Platform: Linux 4.9
Navigator Platform: Linux x86_64
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

Can someone help me? I can not solve this error.

1 Like
2

I’m having the same issue, please help

3

brother, did you update today either, or was this error already happening?

4

today, was updating everyting because I had another error but now get this error

5

What I found very strange was the version of ionic that is:
Ionic Framework: ^ 3.6.0

And when I updated it went to the version:
Ionic Framework: ^ 3.9.0

Concern and compatibility of the version, and I do not know where to solve this problem.

You could see which version is installed on your machine.

6

I ran the command:

ionic info

And this information was presented:


cli packages: (/var/www/html/app_pet_store/node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 26.0.2
    Node              : v6.11.2
    npm               : 5.3.0 
    OS                : Linux 4.9
7

Yep having the same issue

8

Good morning guys.
I do not know if this is the best solution of the problem, but since I’m in the rush and the client was on top of me, it was what helped me, if someone is going through the same problem as me, that’s how I did it.

Precisei alterar alguns arquivos no node_modules e foram esses dois:

  1. node_modules/ionic-angular/navigation/nav-controller-base.d.ts
  2. node_modules/ionic-angular/components/tabs/tabs.d.ts

The change in the files were these:

  1. node_modules/ionic-angular/navigation/nav-controller-base.d.ts
  • before
20. export declare class NavControllerBase extends Ion implements NavController {
  • after
20. export declare class NavControllerBase extends Ion /*implements NavController*/ {
  1. node_modules/ionic-angular/components/tabs/tabs.d.ts
  • before
151. export declare class Tabs extends Ion implements AfterViewInit, RootNode, ITabs, NavigationContainer {
  • after
151. export declare class Tabs extends Ion implements AfterViewInit, RootNode, ITabs/*, NavigationContainer*/ {
3 Likes
9

Can confirm, I got my project to work doing this. Weirdly when I compiled an earlier version of ionic-angular it was still installing that file.

10

Many thanks Jonatas, solved my problem.
I could see that you’re a great pro, and you solved the problem brilliantly.
Much success for you, and once again congratulations

1 Like
11

Please don’t manually edit things under node_modules. That directory belongs to npm, and your changes are subject to being overwritten at any time.

Anybody having this problem should check their typescript dependency version. If it’s >2.3.4, try reverting to 2.3.4, which is the officially supported version. In general, when you update dependencies past what Ionic recommends, and run into any new problems, please revert to supported dependency versions and ensuring your problem persists before taking any further action.

12

@rapropos
Quiet brother I’ll do what you suggest, but at the moment the client was on top of me and had to upload the new version, so I was forced to look at the error I was giving in those files.

13

Can you verify that you were trying to use typescript 2.4+?

14

My big brother @rapropos I’m using version:

typescript@2.5.1

15

Thanks. You may wish to follow issue 12716.

UPDATE: this is fixed in the tree and will be in the v4 release.

So for anybody wanting to hack anything up, I would only make the following change: take the params argument out of the popTo() declaration on line 466 of ionic-angular/navigation/nav-controller.d.ts. No modification should be needed to either nav-controller-base or tabs.

If your situation is like mine, TS 2.5.1 will also choke on rxjs 5.4.0 with a similar complaint about Subject. Upgrading rxjs to 5.4.3 resolved this.

1 Like
16

I have the same issue here!
Upgraded to “rxjs”: “5.4.3” don’t fix the problem.

typescript: node_modules/ionic-angular/components/tabs/tabs.d.ts, line: 151
            Class 'Tabs' incorrectly implements interface 'NavigationContainer'

typescript: node_modules/ionic-angular/navigation/nav-controller-base.d.ts, line: 20
            Class 'NavControllerBase' incorrectly implements interface 'NavController'

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.6.0

System:

ios-deploy : 1.9.1
ios-sim    : 6.0.0
Node       : v7.2.1
npm        : 5.3.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b
17

HI, I am getting the same error as yours, but the ur solution is not working for me

18

@vin16 and @fdambrosio please post the errors specifying everything system version so that we can better understand what is happening.

19

does this error still exist? my ion tabs are not working(not even showing) and i tried your fixes but not working. Really need a solution.

20

Only if you’ve gone off the reservation with an unsupported typescript version.