gulp-typescript compiler throws errors on readonly modifier

Question

I've just upgraded my app to use Angular 2 rc.6 and Angular Material 2 alpha 8-1. These packages rely on typescript 2 and the latter makes use of the new readonly modifier.

I use gulp-typescript to compile my .ts files and I'm now getting a lot of errors from files that use the readonly modifier. For instance, this line:

readonly change: Observable<MdButtonToggleChange>;

Throws these errors during compilation:

error TS1005: '=' expected.

error TS1005: ';' expected.

error TS1005: '(' expected.

I think this is probably because gulp-typescript internally uses typescript 1.8.10, which does not have the readonly modifier.

None of my own code uses readonly; The only files throwing errors are third-party typescript definition files (.d.ts) from Angular 2 Material packages. The files in question are all within my nodes_module/ folder, and I've tried to ignore them by having the following in tsconfig.json:

"exclude": [
  "node_modules",
  "typings"
]

The errors still show up though.

Can I solve this?
If not, is there an easy way to get the compiler to ignore .d.ts files?

BeetleJuice · Accepted Answer · 2016-09-05 02:19:20Z

3

@cartant got the right answer yesterday but I only saw it a minute ago. Basically, the solution is to get gulp-typescript to use the typescript 2 instead of the built-in typescript 1.8. Here is how:

1. I added typescript 2.0.2 as a devDependency in package.json

"devDependencies": {    
  "gulp-typescript": "^2.13.6",
  "typescript": "^2.0.2",
}

2. I ran npm install [email protected]

3. I edited how I created my gulp-typescript project in gulpfile.js

From:

var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');

To:

var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json', {
    //Use TS version installed by NPM instead of gulp-typescript's built-in
    typescript: require('typescript')
});

More info. Now the compile-time errors are gone :-)

answered Sep 5, 2016 at 2:19

BeetleJuice

41.1k24 gold badges120 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cartant · Accepted Answer · 2016-09-03 07:26:41Z

1

One solution would be to add a TypeScript 2.0.2 RC dependency to your project (npm install typescript@rc --save-dev) and to pass it to gulp-typescript using the unofficial typescript option:

[...].pipe(ts({
    typescript: require('typescript')
}));

edited Sep 3, 2016 at 7:26

answered Sep 3, 2016 at 5:17

cartant

58.6k17 gold badges169 silver badges201 bronze badges

4 Comments

BeetleJuice Over a year ago

Thanks for the note. As I wrote in the OP, the errors are thrown only by .d.ts files belonging to ng-Material. The Angular library itself throws no error. All errors come from node_modules/@angular2-material/

cartant Over a year ago

I should have paid closer attention to the question; it was something I was anticipating having to deal with when switching to RC6. It seems that the Angular team have done more that just move to the esm source, as said source no longer seems to include readonly properties. Something of a relief, I guess.

BeetleJuice Over a year ago

I came to post my solution after getting the problem fixed and I just noticed that you changed your answer to the correct one. Thank you.

cartant Over a year ago

Yeah, I snipped out the irrelevant Angular 2 stuff and cleaned it up a bit. I should have posted a comment to let you know. Hope you didn't spend too much time looking into the solution.

Collectives™ on Stack Overflow

gulp-typescript compiler throws errors on readonly modifier

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related