TypeScript errors after update to 2.0.0-alpha.8-1

[ptsydzik-zz]

Bug, feature request, or proposal:

After update to angular2 rc6 and angular materials to 2.0.0-alpha.8-1 TSC shows list of errors:

node_modules/@angular2-material/button/button.d.ts(28,14): error TS1005: '=' expected.
node_modules/@angular2-material/button/button.d.ts(28,22): error TS1005: ';' expected.
node_modules/@angular2-material/button/button.d.ts(29,14): error TS1005: '=' expected.
node_modules/@angular2-material/button/button.d.ts(29,28): error TS1005: ';' expected.
node_modules/@angular2-material/checkbox/checkbox.d.ts(48,14): error TS1005: '=' expected.
node_modules/@angular2-material/checkbox/checkbox.d.ts(48,21): error TS1005: ';' expected.
node_modules/@angular2-material/core/overlay/overlay-directives.d.ts(12,14): error TS1005: '=' expected.
node_modules/@angular2-material/core/overlay/overlay-directives.d.ts(12,24): error TS1005: ';' expected.
node_modules/@angular2-material/core/overlay/overlay-directives.d.ts(24,14): error TS1005: '=' expected.
node_modules/@angular2-material/core/overlay/overlay-directives.d.ts(24,24): error TS1005: ';' expected.
node_modules/@angular2-material/core/overlay/position/connected-position-strategy.d.ts(24,14): error TS1005: '=' expected.
node_modules/@angular2-material/core/overlay/position/connected-position-strategy.d.ts(24,23): error TS1005: ';' expected.
node_modules/@angular2-material/core/overlay/position/connected-position-strategy.d.ts(24,47): error TS1005: '=' expected.
node_modules/@angular2-material/core/portal/portal.d.ts(14,14): error TS1005: '=' expected.
node_modules/@angular2-material/core/portal/portal.d.ts(14,24): error TS1005: ';' expected.
node_modules/@angular2-material/core/portal/portal.d.ts(53,14): error TS1005: '=' expected.
node_modules/@angular2-material/core/portal/portal.d.ts(53,20): error TS1005: ';' expected.
node_modules/@angular2-material/input/input.d.ts(50,14): error TS1005: '=' expected.
node_modules/@angular2-material/input/input.d.ts(50,21): error TS1005: ';' expected.
node_modules/@angular2-material/input/input.d.ts(51,14): error TS1005: '=' expected.
node_modules/@angular2-material/input/input.d.ts(51,19): error TS1005: ';' expected.
node_modules/@angular2-material/input/input.d.ts(52,14): error TS1005: '=' expected.
node_modules/@angular2-material/input/input.d.ts(52,28): error TS1005: ';' expected.
node_modules/@angular2-material/input/input.d.ts(53,14): error TS1005: '=' expected.
node_modules/@angular2-material/input/input.d.ts(53,21): error TS1005: ';' expected.
node_modules/@angular2-material/input/input.d.ts(82,14): error TS1005: '=' expected.
node_modules/@angular2-material/input/input.d.ts(82,20): error TS1005: ';' expected.
node_modules/@angular2-material/input/input.d.ts(82,44): error TS1005: '(' expected.
node_modules/@angular2-material/input/input.d.ts(83,14): error TS1005: '=' expected.
node_modules/@angular2-material/input/input.d.ts(83,21): error TS1005: ';' expected.
node_modules/@angular2-material/input/input.d.ts(83,45): error TS1005: '(' expected.
node_modules/@angular2-material/input/input.d.ts(85,14): error TS1005: '=' expected.
node_modules/@angular2-material/input/input.d.ts(85,20): error TS1005: ';' expected.
node_modules/@angular2-material/menu/menu-item.d.ts(13,14): error TS1005: '=' expected.
node_modules/@angular2-material/menu/menu-item.d.ts(13,28): error TS1005: ';' expected.
node_modules/@angular2-material/menu/menu-trigger.d.ts(23,14): error TS1005: '=' expected.
node_modules/@angular2-material/menu/menu-trigger.d.ts(23,22): error TS1005: ';' expected.

What are the steps to reproduce?

just run tsc in console

Which versions of Angular, Material, OS, browsers are affected?

"@angular/common": "^2.0.0-rc.6",
"@angular/compiler": "^2.0.0-rc.6",
"@angular/core": "^2.0.0-rc.6",
"@angular/forms": "^2.0.0-rc.6",
"@angular/http": "^2.0.0-rc.6",
"@angular/platform-browser": "^2.0.0-rc.6",
"@angular/platform-browser-dynamic": "^2.0.0-rc.6",
"@angular/router": "^3.0.0-rc.2",
"@angular2-material/button": "^2.0.0-alpha.8-1",
"@angular2-material/card": "^2.0.0-alpha.8-1",
"@angular2-material/checkbox": "^2.0.0-alpha.8-1",
"@angular2-material/core": "^2.0.0-alpha.8-1",
"@angular2-material/icon": "^2.0.0-alpha.8-1",
"@angular2-material/input": "^2.0.0-alpha.8-1",
"@angular2-material/menu": "^2.0.0-alpha.8-1",
"@angular2-material/slider": "^2.0.0-alpha.8-1",
"@angular2-material/toolbar": "^2.0.0-alpha.8-1",
"typings": "^1.3.3",

