Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Nick Cook
45
Uncaught (in promise): ReferenceError: Hammer is not defined when upgrading from Angular 10 to 11
posted

Hi, 

I have just upgraded our Angular Igniteui project from Angular v10.0.14 to v11.2.1 and igniteui from v10.0.6 to v11.0.14

Everything works as expected apart from the Hammer error we are now getting. 

The error is raised in every component that has an IgxNavigationDrawerComponent and fails to load the component see attached screen shot.

Thanks.

  • 1080
    Offline posted

    Hi Nick,

    Thank you for posting in our community.

    I have created and attached a sample project based on the provided information trying to reproduce your issue. On my side, everything works as excepted. The migration process runs without any errors when IgxNavigationDrawerComponent is used in the project. Here are the steps I have made:

    1. Install the specified version of Angular's CLI: npm i @angular/cli@10.0.4
    2. Create new angular project: ng new hammer-library-issue --style=scss --skip-tests
    3. Add igniteui-angular package: ng add igniteui-angular@10.0.6
    4. Add HammerModule in app.module.ts
    5. Create a component that uses the IgxNavigationDrawerComponent
    6. Update igniteui-angular to the licensed version by replacing igniteui-angular with @infragistics/igniteui-angular in the package package.json file
    7. Make additional changes in the project source specified in this help topic
    8. Run npm i
    9. Run ng server to confirm everything is working as expected
    10. Stop the dev server
    11. Run ng update @angular/cli@11.2.1
    12. Run ng update @infragistics/igniteui-angular@11.0.14
    13. Run ng serve

    Please compare the project structure with yours and try to replicate your issue. Additionally, it would be helpful If you could share the contents of the following files:

    • main.ts
    • test.ts
    • index.html
    • angular.json
    • package.json
    • app.module.ts
    • tsconfig.app.json

    What I can suggest as well is to take a look at this forum post where a similar query has been asked.

    Looking forward to hearing from you.

    7711.Sample.zip