Typescript Error TS1005 for 'readonly' in ionic-angular/component and /navigationfiles

Ionic Framework ionic-v3
1

Hi, I’m getting Typescript errors for ionic-angular/component and /navigations files when serving my app, which seems to be linked to the lines starting with ‘readonly’.
I’m new to Ionic, Angular2, and Typescript, but I’ve been at trying to fix this for more than a week, so I’ve updated and downgraded modules, installed the CLI (multiple times), installed the ‘Typings’, upgraded my version of Typescript, and more, all to no avail.
Nevertheless, here is my package.json

Code example:

{
“dependencies”: {
“@angular/common”: “2.0.0”,
“@angular/compiler”: “2.0.0”,
“@angular/core”: “2.0.0”,
“@angular/forms”: “^0.3.0”,
“@angular/http”: “2.0.0”,
“@angular/platform-browser”: “2.0.0”,
“@angular/platform-browser-dynamic”: “2.0.0”,
“@angular/platform-server”: “2.0.0”,
“@types/request”: “0.0.30”,
“angularfire2”: “next”,
“es6-shim”: “0.35.1”,
“firebase”: “^3.4.0”,
“gulp-typescript”: “^3.0.0”,
“ionic-angular”: “^2.0.0-beta.11-201609011853”,
“ionic-native”: “1.3.10”,
“ionicons”: “3.0.0”,
“reflect-metadata”: “0.1.8”,
“rxjs”: “^5.0.0-beta.12”,
“typescript”: “^2.0.0”,
“zone.js”: “^0.6.25”
},
“devDependencies”: {
“del”: “2.2.0”,
“gulp”: “3.9.1”,
“gulp-watch”: “4.3.5”,
“ionic-gulp-browserify-typescript”: “2.0.0”,
“ionic-gulp-fonts-copy”: “^1.0.0”,
“ionic-gulp-html-copy”: “^1.0.0”,
“ionic-gulp-sass-build”: “^1.0.0”,
“ionic-gulp-scripts-copy”: “^2.0.0”,
“ionic-gulp-tslint”: “^1.0.0”,
“tslint-ionic-rules”: “0.0.4”,
“run-sequence”: “1.1.5”
},
“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”
}
],
“name”: “skilltappprototpe”,
“description”: “skilltappPrototpe: An Ionic project”
}

Error Message:

TypeScript error:/node_modules/ionic-angular/components/img/img.d.ts(24,14): Error TS1005: '=' expected. TypeScript error:/node_modules/ionic-angular/components/img/img.d.ts(24,20): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/img/img.d.ts(25,14): Error TS1005: '=' expected. TypeScript error:/node_modules/ionic-angular/components/img/img.d.ts(25,21): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/label/label.d.ts(11,14): Error TS1005: '=' expected. TypeScript error: /node_modules/ionic-angular/components/label/label.d.ts(11,18): Error TS1005: ';' expected. TypeScript error:/node_modules/ionic-angular/components/menu/menu-toggle.d.ts(13,14): Error TS1005: '=' expected. TypeScript error: /node_modules/ionic-angular/components/menu/menu-toggle.d.ts(13,22): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/option/option.d.ts(12,14): Error TS1005: '=' expected. TypeScript error:/node_modules/ionic-angular/components/option/option.d.ts(12,18): Error TS1005: ';' expected. TypeScript error:/node_modules/ionic-angular/components/range/range.d.ts(76,14): Error TS1005: '=' expected. TypeScript error:/node_modules/ionic-angular/components/range/range.d.ts(76,19): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/range/range.d.ts(77,14): Error TS1005: '=' expected. TypeScript error: /node_modules/ionic-angular/components/range/range.d.ts(77,24): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(40,14): Error TS1005: '=' expected. TypeScript error:/node_modules/ionic-angular/components/select/select.d.ts(40,18): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(40,20): Error TS1068: Unexpected token. A constructor, method, accessor, or property was expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(41,31): Error TS1005: '(' expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(42,15): Error TS1005: ';' expected. TypeScript error:/node_modules/ionic-angular/components/select/select.d.ts(42,21): Error TS1109: Expression expected. TypeScript error:/node_modules/ionic-angular/components/select/select.d.ts(44,19): Error TS1005: ',' expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(44,25): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(44,31): Error TS1109: Expression expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(45,25): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(45,31): Error TS1109: Expression expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(46,24): Error TS1005: ',' expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(46,35): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(46,41): Error TS1109: Expression expected. TypeScript error:/node_modules/ionic-angular/components/select/select.d.ts(47,25): Error TS1005: ',' expected. TypeScript error:/node_modules/ionic-angular/components/select/select.d.ts(47,31): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(47,37): Error TS1109: Expression expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(48,17): Error TS1005: ',' expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(48,23): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(48,29): Error TS1109: Expression expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(49,16): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(49,22): Error TS1109: Expression expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(50,18): Error TS1005: ';' expected. TypeScript error:/node_modules/ionic-angular/components/select/select.d.ts(50,24): Error TS1109: Expression expected. TypeScript error: /node_modules/ionic-angular/components/select/select.d.ts(51,1): Error TS1128: Declaration or statement expected. TypeScript error: /node_modules/ionic-angular/components/tabs/tab.d.ts(41,14): Error TS1005: '=' expected. TypeScript error: /node_modules/ionic-angular/components/tabs/tab.d.ts(41,19): Error TS1005: ';' expected. TypeScript error:/node_modules/ionic-angular/components/virtual-scroll/virtual-util.d.ts(37,14): Error TS1005: '=' expected. TypeScript error: /node_modules/ionic-angular/components/virtual-scroll/virtual-util.d.ts(37,19): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/virtual-scroll/virtual-util.d.ts(38,14): Error TS1005: '=' expected. TypeScript error: /node_modules/ionic-angular/components/virtual-scroll/virtual-util.d.ts(38,18): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/virtual-scroll/virtual-util.d.ts(39,14): Error TS1005: '=' expected. TypeScript error: /node_modules/ionic-angular/components/virtual-scroll/virtual-util.d.ts(39,18): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/components/virtual-scroll/virtual-util.d.ts(40,14): Error TS1005: '=' expected. TypeScript error: /node_modules/ionic-angular/components/virtual-scroll/virtual-util.d.ts(40,17): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/navigation/nav-controller-base.d.ts(90,14): Error TS1005: '=' expected. TypeScript error: /node_modules/ionic-angular/navigation/nav-controller-base.d.ts(90,21): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/navigation/view-controller.d.ts(49,14): Error TS1005: '=' expected. TypeScript error: /node_modules/ionic-angular/navigation/view-controller.d.ts(49,18): Error TS1005: ';' expected. TypeScript error: /node_modules/ionic-angular/navigation/view-controller.d.ts(50,14): Error TS1005: '=' expected. TypeScript error: /node_modules/ionic-angular/navigation/view-controller.d.ts(50,19): Error TS1005: ';' expected.

