Error on Android --prod. Error: Illegal state: symbol without members expected

Hi, anyone else encountered this error when making an Android --prod build?

[14:13:59] ngc started …
Error: Illegal state: symbol without members expected, but got {“filePath”: …

Anyone manage to solve it? It’s similar to this thread: Error (IONIC CORDOVA RUN ANDROID –PROD –RELEASE, but I am unable to find an answer to it yet. Thanks.

ionic info:

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

Cordova CLI : 7.0.1

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

Node : v8.2.1
npm : 5.3.0
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b

This is old, upgrade to a current version (but note the breaking changes with 2.x in the changelog)

Hello Sujan12, appreciate all the help and your suggestion.

I updated to the following and is still getting the same error Error: Illegal state: symbol without members expected

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

Cordova CLI : 7.0.1

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

Node  : v8.2.1
npm   : 5.3.0
OS    : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b

Can you build without --prod?
Does ionic serve work as it should?

If both is yes, please post your complete output of the command.

For some reason upgrading to 2.1.3 and running the app only shows an empty white screen.

As for downgrading it back to 1.3.8, yes both works fine without --prod and ionic serve

Error: Illegal state: symbol without members expected, but got
{"filePath":"/Users/bobbydee/Repositories/starter/src/pages/welcome/welcome.ts","name":"WelcomePage","members":["loader"]}.
  at StaticSymbol.assertNoMembers
(/Users/bobbydee/Repositories/starter/node_modules/@angular/compiler/bundles/compiler.umd.js:523:19)
  at AotSummaryResolver.resolveSummary
(/Users/bobbydee/Repositories/starter/node_modules/@angular/compiler/bundles/compiler.umd.js:24557:22)
  at CompileMetadataResolver._loadSummary
(/Users/bobbydee/Repositories/starter/node_modules/@angular/compiler/bundles/compiler.umd.js:14204:66)
  at CompileMetadataResolver._getInjectableMetadata
(/Users/bobbydee/Repositories/starter/node_modules/@angular/compiler/bundles/compiler.umd.js:14737:49)
  at CompileMetadataResolver.getProviderMetadata
(/Users/bobbydee/Repositories/starter/node_modules/@angular/compiler/bundles/compiler.umd.js:15031:40)
  at
/Users/bobbydee/Repositories/starter/node_modules/@angular/compiler/bundles/compiler.umd.js:14960:49
  at Array.forEach (native)
  at CompileMetadataResolver._getProvidersMetadata
(/Users/bobbydee/Repositories/starter/node_modules/@angular/compiler/bundles/compiler.umd.js:14921:19)
  at
/Users/bobbydee/Repositories/starter/node_modules/@angular/compiler/bundles/compiler.umd.js:14496:63
  at Array.forEach (native)

Thanks again.

How are you running the app?
Does the error message you posted belong to that empty screen?

Upgrading to the current version is the only right thing to do here - we just have to debug and fix the problem then.

ionic emulate ios -lsc. No error shows up on the console.

The error message as stated is when i’m calling ionic cordova build android --prod

Sorry, I am confused now.
iOS and Android?
1.3.8 and 2.1.3?

Could you please define what exactly where are debugging now, and which commands work and which don’t?

The error appears in both 1.3.8 and 2.1.3 when calling flag --prod.

The white screen appears on both iOS or Android (via apk) on 2.1.3 when calling ionic cordova run/emulate. The white screen is not accompanied by any errors showing up on the console.

Running works fine on 1.3.8 except for --prod where the error shows up.

Thanks for the help.

Anything special in this file?
Can you post it?

What does appear in the console? Normally there is some output…
Can you inspect the white page - is there any HTML at all?

Can you create a new project with ionic start and see if you can build that?

I will try with a clean build and see how it goes. Will get a good night sleep for now, been trying to get this sorted out with no luck for today.

welcome.ts is essentially a loaderpage where I check for auth and redirect to lazyloaded modules depending on the auth status. The html doesn’t contain anything so maybe that’s why it’s showing a white screen. But it’s odd that it’s not able to redirect to the lazyloaded pages unlike in 1.3.8

In addition to welcome.ts, I’m interested in your package.json.

I tested with a clean Ionic start blank project and it is able to build successfully. Upon careful checking it may have something to do with TranslateModule from @ngx-translate/core. Commenting out the TranslateModule in the module.ts makes the error go away, but breaks all the translation pipe.

package.json

{
    "name": "Starter",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@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",
        "@ionic-native/camera": "^3.12.1",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/facebook": "^3.12.1",
        "@ionic-native/file": "^3.12.1",
        "@ionic-native/google-plus": "^3.12.1",
        "@ionic-native/keyboard": "^3.12.1",
        "@ionic-native/network": "^3.12.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic-native/twitter-connect": "^3.12.1",
        "@ionic/cloud-angular": "^0.12.0",
        "@ionic/storage": "2.0.1",
        "@ngx-translate/core": "^7.0.0",
        "@ngx-translate/http-loader": "^0.1.0",
        "angularfire2": "^4.0.0-rc.1",
        "chart.js": "^2.6.0",
        "cordova-android": "^6.2.3",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-camera": "^2.4.1",
        "cordova-plugin-compat": "^1.1.0",
        "cordova-plugin-console": "^1.0.7",
        "cordova-plugin-crosswalk-webview": "^2.3.0",
        "cordova-plugin-device": "^1.1.6",
        "cordova-plugin-facebook4": "^1.9.1",
        "cordova-plugin-file": "^4.3.3",
        "cordova-plugin-googleplus": "^5.1.1",
        "cordova-plugin-network-information": "^1.3.3",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.3",
        "cordova-plugin-whitelist": "^1.3.2",
        "cordova-plugin-wkwebview-engine": "git+https://github.com/driftyco/cordova-plugin-wkwebview-engine.git",
        "cordova-sqlite-storage": "^2.0.4",
        "firebase": "^4.1.3",
        "ionic-angular": "3.4.2",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "phonegap-plugin-push": "^1.10.5",
        "promise-polyfill": "6.0.2",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "twitter-connect-plugin": "^0.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.1.4",
        "typescript": "2.3.4"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-camera": {
                "CAMERA_USAGE_DESCRIPTION": " ",
                "PHOTOLIBRARY_USAGE_DESCRIPTION": " "
            },
            "cordova-plugin-facebook4": {
                "APP_ID": "",
                "APP_NAME": "Starter"
            },
            "cordova-plugin-file": {},
            "cordova-plugin-googleplus": {
                "REVERSED_CLIENT_ID": ""
            },
            "cordova-plugin-network-information": {},
            "twitter-connect-plugin": {
                "FABRIC_KEY": ""
            },
            "cordova-sqlite-storage": {},
            "cordova-plugin-wkwebview-engine": {},
            "phonegap-plugin-push": {
                "SENDER_ID": ""
            },
            "cordova-plugin-crosswalk-webview": {}
        },
        "platforms": [
            "android"
        ]
    }
}

