Leveraging an AngularJS service within Angular framework

I am trying to incorporate an AngularJS service into my Angular project.

Below is my main.ts file:

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app/app.module';
import {UpgradeModule} from "@angular/upgrade/static";
import {environment} from './environments/environment';

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(ref => {
    const upgrade = ref.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['dmdWorkplace', 'dmdLogin'], {strictDi: true});
  })
  .catch(err => console.log(err));

And here is my app.module.ts file:

//@angular
import {BrowserModule} from '@angular/platform-browser';
import {CUSTOM_ELEMENTS_SCHEMA, Inject, NgModule} from '@angular/core';
import {UpgradeModule} from '@angular/upgrade/static';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {HttpClientModule} from '@angular/common/http';

//Modules
import {AppRoutingModule} from './app-routing.module';
import {MaterialModule} from './material.module';

//Components
import {DmdWhlComponentMain} from './main/dmd-whl.component.main';
import {DmdWhlComponentRegistries} from './registries/dmd-whl.component.registries';

//Services
import {DmdWhlGlobalService} from './services/dmd-whl.global.service';
import {DmdWhlLabelService} from './services/dmd-whl.label.service';

import {TranslateModule, TranslateService} from '@ngx-translate/core';
import {DOCUMENT} from "@angular/common";

@NgModule({
  // content goes here (unchanged)
})

export class AppModule {
  // content goes here (unchanged)
}

The error message received is:

Error: Trying to get the AngularJS injector before it has been set.
    at injectorFactory (static.js:678)
    at _callFactory (core.js:10645)
    at _createProviderInstance$1 (core.js:10599)
    at initNgModule (core.js:10549)
    at new NgModuleRef_ (core.js:11792)
    at createNgModuleRef (core.js:11782)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:14092)
    at NgModuleFactory_.create (core.js:15216)
    at eval (core.js:5370)
    at ZoneDelegate.invoke (zone.js:392)

Answer №1

Encountered the same error message today but managed to find a solution. It appears that your code is facing a similar issue.

In hybrid apps, it is crucial to bootstrap AngularJS first. To achieve this, you should remove the upgrade section (including the entire call to then(...)) in main.ts, and modify

  bootstrap: [DmdWhlComponentMain]

to

  entryComponents: [DmdWhlComponentMain]

within your AppModule. Additionally, implement ngDoBootstrap() in the following manner:

  ngDoBootstrap(app) {
    this.upgrade.bootstrap(document.body, ['dmdWorkplace', 'dmdLogin'], {strictDi: true});
    app.bootstrap(DmdWhlComponentMain);
  }

I give credit to for assisting me in resolving this issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for assigning a custom React component as the Type for a prop in another component?

Currently, I am working on a customized GenericModal component and would like to include an array of my ModalText components as props in the GenericModal for display purposes. I want to specifically define the type of prop being passed, rather than using s ...

Create a new ASP.NET MVC project and integrate Angular 2 for a dynamic web application

I'm currently delving into the world of Angular 2 with Typescript. The primary resource I am using is QuickStart with Angular 2. From this and other examples, it has been emphasized to create a package.json file that outlines all dependencies for th ...

Having difficulty generating dynamic rows and tree dropdowns in AngularJS

Struggling to implement dynamic row functionality with Angular JS. The rows are working well, but I also need to incorporate a tree dropdown within each row. Unfortunately, clicking the "add row" button populates the same data in all rows. I have shared m ...

Creating beautifully formatted PDFs using pdfmake in AngularJS

I have a HTML popup displaying data retrieved from the server, and I am attempting to download this data as a PDF using the pdfmake plugin. While I am able to generate the PDF file, the challenge lies in replicating the HTML page layout in the PDF. Here is ...

Using Angular and Spring Boot to Set Request Headers

Currently facing an unusual problem where I need to include an additional parameter, Authorization, in my Angular request to a Spring Boot service. Here is an example: Request headers Authorization: bearer t-3e57cc74-3e7a-4fc7-9bbb-f6c83252db01 User-Agent ...

