Topic: ERROR ReferenceError: Hammer is not defined (Help me)
                  
                  Hector Alejandro Rodriguez
                  free
                  asked 7 years ago
                
                I again here, I'm trying to install Universal Angular with mdbootstrap 6.2.2 and I have an error in the library hammer.js, I leave here the error that generates me
                
                  
                
                
                
                  
                  
                  
                    
                    
                
              
              
              
            ERROR ReferenceError: Hammer is not defined
    at new MyHammerConfig (C:\Users\criacao\Documents\universal\mosaico\dist\server.js:1361:33)
    at _createClass (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8438:24)
    at _createProviderInstance (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8412:30)
    at resolveNgModuleDep (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8375:25)
    at _callFactory (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8467:36)
    at _createProviderInstance (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8415:30)
    at resolveNgModuleDep (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8375:25)
    at _createClass (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8442:33)
    at _createProviderInstance (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8412:30)
    at resolveNgModuleDep (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8375:25)
Unhandled Promise rejection: Hammer is not defined ; Zone: <root> ; Task: Promise.then ; Value: ReferenceError: Hammer is not defined
    at new MyHammerConfig (C:\Users\criacao\Documents\universal\mosaico\dist\server.js:1361:33)
Here I leave the configuration of the webpack.config.sever.js, which is located in the root folder.
// Work around for https://github.com/angular/angular-cli/issues/7200
const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
module.exports = {
  mode: 'none',
  entry: {
    // This is our Express server for Dynamic universal
    server: './server.ts',
    // This is an example of Static prerendering (generative)
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  // Make sure we include all node_modules etc
  externals: [/node_modules/, nodeExternals({
    whitelist: [
        /^@agm\/core/,
        /^hammerjs/
      ]
  })],
  output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' },
      {
        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
        // Removing this will cause deprecation warnings to appear.
        test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
        parser: { system: true },
      },
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
}
                      
                        Add comment
                      
                    
                  
                
                      
                      Arkadiusz Idzikowski
                      staff
                        answered 7 years ago
                    
                    Dear Hector,
Please follow these steps and let me know if that worked:
                    
                    
                    
                    
                  
                  
                - Install types for hammer:
 
"types": [ "hammerjs", "jasmine", "jasminewd2", "node", "q", "selenium-webdriver" ]
3. Replace code in your app module with this code (change module names and import paths for mdb elements if you use free version):
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';
import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { Hammer } from 'hammerjs/hammer';
export class MyHammerConfig extends HammerGestureConfig {
buildHammer(element:HTMLElement) {
constmc=newHammer(element, {
touchAction:'auto',
inputClass:Hammer.SUPPORT_POINTER_EVENTS?Hammer.PointerEventInput:Hammer.TouchInput,
recognizers: [
[Hammer.Swipe, {
direction:Hammer.DIRECTION_HORIZONTAL
}]
]
});
returnmc;
}
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule.withServerTransition({ appId:'serverApp' }),
BrowserAnimationsModule,
HttpClientModule,
MDBBootstrapModulesPro.forRoot(),
],
providers: [
MDBSpinningPreloader,
{
provide:HAMMER_GESTURE_CONFIG,
useClass:MyHammerConfig
}
],
bootstrap: [AppComponent],
schemas: [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }
4. Add import 'hammerjs'; to your main.ts file
Regards,
Arek
                    
                      FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
              Resolved
Specification of the issue
              - ForumUser: Free
 - Premium support: No
 - Technology: MDB Angular
 - MDB Version: 6.2.2
 - Device: desktop
 - Browser: Chrome
 - OS: Windows 7 64 bit
 - Provided sample code: No
 - Provided link: No