I am getting an error as soon as I declare ngx-toastr in my Hybrid AngularJS-Angular12 app:
angular.js:15697 Error: inject() must be called from an injection context
at injectInjectorOnly (core.umd.js:5072:1)
at ɵɵinject (core.umd.js:5083:1)
at ToastrService_Factory (ɵfac.js? [sm]:1:1)
at _callFactory (core.js:24021:1)
at _createProviderInstance (core.js:23979:1)
at resolveNgModuleDep (core.js:23952:1)
at _createClass (core.js:24004:1)
at _createProviderInstance (core.js:23976:1)
at resolveNgModuleDep (core.js:23937:1)
at NgModuleRef_.get (core.js:24493:1) `<app-faq-panel ng-if="$ctrl.productBundle.attributes.faqs" [text-source-path]="'SHOP.FAQS.'" [faq-ids]="$ctrl.productBundle.attributes.faqs" [default-to-collapsed]="true" [group-title]="'COMMON.FAQS'" class="ng-scope" data-ng-animate="1">`
I get the same error if I use the inject(ToastrService) function in a service, component or just in the normal constructor function of a component. The error happens before the component even renders.
The problem also happens if I call the ToastrService directly from the component without my service in between.
Maybe the problem comes from this being a hybrid application, running AngularJS and Angular12 at the same time. We are gradually migrating off AngularJS.
toaster.service.ts
import { downgradeInjectable } from "@angular/upgrade/static";
import { ToastrService } from 'ngx-toastr';
declare var angular : angular.IAngularStatic;
@Injectable({
providedIn: "root"
})
export class ToasterService {
constructor (
private toastr: ToastrService
){
}
popAnAlert () {
this.toastr.success('Hello world!', 'Toastr fun!');
}
};
angular.module('app')
.factory('ToasterService', downgradeInjectable(ToasterService))
faq-panel.component.ts
import { downgradeComponent } from "@angular/upgrade/static";
import * as angular from "angular";
import { ToasterService } from "./../../../services/toaster.service";
@Component({
selector : 'app-faq-panel',
templateUrl : '/src/app/shared/components/faq-panel/faq-panel.component.html'
})
export class FaqPanelComponent {
constructor (
private toasterService : ToasterService
) {
}
popAnAlert () {
this.toasterService.popAnAlert();
}
};
angular.module('app')
.directive('appFaqPanel',
downgradeComponent({component : FaqPanelComponent}) as angular.IDirectiveFactory
);
app.module.ts
import { NgModule } from "@angular/core";
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { UpgradeModule } from "@angular/upgrade/static";
import moduleName from "./app.module.ajs";
import { TranslocoRootModule } from './transloco-root.module';
import { SharedModule } from "./shared/shared.module";
import { ToastrModule } from "ngx-toastr";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToasterService } from './services/toaster.service'
@NgModule({
imports: [
BrowserModule,
CommonModule,
UpgradeModule,
TranslocoRootModule,
HttpClientModule,
SharedModule,
BrowserAnimationsModule,
ToastrModule.forRoot({
timeOut: 1000,
preventDuplicates: true,
}),
],
declarations : [],
entryComponents : [],
providers:[
ToasterService
]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) {}
ngDoBootstrap() {
this.upgrade.bootstrap(document.documentElement, [moduleName], {
strictDi: true,
});
}
}
package.json
{
"name": "edukation",
"version": "1.7.3",
"description": "An edtech application",
"main": "app.js",
"scripts": {
"build:prod": "rimraf ./dist && npm run build -- --env.env=production",
"build:staging": "rimraf ./dist && npm run build -- --env.env=staging",
"build": "webpack --bail --progress",
"bundle-report": "webpack-bundle-analyzer --port 8888 dist/stats.json",
"dev": "webpack-dev-server --env.env=dev --progress",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Edukation",
"license": "ISC",
"dependencies": {
"@angular/animations": "^12.2.16",
"@angular/common": "^12.2.15",
"@angular/compiler": "^12.2.11",
"@angular/core": "^12.2.11",
"@angular/forms": "^12.2.11",
"@angular/platform-browser": "^12.2.15",
"@angular/platform-browser-dynamic": "^12.2.11",
"@angular/router": "^12.2.11",
"@angular/upgrade": "^12.2.11",
"@ngneat/transloco": "^3.1.1",
"angular": "^1.7.9",
"angular-animate": "1.7.8",
"angular-aria": "1.7.8",
"angular-base64": "2.0.5",
"angular-chart.js": "1.1.1",
"angular-clipboard": "1.7.0",
"angular-cookies": "1.7.8",
"angular-messages": "1.7.8",
"angular-moment": "1.3.0",
"angular-password": "1.0.3",
"angular-sanitize": "1.7.8",
"angular-svg-round-progressbar": "0.3.10",
"angular-toastr": "2.1.1",
"angular-translate": "2.18.1",
"angular-translate-loader-static-files": "2.18.1",
"angular-translate-storage-cookie": "2.18.1",
"angular-translate-storage-local": "2.18.1",
"angular-ui-bootstrap": "2.5.6",
"angular-ui-router": "1.0.18",
"angulartics": "1.6.0",
"angulartics-google-analytics": "0.5.0",
"chart.js": "^2.8.0",
"css-loader": "^3.3.2",
"moment": "^2.24.0",
"ng-text-truncate-2": "^1.0.1",
"ng-ui-router-state-events": "1.0.1",
"ngx-bootstrap": "^7.1.0",
"ngx-toastr": "^14.3.0",
"reflect-metadata": "^0.1.13",
"rxjs": "^7.0.0",
"satellizer": "0.15.5",
"style-loader": "^1.0.1",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@types/angular": "^1.6.56",
"@types/node": "^12.7.5",
"copy-webpack-plugin": "^5.1.1",
"file-loader": "^4.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"raw-loader": "^3.1.0",
"rimraf": "^3.0.0",
"terser-webpack-plugin": "^2.1.2",
"ts-loader": "^6.0.4",
"typescript": "^4.3.5",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.2",
"webpack-bundle-analyzer": "^3.4.1",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2"
}
}
