Components: HammerJS 404 error

[bluedragonknight]

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

[jelbourn]

It looks like HammerJS isn't in your system config. Not sure why it worked before, but this is somewhat orthogonal to material itself.

[Qyoom]

I have this same situation. But how specifically do I include HammerJs in my system config? Thank you.

[lucasmafra]

I have the same issue here

[bluedragonknight]

I do not have access to my code right now as i am working, but i will post up what i added to my SystemJS to get this working. I like many others are very new to Angular.IO and everything around it so its nice, as bad as that sounds, to see others with similar issues.

[lucasmafra]

That would be great! I'm also new in Angular and it's very nice to get this
kind of support so quickly. Looking forward your code!

Em 30 de jan de 2017 1:06 PM, "bluedragonknight" [e-mail]
escreveu:

I do not have access to my code right now as i am working, but i will post
up what i added to my SystemJS to get this working. I like many others are
very new to Angular.IO and everything around it so its nice, as bad as that
sounds, to see others with similar issues.

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

[Qyoom]

Yes, with the complexity, variation, and frequent changes in these system structures, social knowledge sharing is key for learning and being productive.

I had my Angular2 project running fine, but when attempting to add Material—hammer specifically—it breaks. My project is pretty much identical to what bluedragonknight has listed, but also as a beginner with Angular, jelbourn's message is a bit too terse for me to understand at this point.

So, bluedragonknight, thank you again!

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

[devversion]

@lucasmafra No problem.

Regarding 1) We will update that soon. See #2702
Regarding 2) Sounds like this is a valid issue. I will create another issue for it. So we can keep track of it.

[lucasmafra]

Nice, @DevVersion. In my case, I just removed the types option, because i saw no point of adding it since my application depends on all files under the @types folder.

[bluedragonknight]

@DevVersion has done what i had done as i didn't realize how the whole systemjs. Sorry for the delay in response time things been a little crazy.

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