Typescript Error '=' expected and more

Ionic Framework ionic-v3
1

Hi everyone. I installed ionic 3 by typing

npm install -g ionic cordova

and i created new project by typing

ionic start helloWorld blank --type=ionic-angular

After ionic serve i got theese following errors.

error1
error1400Ă—548 28.2 KB

error2
error2411Ă—555 31.2 KB

error3
error3409Ă—551 31.5 KB

And console log says:

Refused to apply style from 'http://localhost:8100/build/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. (index):1

Failed to load resource: the server responded with a status of 404 (Not Found) (vendor.js):1

Failed to load resource: the server responded with a status of 404 (Not Found) (main.js):1

Ionic CLI: 5.4.13
Ionic Framework: ionic-angular 3.9.9
@ionic/app-script: 3.2.4

Angular Core and Angular Compeiler CLI: 5.2.11

NodeJS: 12.4.1(LTS)
npm: 6.13.4
OS: Linux 5.0

I found this article says just ctrl+s in any .ts file and let it build again.
Yes it is working for this serve time. But i get same error every time i serve.

2

have you try remove and install node_modules again, delete www folder and run again you build.

3

Yes and yes. Btw no error pops to my face in ionic 4. Something is wrong with ionic 3 :slight_smile:

4

But this command is to install lasted version of ionic, to install ionic 3 is

npm install -g ionic@3.x.x

Try update ionic-angular
Execute this command in root folder of you project.

npm rm @ionic/angular --save
npm install @ionic/angular --save

5

But ionic 3 docs says, to install ionic

npm install -g ionic cordova

I believe i should understand from this, run this command to install ionic 3 because this is ionic 3 docs.
When i’m in ionic 4 docs it says, to install ionic

npm install -g ionic

And i should understand from this, run this command to install ionic 4.
Am i wrong?
But still i am going to try your way. Thanks

6

“Ionic 3” is not a thing. “Ionic 4” is not a thing. Conversations will go much more smoothly here if we all agree to never pretend that “Ionic” is a monolithic thing that has a version number.

The thing you install globally (with npm i -g ionic) is the Ionic CLI. The only time you want an older version of that than the latest available is if there is an unfixed bug in the latest version. This is not one of those situations. You DO NOT WANT an old version of the Ionic CLI just because you want to work on an app that uses an older version of the Ionic framework.

The current version of the Ionic CLI as I write this is 5.4.13. That is what you want.

All of that matches my environment, in which I just spawned a new ionic-angular (aka Ionic framework v3) app, which built without error, so there is some other problem with your environment. Please post the entire package.json from the offending project. I’m assuming that you haven’t changed any of the generated skeleton source code yet.

7

Here is my package.json:

{
    "name": "hellowifi",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "start": "ionic-app-scripts serve",
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint"
    },
    "dependencies": {
        "@angular/animations": "5.2.11",
        "@angular/common": "5.2.11",
        "@angular/compiler": "5.2.11",
        "@angular/compiler-cli": "5.2.11",
        "@angular/core": "5.2.11",
        "@angular/forms": "5.2.11",
        "@angular/platform-browser": "5.2.11",
        "@angular/platform-browser-dynamic": "5.2.11",
        "@ionic-native/android-permissions": "^5.19.1",
        "@ionic-native/core": "^4.20.0",
        "@ionic-native/network": "^4.20.0",
        "@ionic-native/splash-screen": "4.20.0",
        "@ionic-native/status-bar": "4.20.0",
        "@ionic/storage": "2.2.0",
        "@types/node": "^13.1.4",
        "cordova-android": "8.1.0",
        "cordova-plugin-android-permissions": "^1.0.2",
        "cordova-plugin-camera": "^4.1.0",
        "cordova-plugin-network-information": "^2.0.2",
        "ionic-angular": "3.9.9",
        "ionicons": "3.0.0",
        "rxjs": "5.5.11",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.29"
    },
    "devDependencies": {
        "@ionic/app-scripts": "^3.2.4",
        "typescript": "2.6.2",
        "cordova-plugin-whitelist": "1.3.3",
        "cordova-plugin-statusbar": "2.4.2",
        "cordova-plugin-device": "2.0.2",
        "cordova-plugin-splashscreen": "5.0.2",
        "cordova-plugin-ionic-webview": "^4.0.0",
        "cordova-plugin-ionic-keyboard": "^2.0.5"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-android-permissions": {},
            "cordova-plugin-camera": {},
            "cordova-plugin-network-information": {},
            "cordova-plugin-whitelist": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-ionic-webview": {},
            "cordova-plugin-ionic-keyboard": {}
        }
    }
}

