Angular material 2 generates errors

Question

I Have read and followed the instructions and suggestions given here and here and still cant stop this errors from popping up. Below is the installation directions that I followed

And these are the errors I keep getting

The following is my tsconfig file

{
  "compileOnSave": true,
  "compilerOptions": {
"typeRoots": [ "libs/@types" ],

"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../wwwroot/appScripts/",
"removeComments": false,
"sourceMap": true,
"target": "es6",
 "moduleResolution": "node"
  },
  "exclude": [
"node_modules",
"typings/index",
"typings/index.d.ts",
"typings/browser",
"typings/browser.d.ts"

  ]
}

my gulpfile

    var ts = require('gulp-typescript');
var gulp = require('gulp');
var clean = require('gulp-clean');

var destPath = './wwwroot/libs/';

gulp.task('clean', function () {
    return gulp.src(destPath)
        .pipe(clean());
});


gulp.task("scriptsNStyles", () => {
    gulp.src([
        'core-js/client/**',
        'systemjs/dist/system.src.js',
        'reflect-metadata/**',
            'rxjs/**',
            'zone.js/dist/**',
            'jquery/dist/jquery.*js',
            'bootstrap/dist/js/bootstrap.*js',
            'ng2-bootstrap/**',
            'lodash/**',
            'moment/**',
            'symbol-observable/**',
            'hammerjs/**',
            'jasmine/**',
            '@types/**',
            '@angular/**'
    ], {
        cwd: "node_modules/**"
    })
        .pipe(gulp.dest("./wwwroot/libs"));
});

var tsProject = ts.createProject('scripts/tsconfig.json'
    ,{ typescript: require('typescript') }
    );
gulp.task('ts', function (done) {
    //var tsResult = tsProject.src();
    var tsResult = gulp.src(["scripts/**/*.ts","scripts/**/**/*.ts", "scripts/*.ts"])
        .pipe(ts(tsProject), undefined, ts.reporter.fullReporter());
    return tsResult.js.pipe(gulp.dest('./wwwroot/appScripts'));
});

gulp.task('watch', ['watch.ts']);

gulp.task('watch.ts', ['ts'], function () {
    return gulp.watch('scripts/**/*.ts', ['ts']);
});

gulp.task('default', ['scriptsNStyles', 'watch']);

My main.ts file

    /// <reference path="../wwwroot/libs/@types/hammerjs/index.d.ts" />

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";

platformBrowserDynamic().bootstrapModule(AppModule);

I have lost half of my hair trying to figure this one out. I am sure I must be doing some silly mistake some where.

score 1 · Answer 1 · answered Nov 20 '16 at 16:04

Ok, so I got my problem solved but I need somebody to explain to me why the approach I adopted worked, well, almost. I have followed every suggestion I could find to get Angular material 2.0.0-alpha.10 and Hammerjs@2.0.8 and "@types/hammerjs@2.0.33" to play together to no avail. I did this "import 'hammerjs'" in my main.ts it never worked. So I double-clicked one of the errors in the error list and got to the file containing th error

    import { MdGestureConfig } from '../core';
import 'hammerjs';
/**
 * An extension of MdGestureConfig that exposes the underlying HammerManager instances.
 * Tests can use these instances to emit fake gesture events.
 */
export declare class TestGestureConfig extends MdGestureConfig {
    /**
     * A map of Hammer instances to element.
     * Used to emit events over instances for an element.
     */
    hammerInstances: Map<HTMLElement, HammerManager[]>;
    /**
     * Create a mapping of Hammer instances to element so that events can be emitted during testing.
     */
    buildHammer(element: HTMLElement): HammerManager;
    /**
     * The Angular event plugin for Hammer creates a new HammerManager instance for each listener,
     * so we need to apply our event on all instances to hit the correct listener.
     */
    emitEventForElement(eventType: string, element: HTMLElement, eventData?: {}): void;
}

and placed the following import lines in there

import 'hammerjs'

and, voila, all the errors disappeared. I am hoping some smart guy out there will offer some explanation as to how this is or is not a fix after all.

I however have this final bit of challenge to deal with

Severity    Code    Description Project File    Line    Suppression State
Error   TS2309  Build:An export assignment cannot be used in a module with other exported elements. ReportBook.Web  C:\Users\Julius\Documents\Projects\School\Development\ReportBook\ReportBook.Web\node_modules\@types\node\index.d.ts 3625

score 0 · Answer 2 · answered Jan 10 '17 at 22:43

I had the same problem today, when upgrading angular to 2.4.x from 2.0.x. I found the solution here: https://material2-docs-dev.firebaseapp.com/guide/getting-started

If you want to include HammerJS from npm, you can install it:

> npm install --save hammerjs  
> npm install --save-dev @types/hammerjs

Import HammerJS on your app's module.

src/app/app.module.ts

> import 'hammerjs';

Finally, you need to add hammerjs to the types

section of your tsconfig.json file:
{
  "compilerOptions": {
    "types": [
      "hammerjs"
    ]
  }
}

Angular material 2 generates errors

2 Answers2