OSX 10.11.5
tsc -v 1.8.10
node -v 5.11.1
npm -v 3.8.6

TS Config:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,

"suppressImplicitAnyIndexErrors": true

},
"exclude": [
"node_modules"
]
}

[kiwikern]

Had the same problem. Material seems to depend on typescript 2.0.0 now due to the usage of the readonly property. I could resolve the errors just by using "typescript": "^2.0.0".

[TomSeldon]

Seems like this should have thrown a peer dependency warning or something. Caught me out as well.

[marviobezerra]

I had the same error on two different projects.

[ashu2k6k]

Are you guys using gulp-typescript to compile the project. As I am still having the same issue even if I change typescript to 2.0.0

[RoxKilly]

@ashu2k6k I use gulp-typescript and I have the same problem. It's not an Angular Material issue though. I think it's because gulp-typescript uses typescript 1.8.10 internally, so when your project gets compiled the errors still occur.

I reported it here

[rspenc29]

I was able to fix the issue by changing typescript to "typescript": "^2.0.0" in package.json and passing typescript as a parameter in the gulpfile as instructed here.

var tsProject = ts.createProject('tsconfig.json', {
    typescript: require('typescript')
});

or since I'm using laravel with elixir-typescript I pass the parameters to elixir-typescript which passes it on to gulp-typescript

mix.typescript('/**/*.ts', 'public/dist', {
    typescript: require('typescript')
});

I also had to update my systemjs config and ngModule imports as instructed here.

After that it compiled no problem.

[rajkgoel]

I am getting the same problem with angular rc6, TypeScript 1.8.10 and material2 ^2.0.0-alpha.7-4.
It was working fine with angular rc5, TypeScript 1.8.10 and material2, though then I was using Angular CLI as well.

[ptsydzik-zz]

Solved by using @rspenc29 solution. Thanks to all.

[alsami]

Anyone solved the issues with visual studio? As @rspenc29 described helped to fix gulp typescript errors but when compiling with visual studio I still get the same errors.

[RoxKilly]

@SamiAl90 I would search for how to customize the version of Typescript used by Visual Studio. The basic problem is that the typescript 1.8 compiler doesn't know about readonly. If you can get VS to use typescript 2 to compile you'll solve your problem

[naveedahmed1]

@SamiAl90 For Visual Studio, you should download latest version of TypeScript.

To start using the latest RC, you can download TypeScript 2.0 RC for Visual Studio 2015 (requires VS Update 3) from the below link:

http://download.microsoft.com/download/6/D/8/6D8381B0-03C1-4BD2-AE65-30FF0A4C62DA/TS2.0.2-TS-release20-nightly-20160828.1/TypeScript_Dev14Full.exe

Before proceeding with installation, close VS, and restart computer after installation to avoid any errors.

If you are using Gulp-TypeScript.

gulp-typescript uses TypeScript 1.8 by default, to use latest version of TypeScript follow below instructions:

Open command prompt and move to your project directory. Then install TypeScript RC using below command:

npm install -g typescript@rc

Then in your gulp file update your typescript compilation task and pass typescript version:

gulp.task('CompileTS', () => {
    var tsProject = tsc.createProject('app/tsconfig.json', **{ typescript: require('typescript') }**),
        tsResult = tsProject.src()
            .pipe(tsc(tsProject));

    return tsResult.js
        .pipe(gulp.dest('content/'));
});

[techmet]

I too have similar issue, i am using grunt-ts which uses typescript version specified in package.json by default
with typescript 1.8.10
Using tsc v1.8.10 node_modules/@angular2-material/button/button.d.ts(28,14): error TS1005: '=' exp ected. node_modules/@angular2-material/button/button.d.ts(28,22): error TS1005: ';' exp ected. node_modules/@angular2-material/button/button.d.ts(29,14): error TS1005: '=' exp ected. node_modules/@angular2-material/button/button.d.ts(29,28): error TS1005: ';' exp ected.

And getting different errors with typescript 2.0.2
Using tsc v2.0.2 ProductManagement/app/app.component.ts(10,5): error TS2345: Argument of type '{ selector: string; template: string; directives: typeof HeaderComponent[]; }' is not assignable to parameter of type 'ComponentMetadataType'. Object literal may only specify known properties, and 'directives' does not ex ist in type 'ComponentMetadataType'.

did anyone solve this issue with grunt-ts?

[RoxKilly]

@techmet it sounds like your AppComponent or HeaderComponent has a directives array in its @Component metadata. The directives and providers arrays were deprecated in rc 5 and have been removed from rc 6

[ptsydzik-zz]

Looks like we can close this issue in reason that its not angular2-material issue.
I`ll like to recommend material team to update reedme.md to let users know that min TS version is 2.0.0