Ionic - Generate Page fails with TypeError: AppScripts.processPageRequest is not a function

Question

Updated to ionic 3, but may not have done so correctly. When running: $ ionic g page AssetOneTimeList --verbose

I get the following error, which I can't seem to resolve:

[DEBUG] Loading global plugin @ionic/cli-plugin-proxy
[DEBUG] Loading local plugin @ionic/cli-plugin-cordova
[DEBUG] Loading local plugin @ionic/cli-plugin-ionic-angular
[DEBUG] !!! ERROR ENCOUNTERED !!!
TypeError: AppScripts.processPageRequest is not a function
[DEBUG] TypeError: AppScripts.processPageRequest is not a function
at Object.
(/Users/user/App/node_modules/@ionic/cli-plugin-ionic-angular/dist/generate.js:38:41)
at Generator.next (<anonymous>)
at fulfilled
(/Users/user/App/node_modules/@ionic/cli-plugin-ionic-angular/dist/generate.js:4:58)
at <anonymous>

This is after removing node_modules/, doing an npm install, completely reinstalling node and ionic. $ ionic info

global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 6.5.0 
Ionic CLI        : 3.4.0
local packages:

@ionic/app-scripts              : https://registry.npmjs.org/@ionic/app-scripts/-/app-scripts-1.1.4.tgz
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.1.2 ios 4.1.1
Ionic Framework                 : ionic-angular https://registry.npmjs.org/ionic-angular/-/ionic-angular-2.3.0.tgz
System:

Node       : v8.1.3
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
ios-sim    : 5.0.13 
npm        : 5.0.3

Package.json:

{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"@angular/forms": "2.4.8",
"@angular/http": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/platform-server": "2.4.8",
"@ionic-native/core": "^3.11.0",
"@ionic-native/splash-screen": "^3.11.0",
"@ionic-native/status-bar": "^3.11.0",
"@ionic/cloud-angular": "^0.11.0",
"@ionic/storage": "2.0.0",
"cordova-plugin-console": "1.0.5",
"cordova-plugin-device": "1.1.4",
"cordova-plugin-splashscreen": "~4.0.1",
"cordova-plugin-statusbar": "2.2.1",
"cordova-plugin-whitelist": "1.3.1",
"cordova-sqlite-storage": "~2.0.2",
"ionic-angular": "2.3.0",
"ionic-plugin-keyboard": "~2.2.1",
"ionicons": "3.0.0",
"moment": "^2.18.1",
"rxjs": "5.0.1",
"sw-toolbox": "3.4.0",
"uuid": "^3.0.1",
"zone.js": "0.7.2"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.4",
"@ionic/cli-plugin-cordova": "1.4.0",
"@ionic/cli-plugin-ionic-angular": "1.3.1",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "Description: An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-console": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"cordova-sqlite-storage": {},
"ionic-plugin-keyboard": {}
}
}
}

Any and all help is appreciated!

Answer 1

Thanks to suraj, I looked into updating app-scripts to @latest:

$ npm install @ionic/app-scripts@latest

This warned that fsevents and typescript were not compatible, so I updated those:

$ npm install fsevents@latest && npm install typescript@latest

Tried to update app-scripts again to verify warning went away

$ npm install @ionic/app-scripts@latest

This failed, so I blew away node_modules and redid an npm install

$ rm -rf node_modules/
$ npm install

And viola! I can ionic generate page

$ ionic g page MyPage --verbose
[DEBUG] Loading global plugin @ionic/cli-plugin-proxy
[DEBUG] Throwing PLUGIN_NOT_INSTALLED for global @ionic/cli-plugin-proxy
[DEBUG] Loading local plugin @ionic/cli-plugin-cordova
[DEBUG] Loading local plugin @ionic/cli-plugin-ionic-angular
[OK] Generated a page named MyPage!

Unfortunately, this now broke ionic serve with the error:

typescript: node_modules/ionic-angular/navigation/nav-controller-base.d.ts, line: 20 
        Class 'NavControllerBase' incorrectly implements interface 'NavController'. Types of property 'popTo' are 
        incompatible. Type '(indexOrViewCtrl: any, opts?: NavOptions, done?: Function) => Promise<any>' is not 
        assignable to type '(page: any, params?: any, opts?: NavOptions, done?: Function) => Promise<any>'. Types of 
        parameters 'done' and 'opts' are incompatible. Type 'NavOptions' is not assignable to type 'Function'. 
        Property 'apply' is missing in type 'NavOptions'. 

  L20:  export declare class NavControllerBase extends Ion implements NavController {
  L21:      parent: any;

typescript: node_modules/rxjs/Subject.d.ts, line: 16 
        Class 'Subject<T>' incorrectly extends base class 'Observable<T>'. Types of property 'lift' are 
        incompatible. Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: 
        Operator<T, R>) => Observable<R>'. Type 'Observable<T>' is not assignable to type 'Observable<R>'. Type 'T' 
        is not assignable to type 'R'. 

  L16:  export declare class Subject<T> extends Observable<T> implements ISubscription {
  L17:      observers: Observer<T>[];

Following advice here I downgraded to [email protected] with npm install [email protected] and now ionic serve and ionic g page work. Phew!