Topic: ERROR ReferenceError: Hammer is not defined (Help me)
Hector Alejandro Rodriguez free asked 6 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 6 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