problems with typescript - ts-loader + webpack

[vladimir-ivanov]

Bug:

trying to compile the project with typescript gives me the following errors

What is the current behavior?

ERROR in \node_modules@angular2-material\core\gestures\MdGestureConfig.d.ts
(4,40): error TS2304: Cannot find name 'HammerManager'.

ERROR in \node_modules@angular2-material\core\overlay\position\global-position-strategy.d.ts
(6,22): error TS2420: Class 'GlobalPositionStrategy' incorrectly implements interface 'PositionStrategy'.
Property 'apply' is missing in type 'GlobalPositionStrategy'.

ERROR in \node_modules@angular2-material\core\overlay\position\connected-position-strategy.d.ts
(3,31): error TS2306: File '/node_modules/@angular2-material/core/overlay/position/viewport-ruler.d.ts' is not a module.

ERROR in \node_modules@angular2-material\core\overlay\position\connected-position-strategy.d.ts
(4,10): error TS2305: Module '"/node_modules/@angular2-material/core/overlay/position/connected-position"' has no exported member 'ConnectionPair'.

ERROR in \node_modules@angular2-material\core\overlay\position\connected-position-strategy.d.ts
(12,22): error TS2420: Class 'ConnectedPositionStrategy' incorrectly implements interface 'PositionStrategy'.
Property 'apply' is missing in type 'ConnectedPositionStrategy'.

ERROR in \node_modules@angular2-material\core\overlay\position\overlay-position-builder.d.ts
(1,31): error TS2306: File '/node_modules/@angular2-material/core/overlay/position/viewport-ruler.d.ts' is not a module.

ERROR in \node_modules@angular2-material\core\overlay\overlay.d.ts
(5,31): error TS2306: File '/node_modules/@angular2-material/core/overlay/position/viewport-ruler.d.ts' is not a module.

Tried to exlude it in tsconig.json, but no luck

[radostyle]

I'm getting this too.

[vladimir-ivanov]

import '@angular2-material/core';
import '@angular2-material/button';
import '@angular2-material/card';
import '@angular2-material/checkbox';
import '@angular2-material/sidenav';
import '@angular2-material/input';
import '@angular2-material/list';
import '@angular2-material/radio';
import '@angular2-material/progress-bar';
import '@angular2-material/progress-circle';
import '@angular2-material/toolbar';

adding this imports to vendors.ts resolves the issue with typescript errors

[vladimir-ivanov]

the outstanding bug hoever is the self.__el.open is not a function

[carathorys]

Add hammerjs typings, run typings i and then restart webpack.
You can add it to your typings.json file into the ambient (or global) dependencies
"hammerjs": "registry:dt/hammerjs#2.0.4+20160417130828",

[jelbourn]

Everything except the Hammer thing is due to us applying TypeScript's /** @internal */ to things we don't want in the public API for components, but then those missing methods/classes making the downstream compile fail. #538 should fix that. I'll try to do another release once that and #535 are in.

@carathorys is right that the Hammer thing is missing the typings for HammerJS

[vladimir-ivanov]

thank you, any idea on the other bug? shall I raise a separate issue?

[jelbourn]

@vladimir-ivanov Please file a new issue for any unrelated problems.

[vladimir-ivanov]

thank you, thought initially that they are related :-)

[carathorys]

@vladimir-ivanov I use this typings.json (for typings@1.0.4), and it works for me without any errors

{
  "globalDependencies": {
    "es6-collections": "registry:dt/es6-collections#0.5.1+20160316155526",
    "es6-promise": "registry:dt/es6-promise#0.0.0+20160423074304",
    "hammerjs": "registry:dt/hammerjs#2.0.4+20160417130828",
    "node": "registry:dt/node#4.0.0+20160509154515"
  },
  "dependencies": {
    "lodash": "registry:npm/lodash#4.0.0+20160416211519"
  }
}

[Uter1007]

Got the same errors except of hammerjs (cuz of the typings).

[vladimir-ivanov]

upgrading the ts-loader and typescript to version 1.8.X fixes the issue with hammer.js for me, did not have time to investigate why :-)

[oDinZu]

I have been having similar problems and am a bit new to the ng scene. The errors produced can be bypassed by using npm run lite and the server works like its suppose to.

The website works great when I bypass tsc. I have a clean install running with all available material packages installed via version as one example "@angular2-material/sidenav": "^2.0.0-alpha.5",

I have used the button, icon, list, and toolbar successfully even with the errors I have pasted below.

I have reinstalled and added the materials 3 times today, but each time I rerun "npm start" script tsc && concurrently "npm run tsc:w" "npm run lite" (after the materials are installed with npm install)

I receive the following errors.

node_modules/@angular2-material/icon/icon.d.ts(42,22): error TS2420: Class 'MdIcon' incorrectly implements interface 'AfterViewChecked'.
Property 'ngAfterViewChecked' is missing in type 'MdIcon'.
node_modules/@angular2-material/icon/icon.d.ts(42,22): error TS2420: Class 'MdIcon' incorrectly implements interface 'OnChanges'.
Property 'ngOnChanges' is missing in type 'MdIcon'.
node_modules/@angular2-material/icon/icon.d.ts(42,22): error TS2420: Class 'MdIcon' incorrectly implements interface 'OnInit'.
Property 'ngOnInit' is missing in type 'MdIcon'.
node_modules/@angular2-material/list/list.d.ts(8,22): error TS2420: Class 'MdListItem' incorrectly implements interface 'AfterContentInit'.
Property 'ngAfterContentInit' is missing in type 'MdListItem'.
node_modules/@angular2-material/sidenav/sidenav.d.ts(77,22): error TS2420: Class 'MdSidenavLayout' incorrectly implements interface 'AfterContentInit'.
Property 'ngAfterContentInit' is missing in type 'MdSidenavLayout'.

All help is much appreciated.

My current architecture / stack can be viewed here:
Phone_Apps__Dapps__Web_Development.pdf