Not able to resolve the service - @tawk.to/tawk-messenger-angular - TawkMessengerAngular

[rahulphoke]

simple code just like below throws error
import { Component } from '@angular/core';
import { TawkMessengerAngular } from '@tawk.to/tawk-messenger-angular/dist/tawk-messenger-angular';
@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'test-tawk';
constructor(public TawkMessengerAngular: TawkMessengerAngular) {}
ngOnInit(): void {
this.TawkMessengerAngular.init({
propertyId: "[propertyId]",
widgetId: "[widgetId]",
});
}
}

main.ts:6 ERROR Error: inject() must be called from an injection context
at injectInjectorOnly (core.mjs:4761:15)
at Module.ɵɵinject (core.mjs:4771:60)
at Object.TawkMessengerAngular_Factory [as factory] (tawk.to-tawk-messenger-angular.mjs:220:106)
at R3Injector.hydrate (core.mjs:9301:35)
at R3Injector.get (core.mjs:9189:33)
at ChainedInjector.get (core.mjs:13009:36)
at lookupTokenUsingModuleInjector (core.mjs:4436:39)
at getOrCreateInjectable (core.mjs:4484:12)
at Module.ɵɵdirectiveInject (core.mjs:10780:12)
at NodeInjectorFactory.AppComponent_Factory [as factory] (app.component.ts:8:26)

[Hasan-git]

Module not found: Error: Can't resolve '@tawk/tawk-messenger-angular'
same here

[Ephron-WL]

Same here. The package construction is poor. If ttawk.to decided to fix their package structure then we wouldn't have this issue.

See this issue for a solution: #13

[muratcorlu]

Is this the only problem in this project? I couldn't figure out how to run this. I thought we need also to import a module, and tried to add it to imports

import { TawkMessengerAngularModule } from '@tawk.to/tawk-messenger-angular/dist/tawk-messenger-angular';

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    TawkMessengerAngularModule,
  ],
  exports: [RouterModule],
})
export class LayoutPageRoutingModule {}

But I'm still getting dependency injection errors.

Should we consider this project (I mean Angular plugin) already died?

[Ephron-WL]

Is this the only problem in this project? I couldn't figure out how to run this. I thought we need also to import a module, and tried to add it to imports

import { TawkMessengerAngularModule } from '@tawk.to/tawk-messenger-angular/dist/tawk-messenger-angular';

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    TawkMessengerAngularModule,
  ],
  exports: [RouterModule],
})
export class LayoutPageRoutingModule {}

But I'm still getting dependency injection errors.

Should we consider this project (I mean Angular plugin) already died?

One gets the sense that tawk.to has abandoned this project. They don't even respond to issue posts.

Refer to the first block of code here: https://github.com/tawk/tawk-messenger-angular/blob/main/docs/directives.md

You are missing an import and a provider

One other problem I had was their inclusion of node_modules within their package. When I deleted this folder it compiled. By deleting it, NPM will resolve dependencies using the libraries that are already included in your project.

Their "how to use" section is incomplete and disappointing. I personally do not use this product since I have other issues with their offering, but I did successfully implement it using this package prior to making that decision.

[muratcorlu]

@Ephron-WL thanks for the detailed explanation. I get the message to avoid this trouble 😊

[doteq]

So I think the problem is that they published the package incorrectly - they should've done it from /dist/tawk-messenger-angular directory, not from root. Because of that import { TawkMessengerAngular } from '@tawk.to/tawk-messenger-angular; fails - the actual package is in dist directory.

To fix that you can use gitpkg to install package from /dist/tawk-messenger-angular directory:

yarn add 'https://gitpkg.now.sh/tawk/tawk-messenger-angular/dist/tawk-messenger-angular?main'

and then it should work correctly.

[pavan-singh-iphtech]

Module not found: Error: Can't resolve '@tawk/tawk-messenger-angular' same here

I am also facing same issue

[pavan-singh-iphtech]

Is this the only problem in this project? I couldn't figure out how to run this. I thought we need also to import a module, and tried to add it to imports

import { TawkMessengerAngularModule } from '@tawk.to/tawk-messenger-angular/dist/tawk-messenger-angular';

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    TawkMessengerAngularModule,
  ],
  exports: [RouterModule],
})
export class LayoutPageRoutingModule {}

But I'm still getting dependency injection errors.
Should we consider this project (I mean Angular plugin) already died?

One gets the sense that tawk.to has abandoned this project. They don't even respond to issue posts.

Refer to the first block of code here: https://github.com/tawk/tawk-messenger-angular/blob/main/docs/directives.md

You are missing an import and a provider

One other problem I had was their inclusion of node_modules within their package. When I deleted this folder it compiled. By deleting it, NPM will resolve dependencies using the libraries that are already included in your project.

Their "how to use" section is incomplete and disappointing. I personally do not use this product since I have other issues with their offering, but I did successfully implement it using this package prior to making that decision.

I have read all but still throw error

[shmox75]

Hey, my app component is standalone and I have the same error even without module