HammerJS 404 error

Bug, feature request, or proposal:

HammerJS 404 error after using the getting started and other post about this issue.

What is the expected behavior?

My Systemjs.Config application to work as it did before updating to latest code.

What is the current behavior?

Page will render out however none of the Material 2 things work and in the console i see a 404 error on hammerjs

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

Angular version: Angular.io 2.4.0 Material version: Material 2 beta1 OS: Windows 8.1 x64 Browser: Chrome IDE: IntelliJ IDEA Ultimate (latest version)

Code Snippit

tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": ["./node_modules/@types"],
    "types": [ "hammerjs" ]
  }
}

app.module

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule }from '@angular/material';
import { AppComponent }  from './app.component';
import { MaterialNavComponent } from './UITools/MaterialNav/UITools.MaterialNav.Component';
import { myComboBox } from './UITools/ComboBox/app.uitools.combobox';

import 'hammerjs';

@NgModule({
    imports:      [ BrowserModule, MaterialModule.forRoot() ],
    declarations: [ AppComponent, MaterialNavComponent, myComboBox ],
    bootstrap:    [ AppComponent, MaterialNavComponent, myComboBox ]
})
export class AppModule {

}

systemjs.config

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
            // other libraries
            
            'rxjs':                      'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

package.json

{
  "name": "x",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "pree2e": "webdriver-manager update",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "author": "Greg",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/material": "^2.0.0-beta.1",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "@types/node": "^6.0.55",
    "angular-in-memory-web-api": "~0.2.2",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.34",
    "@types/node": "^6.0.46",
    "canonical-path": "0.0.2",
    "concurrently": "^3.1.0",
    "http-server": "^0.9.0",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "rimraf": "^2.5.4",
    "stylelint": "^7.7.0",
    "tslint": "^3.15.1",
    "typescript": "~2.0.10"
  },
  "repository": {}
}

Errors from console

> Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/hammerjs
Error: XHR error (404 Not Found) loading http://localhost:3000/hammerjs
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:889:29) []
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47) [ => ]
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:345:33) []
Error loading http://localhost:3000/hammerjs as "hammerjs" from http://localhost:3000/app/app.module.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:889:29) []
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47) [ => ]
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:345:33) []
Error loading http://localhost:3000/hammerjs as "hammerjs" from http://localhost:3000/app/app.module.js

[devversion]

There are a few things that are important for SystemJS and Hammer here.

• Be sure to have HammerJS somewhere in your entry TS files: import 'hammerjs';
• Be sure to have hammerjs mapped in the SystemJS configuration.

File: app.module.ts

/* Load HammerJS */
import 'hammerjs';

File: systemjs.config

System.config({
  paths: {
    'npm:': 'node_modules/'
  },
  map: {
    'hammerjs': 'npm:hammerjs/hammer.js'
  }
});,

We have a PR pending that should help avoiding these issues: See https://github.com/angular/material2/pull/2702

[lucasmafra]

Thank you so much, @DevVersion! I was missing that part in my systemjs.config file. Two points about that:

1. I think the Angular Material “getting started” tutorial does not mention the need of mapping hammerjs file in your system config. Ok, that may be obvious for some developers, but as a begginer in Angular.io, I think it would be nice to add that in the tutorial.

2. Also in the Angular Material “getting started”, I caught myself in trouble with this section:

_> Finally, you need to add hammerjs to the types section of your tsconfig.json file:

{ “compilerOptions”: { “types”: [ “hammerjs” ] } }_

When I added that snippet in my tsconfig.json, my compiler was throwing many odd erros like "error TS2304: Cannot find name ‘beforeEach’ " in my app.component. Searching for the documentation of the option “types” in the CompilerOptions , I discovered that option, when explicited in the tsconfig.json file, includes only the listed packages, as it’s default behavior includes all packages under the @types folder. As a consequence of that, if you follow the tutorial and don’t add all the others dependencies you have, your app will crash in the compilation because you just have stopped of including the other dependencies that are under the @types folder. Again, it may be obvious for some more experienced developers, but I really didn’t know about that, specially because by default you are already including all the type dependecies by don’t adding that snippet in your systemjs.config file.