And yes i understand now what i am doing here about Ionic CLİ. It isnt the npm install part for v3 or v4 app. It is about ionic start command. But all i did was follow the instruction in docs. This computer was formatted recently. After format i installed node lts version from nvm. Jdk, Sdk etc. And after that just run npm install ionic and ionic start helloWorld blank --type=ionic-angular. It shouldn’t give me any error if this is 0km computer i believe.

8

Tried that didn’t work.

9

I believe your proximate problem is a fight between these two folks. The first thing I would try is bumping typescript to 2.7.2, and if that fixes this problem but causes others, then look for a version of @types/node that doesn’t contain the “unique symbol” construct.

2 Likes
10

I updated typescript by typing npm install typescript@2.7.2 and worked.
Thank you very much. But why this problem happened? I followed instructions. It should install what everything its need right?

3 Likes
11

That’s a good question. I played along with you yesterday, but my ionic-angular project did not get @types/node in its package.json at all, so while I did get typescript 2.6.2 like you did, I didn’t have the problematic @types/node with its >=2.7 syntax. Can you think of anything you did after spawning the project that may have caused that to get in there?

By the way, I’ve been assuming throughout this convo that you have some very specific and compelling reason to be wanting to start a new framework v3 ionic-angular project now. If that’s not the case, I would really recommend just going with type=angular, if for no other reason than there are far more eyes on that, so any problems you run into should be (a) marginally less strange and (b) perhaps a higher priority for getting fixed upstream.

ADDENDUM: if this is more than a toy proof-of-concept, you’ve also got a lurking time bomb in that you’re mixing ionic-native v4 and v5 parts. They all must be on the same major version number (strictly speaking, @ionic-native/foo must have the same major version as @ionic-native/core, but the transitive property of dependencies (to coin a rather awkward phrase) means that all @ionic-native/* has to share the same major version).

1 Like
12

No. I just developed little bit more for ui part after start. And install some plugins. But this problem been there for all time. Didn’t happened after i installed or did something. I wondered if i did something that cause this problem and start completely new v3 project and still the problem was there, waiting for me :slight_smile:
I wanted to use v3 because i developed few project with it. After CLI updated 4 getting use to it was not easy for me. But i am going to.
Thank you for all your advise.

13

That’s understandable. I’ll just say that if you’re thinking that the difference / learning curve between framework v3 (type=ionic-angular) and v4 (type=angular) is anywhere near that encountered when going from v1 (type=ionic1), it’s not. AngularJS to Angular entails a complete app redesign. Angular 5 and ionic-angular to Angular 8 (9 any day now, I expect) and @ionic/angular is much more incremental/minimal.

15

I’m facing the same problem here with a fresh blank Ionic V3 project. It’s a test project because it is happening to all my V3 projects and I need to find a solution for this as I can’t convert the other projects to V4 at the moment. And I’m wondering if this problem interferes in any way with the prod build.

None of the solutions proposed above worked for me!

Here’s my package.json

{
  "name": "userApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "4.20.0",
    "@ionic-native/splash-screen": "4.20.0",
    "@ionic-native/status-bar": "4.20.0",
    "@ionic/storage": "2.2.0",
    "@types/node": "^13.1.4",
    "ionic-angular": "3.9.9",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.4",
    "typescript": "^2.7.2"
  },
  "description": "An Ionic project"
}

and here my environment

Ionic:

   Ionic CLI          : 5.4.16 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.9
   @ionic/app-scripts : 3.2.4

Utility:

   cordova-res (update available: 0.9.0) : 0.8.1
   native-run (update available: 0.3.0)  : 0.2.8

System:

   NodeJS : v12.14.0 (/usr/local/Cellar/node@12/12.14.0/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina

Anything i am missing? Any help will be very much appreciated

16

Are you certain about this? Can you post your error messages (as text, not images)?

17

The problem is that the error is huge… and all related to @types/node, @types/yargs

I didn’t copy the full list but here you see some of them…

I know it must be something related to my system because this is happening with the V4 projects as well. Running ionic serve throws these errors but then I save any .ts file and voila everything works…

Typescript Error
'=' expected.
Users/tattivitorino/node_modules/@types/node/events.d.ts
        function on(emitter: EventEmitter, event: string): AsyncIterableIterator<any>;
        const captureRejectionSymbol: unique symbol;
Typescript Error
'=' expected.
Users/tattivitorino/node_modules/@types/node/events.d.ts
 */
const errorMonitor: unique symbol;
/**

Typescript Error
'=' expected.
Users/tattivitorino/node_modules/@types/node/repl.d.ts
     */
    const REPL_MODE_SLOPPY: unique symbol;

Typescript Error
'=' expected.
Users/tattivitorino/node_modules/@types/node/repl.d.ts
     */
    const REPL_MODE_STRICT: unique symbol;
Typescript Error
'=' expected.
Users/tattivitorino/node_modules/@types/node/util.d.ts
    let replDefaults: InspectOptions;
    const custom: unique symbol;
}

