Components: 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 [email protected]), 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 :-)

[csharpee]

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

[jelbourn]

Just published an alpha.5-2 which should resolve this issue.
(except for the Hammer part, which still needs the HammerJS typings to be present)

[mgpeng]

I have same error can't find 'Hammer' when ng serve.
[email protected]
@[email protected]
[email protected]
[email protected]

---

typings.json:
{
"globalDependencies": {
"es6-collections": "registry:dt/es6-collections#0.5.1[phone]",
"es6-promise": "registry:dt/es6-promise#0.0.0[phone]",
"hammerjs": "registry:dt/hammerjs#2.0.8[phone]",
"node": "registry:dt/node#4.0.0[phone]"
},
"ambientDevDependencies": {
"angular-protractor": "registry:dt/angular-protractor#1.5.0[phone]",
"jasmine": "registry:dt/jasmine#2.2.0[phone]",
"selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0[phone]",
"hammerjs": "registry:dt/hammerjs#2.0.8[phone]"
},
"ambientDependencies": {
"es6-shim": "registry:dt/es6-shim#0.35.1[phone]",
"hammerjs": "registry:dt/hammerjs#2.0.8[phone]"
}
}

---

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/tmp/broccoli_type_script_compiler-input_base_path-CqTiC7XQ.tmp/0/src/core/gestures/MdGestureConfig.ts (31, 18): Cannot find name 'Hammer'.
/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/tmp/broccoli_type_script_compiler-input_base_path-CqTiC7XQ.tmp/0/src/core/gestures/MdGestureConfig.ts (34, 20): Cannot find name 'Hammer'.
/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/tmp/broccoli_type_script_compiler-input_base_path-CqTiC7XQ.tmp/0/src/core/gestures/MdGestureConfig.ts (35, 25): Cannot find name 'Hammer'.
/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/tmp/broccoli_type_script_compiler-input_base_path-CqTiC7XQ.tmp/0/src/core/gestures/MdGestureConfig.ts (38, 19): Cannot find name 'Hammer'.
/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/tmp/broccoli_type_script_compiler-input_base_path-CqTiC7XQ.tmp/0/src/core/gestures/MdGestureConfig.ts (39, 21): Cannot find name 'Hammer'.
/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/tmp/broccoli_type_script_compiler-input_base_path-CqTiC7XQ.tmp/0/src/core/gestures/MdGestureConfig.ts (40, 21): Cannot find name 'Hammer'.
at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)
at BroccoliTypeScriptCompiler.build (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
at /Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/broccoli-caching-writer/index.js:152:21
at lib$rsvp$$internal$$tryCatch (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/rsvp/dist/rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/rsvp/dist/rsvp.js:1019:11)
at lib$rsvp$asap$$flush (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/rsvp/dist/rsvp.js:1198:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)

The broccoli plugin was instantiated at:
at BroccoliTypeScriptCompiler.Plugin (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/broccoli-plugin/index.js:10:31)
at BroccoliTypeScriptCompiler.CachingWriter as constructor
at BroccoliTypeScriptCompiler (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:27:5)
at Angular2App._getTsTree (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/angular-cli/lib/broccoli/angular2-app.js:321:18)
at Angular2App._buildTree (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/angular-cli/lib/broccoli/angular2-app.js:116:23)
at new Angular2App (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
at module.exports (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/angular-cli-build.js:21:25)
at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/angular-cli/lib/models/builder.js:55:19)
at Class.module.exports.Task.extend.init (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/angular-cli/lib/models/builder.js:89:10)
at new Class (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/core-object/core-object.js:18:12)
at Class.module.exports.Task.extend.run (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/angular-cli/lib/tasks/serve.js:15:19)
at /Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/angular-cli/lib/commands/serve.js:64:24
at lib$rsvp$$internal$$tryCatch (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/rsvp/dist/rsvp.js:1048:17)
at /Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/rsvp/dist/rsvp.js:331:11
at lib$rsvp$asap$$flush (/Users/apple/Documents/xixijiu_ng-md/xxj-m2-dev/node_modules/rsvp/dist/rsvp.js:1198:9)

[tomascharad]

Same error here, solved by adding:

"hammerjs": "registry:dt/hammerjs#2.0.4+20160417130828"

to typings.json, then executed

typings install

And restarting webpack.

[tariknz]

npm install hammerjs --save
typings install dt~hammerjs --save --global

[vapits]

Same here none of the solutions above worked for me.

[ggranum]

A workaround for those using the beta-11 angular-cli ( "angular-cli": "1.0.0-beta.11-webpack.2" ):

1. npm install --save @types/hammerjs
2. npm install --save hammerjs
   
   
   
   1. (This probably did nothing)
   
   
3. Added the line import 'hammerjs' to my app.module.ts file.
4. Copied the overlay styles.css into my own CSS, as I've yet to figure out how I'm supposed to reference vendor styles in the node_modules directory in the new CLI build system.

This is for what is basically a new project, created by angular-cli. When the above suggestions in this issue didn't help, I deleted all the typings info I'd added (by deleting the typings directory, since it HammerJs was all alone in there), and did the above three steps. Builds without errors now, and also displays correctly - at least at first glance.

[davideast]

@vapits @ggranum

In your tsconfig.json you need to enable the skipLibCheck option. This keeps TypeScript from type checking library code that is presumably already type checked.

"skipLibCheck": true

[RyannGalea]

After having a very similar issue when using Typescript and Firebase Cloud functions David was able to let me know that I had to add es2017 * dom to my lib, inside of 'tsconfig.json'

"lib": ["es6","es2017","dom"],

This may help future finders.

[angular-automatic-lock-bot[bot]]

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._}