Sorry, my apologies, welcome page is an intro page with some ion-slide with css animation.
welcome.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import { AnimationProvider } from '../../providers/animation';

@IonicPage()
@Component({
  selector: 'page-welcome',
  templateUrl: 'welcome.html',
})
export class WelcomePage {
  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private animation: AnimationProvider,
    public platform: Platform) {
  }

  ionViewDidLoad() {
    this.platform.ready().then(() => {
      let self = this;
      setTimeout(() => {
        self.animation.animate(document.getElementById('animate_1'), 'animateLaunchIn');
        self.animation.animate(document.getElementById('animate_2'), 'animateFadeInOut');
        self.animation.animate(document.getElementById('animate_3'), 'animateClockwise');
        self.animation.animate(document.getElementById('animate_4'), 'animateUpDown');
      }, 100);
    });
  }

}

Upon commenting out the TranslateModule, the error is gone, but it breaks all my translation pipes.

welcome.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { WelcomePage } from './welcome';

@NgModule({
  declarations: [
    WelcomePage,
  ],
  imports: [
    IonicPageModule.forChild(WelcomePage),
    TranslateModule.forChild(WelcomePage)
  ],
  exports: [
    WelcomePage
  ]
})
export class WelcomePageModule { }

Thanks.

1 Like

My concern that your issue might be related to angular #18170 seems unfounded. I am a bit worried about the usage of ngx-translate inside the WelcomePageModule; if you don’t get any better answers, I think it might be worth investigating to see if your problem persists even if you eliminate lazy loading entirely.

It is definitely related to @ngx-translate, commenting it out on the said module (for eg: WelcomePage) will make the error go away and move on to the next module with having TranslateModule imported. Will try to lurk at ngx-translate and see if I can find a lead there, people seems to have AOT errors there too just that different error from what I have.

1 Like