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

Created on 3 Sep 2016  Â·  21Comments  Â·  Source: angular/components

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"
]
}

Most helpful comment

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".

All 21 comments

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".

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

I had the same error on two different projects.

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

@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

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.

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.

Solved by using @rspenc29 solution. Thanks to all.

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.

@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

@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/'));
});

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?

@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

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

@SamiAl90 I solved my issues by opening in a text editor the yourProject.csproj file and changing the line <TypeScriptToolsVersion>1.8</TypeScriptToolsVersion> to <TypeScriptToolsVersion>2.0</TypeScriptToolsVersion> .

@Fasterluke It worked... Thank you

err1
err2

error

Two days I am trying to fix this error but still not fixed. kindly help me.

Hi, please verify that you don't have any sign = at the end of some line inside of an Array.

example with the error:
Array []= [{
name: 'test',
description: 'Here we are going to have an error if I put the sign at the end of this line =
and try to finish the paragraph in the second line' }]

example without error:
Array []= [{
name: 'test',
description: 'Here we are not going to have any error because the next
sign = is not at the end of the line' }]

I hope to help you, please let me know if this works for you.

Yes, it's working fine thanks lot

On 16-Dec-2017 1:01 am, "codingsuccessfully" notifications@github.com
wrote:

Hi, please verify that you don't have any sign = at the end of some line
inside of an Array.

example with the error:
Array []= [{
name: 'test',
description: 'Here we are going to have an error if I put the sign at the
end of this line =
and try to finish the paragraph in the second line' }]

example without error:
Array []= [{
name: 'test',
description: 'Here we are not going to have any error because the next
sign = is not at the end of the line' }]

I hope to help you, please let me know if this works for you.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/1173#issuecomment-352092023,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGoOsX2Le59JW_ni-bIomruJq8bxYqCwks5tAskZgaJpZM4J0VUJ
.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jelbourn picture jelbourn  Â·  3Comments

dzrust picture dzrust  Â·  3Comments

3mp3ri0r picture 3mp3ri0r  Â·  3Comments

julianobrasil picture julianobrasil  Â·  3Comments

crutchcorn picture crutchcorn  Â·  3Comments