Encountering a NullInjectorError in Angular while utilizing dynamic module federation when importing a standalone component along with

My main goal is to develop a shell application acting as a dashboard without routing, featuring multiple cards with remote content (microfrontend standalone component).

I have been following a tutorial that aligns closely with my requirements: .

The reason I chose this tutorial is because other guides focused on routing, which involved specifying paths for each standalone component and loading only one module defining the routes.

My objective is to have a shell application capable of loading components from different remotes at runtime (based on a JSON file downloaded via HTTP).

I am utilizing the latest @angular-architects/module-federation(16.0.4) package with Angular v16. I have forked Manfred Steyer’s work to illustrate my issue: https://github.com/zkristof97/module-federation-with-angular-dynamic-workflow-designer

If a component does not require any dependencies, the exposed standalone component can be used in the shell easily, such as the EnrichComponent.

However, when I introduce an injectionToken in bootstrap.ts (e.g. MY_TEST_INJECTION_TOKEN) and attempt to utilize the EnrichComponent in the shell with the injected token, I encounter a NullInjectorError. https://i.sstatic.net/PMmRQ.png

angulartypescriptwebpack-module-federationangular-module-federationangular-standalone-components

Answer №1

When it comes to bootstrapping applications, it's actually the standalone apps that handle this task by accessing their respective index.html files.

Simply put, the shell is responsible for loading components from a remote entry file.

Make sure that your shell is equipped with the necessary token for the EnrichComponent to function properly.

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

Error message: In the combination of NextJs and Redux, an issue has occurred where the program is unable to access properties of null, specifically in

I am just getting started with Next and redux, but I am facing an issue. https://i.sstatic.net/CZTO2.png The error shown above occurs when trying to select a redux value from the store. I have attempted using raw useSelector from redux toolkit, but it s ...

reactjstypescriptnext.jsredux

Display a fixed three levels of highchart Sunburst upon each click in Angular8

Looking to create a dynamic sunburst highchart that displays three levels at a time while allowing interactive drilling. For instance, if there are 5 levels, the chart should initially show the first three levels. When clicking on level 3, levels 2, 3, and ...

javascriptangulartypescripthighchartssunburst-diagram

What is the best method for connecting an Angular 2 application with an existing Angular JS app?

I recently created an application using Angular 2 and now I am looking to combine it with an Angular JS app. ...

angularjsangular

How to make a routerLink clickable within an anchor tag in Angular 6

I am facing a peculiar issue with a group of hyperlinks. html <div class="col-12 navlinks"> <div class="text-center"> <div class="justify-content-center"> <a class="col-auto d-inline-block whitelink" rou ...

htmlangularanchor

Unable to automatically redirect to portal upon submission of form

After successfully logging the user into my app, I want to redirect them imperatively to the portal page. However, when I use the router.navigate() function, a few things happen that are causing issues. First, the app redirects to /portal. Then, it immedia ...

angulartypescriptangular2-routing

Having difficulty leveraging npm modules in TypeScript

I recently switched from Babel to Typescript and am facing difficulties with importing a module from node_modules. The generated .js build does not include the code from the module I'm trying to import, specifically browser-cookies. I used yarn to in ...

typescript

Guide on verifying if a variable is a tuple in TypeScript

I am attempting to determine if a variable passed to a function, which can either be an array of numbers or an array of tuples, is the array of tuples. function (times: Array<number> | Array<[number, number]>) { if (Array.isArray(times[0]) ...

typescript

What could be the reason for the Angular2 Component property not appearing on my webpage?

Here is the code snippet I am working with: import {Component} from "@angular/core"; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{secondTitle}}</h2> <main-page></ma ...

angulartypescript

Creating unique components with Angular2 and Ionic

Here is the HTML code for my custom component: <div> {{text}} {{percentLeft}} {{innerColor}} </div> And here is the TypeScript file for my component: import { Component, Input } from '@angular/core'; @Component({ selector: ...

angulartypescriptionic2ionic3

React-leaflet with TypeScript is failing to display GeoJSON Points on the map

I am attempting to display points on a map using geojson points in my react application with react-leaflet. However, for some unknown reason, the points are not rendering on the map. When I try importing a JSON file, I encounter an error: TS2322: Ty ...

reactjstypescriptwebpackwebpack-dev-serverreact-leaflet

Encountering the error message `TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"` with `ts-node` when the type is specified as module

After configuring absolute paths in my Express project and changing the type to module for using import, I encountered an error: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" Below is the content of my tsconfig.json { &q ...

node.jstypescriptexpresspackage.jsonts-node

What is the best way to showcase the outcome of a function on the user interface in Angular 2?

The code snippet below was originally in my .component.html file: <div class="someContainer"> <div class="text--bold">Display this please:</div> <div>{{ myObject.date ? '2 Jun' : 'Now' }}</div&g ...

angulartypescriptangular2-forms

What advantages can be gained by opting for more precise module imports?

As an illustration, consider a scenario where I have an Angular 6 application and need to bring in MatIconModule from the @angular/material library. Two options could be: import { MatIconModule } from '@angular/material/icon'; Or import { Mat ...

javascriptangularwebpackangular-cliangular-cli-v6

What is the best way to switch the direction of the arrows based on the sorting order?

Is there a way to dynamically change the direction of arrows based on sorting, similar to the example shown here? sortingPipe.ts: import { SprBitType } from '../spr-bit-type/sprBitType'; import { Pipe, PipeTransform } from '@angular/core& ...

htmlcssangulartypescript

Tips on resolving the 404 path error in Angular2/TypeScript ASP.NET 4.6.1 on Visual Studio 2015

I'm facing a challenge while developing a new application using TypeScript, Angular2, and ASP.NET 4.6.1 on VS2015. Two issues have come up in the process. First problem: I keep encountering 404 errors with the include files in my index.html file. Upo ...

typescriptgulpangular.net-4.6.1

401 error code for all CRUD operations in the .NET Framework API

So, I've been working on a project that consists of a .Net framework API and an Angular frontend. I recently implemented OWIN JWT authentication, but now I'm encountering a persistent 401 error no matter what I try. I've attempted numerous ...

c#.netangularjwt

Issues arise with Typescript compiler on Windows systems due to soft symlinks causing compilation failures

In my TypeScript project, symlinks function properly on both macOS and Linux. However, when executing tsc in git-bash on Windows (not within WSL), the files cannot be resolved by tsc. ...

typescriptwindows

Categorize items based on their defined attributes using Typescript

[origin object array and expect object array ][1] origin object array: 0: amount: 100000000000000000000 feeTier: 0.3 price: 00000 priceDecimal: 0000 status: "unknown" tokenXAddr: "0x*********" tokenXSymbol: "USDC" tokenYAddr: ...

arraystypescript

What is the best way to customize the appearance of chosen selections in the MUI Autocomplete component?

I'm currently facing an issue with changing the style of selected options in MUI when the multi option is enabled. My goal is to alter the appearance of all highlighted options. Any assistance on this matter would be greatly appreciated, thank you! ...

javascriptreactjstypescriptmaterial-ui

Avoiding the use of reserved keywords as variable names in a model

I have been searching everywhere and can't find a solution to my unique issue. I am hoping someone can help me out as it would save me a lot of time and effort. The problem is that I need to use the variable name "new" in my Typescript class construct ...

typescript