ionic-gulp-browserify-typescript/index.js:

var gulp = require(‘gulp’),
browserify = require(‘browserify’),
watchify = require(‘watchify’),
tsify = require(‘tsify’),
pretty = require(‘prettysize’),
merge = require(‘lodash.merge’),
source = require(‘vinyl-source-stream’),
buffer = require(‘vinyl-buffer’),
sourcemaps = require(‘gulp-sourcemaps’),
uglify = require(‘gulp-uglify’),
stream = require(‘stream’);

var defaultOptions = {
watch: false,
src: [‘./app/app.ts’, ‘./typings/index.d.ts’],
outputPath: ‘www/build/js/’,
outputFile: ‘app.bundle.js’,
minify: false,
browserifyOptions: {
cache: {},
packageCache: {},
debug: true
},
watchifyOptions: {},
tsifyOptions: {},
uglifyOptions: {},
onError: function(err){
console.error(err.toString());
this.emit(‘end’);
},
onLog: function(log){
console.log((log = log.split(’ ‘), log[0] = pretty(log[0]), log.join(’ ')));
}
}

module.exports = function(options) {
options = merge(defaultOptions, options);

var b = browserify(options.src, options.browserifyOptions)
.plugin(tsify, options.tsifyOptions);

if (options.watch) {
b = watchify(b, options.watchifyOptions);
b.on(‘update’, bundle);
b.on(‘log’, options.onLog);
}

return bundle();

function bundle() {
var debug = options.browserifyOptions.debug;
return b.bundle()
.on(‘error’, options.onError)
.pipe(source(options.outputFile))
.pipe(buffer())
.pipe(debug ? sourcemaps.init({ loadMaps: true }) : noop())
.pipe(options.minify ? uglify(options.uglifyOptions) : noop())
.pipe(debug ? sourcemaps.write(‘./’,{includeContent:true, sourceRoot:‘…/…/…/’}) : noop())
.pipe(gulp.dest(options.outputPath));
}

function noop(){
return new stream.PassThrough({ objectMode: true });
}
}

Help would be greatly appreciated. Thank you.

1 Like
2

I am getting the same error. It looks like ionic is not playing nice with typescript 2.0 at the moment. I’ve tried adding “typescript”: “^2.0.2” to my DevDependencies but it doesn’t help.

1 Like
3

Update to TS2.0.

We’re cutting a new release of the build tools tomorrow as well that will include updates for TS2.0 build changes.

4

Ok, thanks Mike, and thank you guys for building an awesome tool. I’d just like to get up and running.

5

So is it released for TS2.0? I have the above error till now with latest ionic-cli(2.0.1).

6

I have the same issues as you are getting when compiling using ionic/cloud. Has this issue been resolved? I need to develop my notification service quickly.

7

I noticed latest Ionic2 used rollup for packaging instead of web-pack and gulp.
So I removed all gulp tasks and adds @ionic/app-scripts for packaging.
You can find release notes here: https://github.com/driftyco/ionic/releases .
You can see what I wrote above. Hope this help you.

8

I have this issue too. Currently working with the Beta37. Everything was fine. Did and npm install again. Afterwards it is not working. What changed?

9

Same issue… with TS2.0

10

The same issue here with the latest
ionic -v
2.1.0
and
tsc -v
Version 2.0.3

Any help would be much appreciated?

11

Not that I know of… I had to roll back down to a previous version. But then I wanted to use the Auth service and had to roll back up… Again this error but now for ionic-cloud. :disappointed:

12

At my case, I changed the package.json file to fixed versions, instead of allow to load newer ones. Think there is one not really working right now.

13

Same issue here, I am already using tsc 2.0.3
"typescript":"2.0.3" in devDependencies
with latest ionic-angular
"ionic-angular": "nightly",
with angular 2.0.2

Also I got package version errors when I was trying to run ionic 2rc demo.
npm ERR! peerinvalid The package @angular/compiler@2.1.1 does not satisfy its siblings' peerDependencies requirements! npm ERR! peerinvalid Peer @angular/compiler-cli@0.6.4 wants @angular/compiler@2.0.2 npm ERR! peerinvalid Peer @angular/platform-browser-dynamic@2.1.1 wants @angular/compiler@2.1.1 npm ERR! peerinvalid Peer @angular/platform-server@2.1.1 wants @angular/compiler@2.1.1 npm ERR! peerinvalid Peer ionic-angular@2.0.0-rc.1-201610191717 wants @angular/compiler@^2.0.0 npm ERR! Please include the following file with any support request: npm ERR! C:\Users\Wu\Downloads\ionic-2.0.0-rc.1\demos\npm-debug.log

14

I ended up just starting a fresh app with all the latest packages. Sucks to have to start over, but I had been having trouble for weeks, so…

15

I downgraded my project to 2.0.0-beta.11 with angular@2.0.0-rc.4. But this is missing NgModule. Do you mind to share your fresh project if you are using angular 2 release version?

16

No problem. Here is my package.json:
“name”: “ionic-hello-world”,
“author”: “Ionic Framework”,
“homepage”: “http://ionicframework.com/”,
“private”: true,
“scripts”: {
“build”: “ionic-app-scripts build”,
“watch”: “ionic-app-scripts watch”,
“serve:before”: “watch”,
“emulate:before”: “build”,
“deploy:before”: “build”,
“build:before”: “build”,
“run:before”: “build”
},
“dependencies”: {
"@angular/common": “^2.0.0”,
"@angular/compiler": “^2.0.0”,
"@angular/compiler-cli": “0.6.2”,
"@angular/core": “^2.0.0”,
"@angular/forms": “^2.0.0”,
"@angular/http": “^2.0.0”,
"@angular/platform-browser": “^2.0.0”,
"@angular/platform-browser-dynamic": “^2.0.0”,
"@angular/platform-server": “^2.0.0”,
"@ionic/storage": “^1.0.3”,
“ionic-angular”: “^2.0.0-rc.1”,
“ionic-native”: “^2.2.3”,
“ionicons”: “^3.0.0”,
“rxjs”: “5.0.0-beta.12”,
“zone.js”: “^0.6.21”
},
“devDependencies”: {
"@ionic/app-scripts": “^0.0.36”,
“typescript”: “^2.0.3”
},
“cordovaPlugins”: [
“cordova-plugin-device”,
“cordova-plugin-console”,
“cordova-plugin-whitelist”,
“cordova-plugin-splashscreen”,
“cordova-plugin-statusbar”,
“ionic-plugin-keyboard”
],
“cordovaPlatforms”: [
“ios”,
{
“platform”: “ios”,
“version”: “”,
“locator”: “ios”
}
],
“description”: “appname: An Ionic project”
}

System info:

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v6.8.0
Xcode version: Xcode 8.0 Build version 8A218a
17

Thank you masscreation!
I got the same error with your package.json file. Can you show your tsconfig.json?
This is mine :
{ "compilerOptions": { "target": "es5", "module": "commonjs", "emitDecoratorMetadata": true, "experimentalDecorators": true }, "filesGlob": [ "**/*.ts", "!node_modules/**/*" ], "exclude": [ "node_modules", "typings/global", "typings/global.d.ts" ], "compileOnSave": false, "atom": { "rewriteTsconfig": false } }

18

tsconfig.json:
{
“compilerOptions”: {
“allowSyntheticDefaultImports”: true,
“declaration”: true,
“emitDecoratorMetadata”: true,
“experimentalDecorators”: true,
“lib”: [
“dom”,
“es2015”
],
“module”: “es2015”,
“moduleResolution”: “node”,
“target”: “es5”
},
“exclude”: [
“node_modules”
],
“compileOnSave”: false,
“atom”: {
“rewriteTsconfig”: false
}
}

19

The structure has changed quite a bit. It might be best–if you can-- to create a new app and copy the needed files over.

20

Yeah, I will also try to make the demo from ionic 2 release build to work. Thanks!!