Typescript Error
'=' expected.
Users/tattivitorino/node_modules/@types/node/util.d.ts
namespace promisify {
    const custom: unique symbol;
}

Typescript Error
')' expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { type: "number" } ? number :
O extends { type: "string" } ? string :
O extends { array: true } ? Array<string | number> :

Typescript Error
';' expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { type: "number" } ? number :
O extends { type: "string" } ? string :
O extends { array: true } ? Array<string | number> :

Typescript Error
Expression expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { type: "number" } ? number :
O extends { type: "string" } ? string :
O extends { array: true } ? Array<string | number> :

Typescript Error
'(' expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { type: "number" } ? number :
O extends { type: "string" } ? string :
O extends { array: true } ? Array<string | number> :

Typescript Error
')' expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { boolean: true } ? boolean :
O extends { number: true } ? number :
O extends { string: true } ? string :

Typescript Error
';' expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { boolean: true } ? boolean :
O extends { number: true } ? number :
O extends { string: true } ? string :

Typescript Error
Expression expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { boolean: true } ? boolean :
O extends { number: true } ? number :
O extends { string: true } ? string :

Typescript Error
'(' expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { boolean: true } ? boolean :
O extends { number: true } ? number :
O extends { string: true } ? string :

Typescript Error
';' expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { normalize: true } ? string :
O extends { choices: ReadonlyArray<infer C> } ? C :
O extends { coerce: (arg: any) => infer T } ? T :

Typescript Error
Declaration or statement expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { normalize: true } ? string :
O extends { choices: ReadonlyArray<infer C> } ? C :
O extends { coerce: (arg: any) => infer T } ? T :

Typescript Error
Declaration or statement expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { normalize: true } ? string :
O extends { choices: ReadonlyArray<infer C> } ? C :
O extends { coerce: (arg: any) => infer T } ? T :

Typescript Error
';' expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { normalize: true } ? string :
O extends { choices: ReadonlyArray<infer C> } ? C :
O extends { coerce: (arg: any) => infer T } ? T :

Typescript Error
Declaration or statement expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { normalize: true } ? string :
O extends { choices: ReadonlyArray<infer C> } ? C :
O extends { coerce: (arg: any) => infer T } ? T :

Typescript Error
';' expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { choices: ReadonlyArray<infer C> } ? C :
O extends { coerce: (arg: any) => infer T } ? T :
unknown;

Typescript Error
Declaration or statement expected.
Users/tattivitorino/node_modules/@types/yargs/index.d.ts
O extends { choices: ReadonlyArray<infer C> } ? C :
O extends { coerce: (arg: any) => infer T } ? T :
unknown;
18

What’s weird about that is that unique symbol was added in TypeScript 2.7, yet the package.json you posted claimed to be declaring ^2.7.2. Can you check what version of typescript is actually installed?

$ grep _id node_modules/typescript/package.json

19

Updating typescript to 2.7.2 solved the issue for me

2 Likes
20

that worked for me as well!

21

Hi everyone,

I hit the same issue described in the first post of this topic, then proceeded to update typescript to 2.7.2 and still got other issues of similar style.
So, I rolled back my typescript update to the original version in the project:

"typescript": "2.3.4"

Then I added "types": [] to the "compilerOptions" parameter of tsconfig.json as suggested here and here.
Problem fixed!

How did I get the issue?
I started to work again on an Ionic 3 project that I did not modify for a year or so. What I did modify surely was the nodejs version installed on my laptop. I did not change anything inside the project itself.

Thank you!
Gustavo.

1 Like