The Karma Node Package is failing to run and providing no information

I've been troubleshooting an issue with my karma.conf.js file for the past two days. Despite my efforts, the terminal output provides no helpful information to identify the source of the problem. There are no hints within the document itself indicatin ...

Watching for changes in AngularJS is causing errors on my page

Just starting out with Angular and trying to run examples from a book. I've been working on an example involving the $watch method, and everything was running smoothly with the initial code: <html ng-app> <head> <title>StartUp C ...

Leveraging the Map function with Arrays in TypeScript

Is there a way to dynamically render JSON data into a component using array.map in Typescript? I am running into an error with the code snippet below. const PricingSection: FC<IProps> = ({ icon, title, price, user, observations, projects, intervie ...

When utilizing dynamic binding within *ngfor in Angular 4, the image fails to display properly

I'm encountering an issue with an <img> tag that isn't behaving as expected in my code snippet: <div *ngFor="let familyPerson of userDataModel.family" class="col-md-6 col-lg-4 family-member"> <div class="fm-wrapper"> ...

The error message indicates that the property 'current' is not found in the type '[boolean, Dispatch<SetStateAction<boolean>>]'

During my React/Typescript project, I encountered an issue involving cursor animations. While researching the topic, I stumbled upon a CodePen (Animated Cursor React Component) that functioned perfectly. However, when attempting to convert it into a Types ...

Combining Vue with Typescript and rollup for a powerful development stack

Currently, I am in the process of bundling a Vue component library using TypeScript and vue-property-decorator. The library consists of multiple Vue components and a plugin class imported from a separate file: import FormularioForm from '@/FormularioF ...

Utilizing TypeScript to invoke a method via an index signature

Here is a snippet of my code, where I am attempting to call a method using an indexed signature. It functions properly when the function name is manually added, but how can I call it using object notation for dynamic calls? createFormControl(formControls: ...

The ng2-material library encountered an error: TypeError - the function all_2.Media.hasMedia is not defined

I am encountering issues while trying to integrate ng2-material with Angular 2. Specifically, when utilizing the Sidenav component, I am faced with the following errors: An exception occurred: TypeError: all_2.Media.hasMedia is not a function in [hasMedi ...

Using a specific type of keys, attempting to set two instances of those keys simultaneously will result in an error of that type

Consider this scenario: type Example = { x: string, y: number } const a: Example = { x: "x", y: 1 } const b: Example = { x: "y", y: 2 } const issue = (keys: (keyof Example)[]) => { keys.forEach(key => { a[key] ...

Combining two objects in AngularJS to create a new merged object

Is there a way to merge object1 and object2 into object3, updating values corresponding to matching keys while ignoring unmatching keys? var object1 = { "pii" : "val1", "loc" : "val2" } var object2 = { "rrb" : "val3", "voc" : "val4" } var obje ...

Is there a way to access all routes within Nestjs, including those from all modules and controllers?

Is there a way to retrieve a list of all available routes (controller methods) with their respective HTTP verbs using Nestjs? I would like it to be displayed in a similar format: API: POST /api/v1/user GET /api/v1/user PUT /api/v ...

initiating an event within a modal controller

I have a $scope.$on callback function in my mainController. It works perfectly whenever I call it from each controller, but when I call it from a modalController after opening the modal, it doesn't work: define(['app', 'jquery'], ...

Execute the unknown function parameter

Trying to figure out how to convert an argument into an anonymous function, but struggling to find clear instructions. I know how to cast on variable assignment, but unsure if it's possible and how. Working with lodash where the typings specify the a ...

API endpoint generating a Vue component as a rendered output

In the process of developing a document templater service, I am faced with the challenge of handling numerous document templates (contracts, protocols, etc.) written in Vue. The concept revolves around clients sending props in the body, which are then pass ...

Exploring Transformation in Angular

I am looking to enhance my understanding of how ChangeDetection works, and I have a query in this regard. When using changeDetection: ChangeDetectionStrategy.OnPush, do I also need to check if currentValue exists in the ngOnChanges lifecycle hook, or is i ...