Unexpected token < and Class 'Tab' incorrectly extends base class 'NavControllerBase' after upgrade to 2.0.0

[wethinkagile]

After upgrading to 2.0.0 we are seeing this:

Error

Runtime Error
Unexpected token <

Stack

SyntaxError: Unexpected token <
Ionic Framework: 3.5.0
Ionic App Scripts: 2.0.0
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 8.1.3
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

[aleyango]

same issue:

LOG:

        Class 'Nav' incorrectly extends base class 'NavControllerBase'. Types of property 'goToRoot' are
        incompatible. Type '(opts: NavOptions) => Promise<any>' is not assignable to type '(opts: NavOptions) =>
        Promise<never>'. Type 'Promise<any>' is not assignable to type 'Promise<never>'. Type 'any' is not
        assignable to type 'never'.

  L47:  export declare class Nav extends NavControllerBase implements AfterViewInit, RootNode, INav {
  L48:      private _root;

[14:24:45] typescript: .../Alexis/Desktop/Ionic/wallet/node_modules/ionic-angular/components/tabs/tab.d.ts, line: 121 Class 'Tab' incorrectly extends base class 'NavControllerBase'. Types of property 'goToRoot' are incompatible. Type '(opts: NavOptions) => Promise' is not assignable to type '(opts: NavOptions) => Promise'. Type 'Promise' is not assignable to type 'Promise'.

 L121:  export declare class Tab extends NavControllerBase implements ITab {
 L122:      private _cd;

[wethinkagile]

Agree, I also have the NavControllerBase output in log.

[18:57:08]  typescript: node_modules/ionic-angular/components/nav/nav.d.ts, line: 47
            Class 'Nav' incorrectly extends base class 'NavControllerBase'. Types of property 'goToRoot' are
            incompatible. Type '(opts: NavOptions) => Promise<any>' is not assignable to type '(opts: NavOptions) =>
            Promise<never>'. Type 'Promise<any>' is not assignable to type 'Promise<never>'. Type 'any' is not
            assignable to type 'never'.

      L47:  export declare class Nav extends NavControllerBase implements AfterViewInit, RootNode, INav {
      L48:      private _root;

[18:57:08]  typescript: node_modules/ionic-angular/components/tabs/tab.d.ts, line: 121
            Class 'Tab' incorrectly extends base class 'NavControllerBase'. Types of property 'goToRoot' are
            incompatible. Type '(opts: NavOptions) => Promise<any>' is not assignable to type '(opts: NavOptions) =>
            Promise<never>'. Type 'Promise<any>' is not assignable to type 'Promise<never>'.

     L121:  export declare class Tab extends NavControllerBase implements ITab {
     L122:      private _cd;

[18:57:08]  typescript: src/mocks.ts, line: 474
            Argument of type '"READY"' is not assignable to parameter of type '{ String: any; } | PromiseLike<{ String:
            any; }>'.

     L473:          resolve('READY');
     L474:      });

[danbucholtz]

What version of TypeScript are you using? Did you upgrade to 2.4.x?

Thanks, Dan

[aleyango]

yes, I have 2.4.0

[danbucholtz]

Okay, cool, I think that is the reason why. We'll fix it. Should be in 3.5.1 on Wednesday.

Thanks, Dan

[wethinkagile]

"typescript": "^2.3.4"

[danbucholtz]

@nottinhill,

That makes sense since it was pulling down 2.4.x. We'll fix and ship in 3.5.1 on Wednesday.

Thanks, Dan

[wethinkagile]

npm install typescript@2.2.1 --save --save-exact solved all the problems in the CLI log.

Unfortunately I am still seeing in the Browser log (after our app appears for a split millisecond)

vendor.js:1 Uncaught SyntaxError: Unexpected token <

I then can click on "close" in the typescript Browser Main Window Output and our app runs as normal.

[dovk]

Is it fixed ? Can you post a recommended package.json as well, so we know what fits best? Thanks

[dumparun]

Waiting for this fix, please update when done. Is there any alternative, otherwise.

[danbucholtz]

Ionic supports TS 2.4 but all of it's dependencies don't (RXJS). The only option is to stick with 2.3.x for now.

Thanks, Dan

[AwsmOli]

RXJS seems to work fine with TS 2.4 once you update it to 5.4.2 - 5.4.0 did not work see this stackoverflow answer

[dovk]

After 16 hours I had to roll everything back to a day before and will just have to wait untill things stabilize. Obviously there's something I don't understand - when I did "ionic serve" yesterday morning I got a message asking if I wanted to upgrade to ionic 3.5.0. I answered "no" but it didn't continue. So on my next attempt I answered "yes" and it upgraded, but then everything broke and I spent the entire day trying to get back to where I was. I see alot of people struggling with this, there are all kinds of hacky ideas problems, but nothing worked for me. This is the third time this has happened to me. Is there any way to avoid this breakdown every time there's a new release?

[danbucholtz]

@dovk,

I'm sorry that happened. I have honestly never seen or heard of that. Hmmm. More than likely it was updating ionic cli to 3.5.0, not your Ionic project.

We'll let you know when TS 2.4 works well. I wouldn't bother trying to be an early adopter. In many cases, it isn't worth it. We'll upgrade as soon as we can. We're pretty good about updating stuff.

Thanks, Dan

[dovk]

After 2 days of tinkering the app is back to normal. I am not an expert but I think it may have had to do with Typescript working with the new release as I had to keep the version down at 2.3.4 and temporarily have added under compilerOptionsin tsconfig.json: "emitDecoratorMetadata": true and "experimentalDecorators": true. I also added "strictNullChecks":false and "noImplicitAny": false at one point, but they are now off. It would be great if together with new releases you could publish the package.json, config.xml and other environment definitions that you needed to use with the new release. That would save alot of people lots time and pain - other than that, Ionic is simply amazing! Here's the new dependencies that work for us in package.json -

  "dependencies": {
    "@angular/animations": "4.1.3",
    "@angular/cli": "^1.2.1",
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@angular/platform-server": "4.1.3",
    "@ionic-native/app-minimize": "^4.0.0",
    "@ionic-native/core": "^4.0.0",
    "@ionic-native/device": "^4.0.0",
    "@ionic-native/facebook": "^4.0.0",
    "@ionic-native/google-plus": "^4.0.0",
    "@ionic-native/in-app-browser": "^4.0.0",
    "@ionic-native/keyboard": "^4.0.0",
    "@ionic-native/local-notifications": "^4.0.0",
    "@ionic-native/native-page-transitions": "^4.0.0",
    "@ionic-native/screen-orientation": "^4.0.0",
    "@ionic-native/splash-screen": "^4.0.0",
    "@ionic-native/status-bar": "^4.0.0",
    "angularfire2": "^4.0.0-rc.1",
    "com.telerik.plugins.nativepagetransitions": "^0.6.5",
    "cordova-android": "6.2.2",
    "cordova-ios": "^4.4.0",
    "cordova-plugin-app-event": "^1.2.0",
    "cordova-plugin-appminimize": "^1.0.0",
    "cordova-plugin-console": "^1.0.5",
    "cordova-plugin-device": "^1.1.6",
    "cordova-plugin-facebook4": "1.7.4",
    "cordova-plugin-googleplus": "^5.1.1",
    "cordova-plugin-inappbrowser": "^1.7.1",
    "cordova-plugin-screen-orientation": "^2.0.1",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.3",
    "cordova-plugin-whitelist": "^1.3.1",
    "cordova-plugin-wkwebview-engine": "^1.1.3",
    "de.appplant.cordova.plugin.local-notification": "^0.8.5",
    "es6-promise-plugin": "^4.1.0",
    "firebase": "^4.1.3",
    "ionic-angular": "3.5.3",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "promise-polyfill": "^6.0.2",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^2.0.2",
    "@ionic/cli-plugin-cordova": "^1.4.1",
    "@ionic/cli-plugin-ionic-angular": "^1.3.2",
    "typescript": "2.3.4"
  },

If this helps anyone please note that you may also need to keep cordova-android at 6.2.2 and cordova-plugin-facebook4 at 1.7.4 as in our case.

[danbucholtz]

@dovk,

We did! Ionic has been set to TypeScript 2.3 for a couple months now.

Thanks, Dan

[wethinkagile]

@dovk

I am using your options now, it is still giving the error.

{
    "compilerOptions": {
        "strictNullChecks":false,
        "noImplicitAny":false,
        "allowSyntheticDefaultImports": true,
        "allowJs": true,
        "declaration": false,
        "noImplicitReturns": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
                 "dom",
                 "es2015"
               ],
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "target": "es5"
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "src/**/*.spec.ts",
        "node_modules/@types"
    ],
    "compileOnSave": false,
    "atom": {
        "rewriteTsconfig": false
    }
}

What am I missing here?

[wethinkagile]

Bump... any help possible with this? I can provide access to our repo if necessary.

[jqzhao]

I saw the same error after upgrading from 3.0.0 to 3.1.5. I also upgrade typscript from 2.3.4 to 2.6.2 but the same error persists. Anybody can help?