478 questions
2
votes
1
answer
190
views
How to use inject() in a child class that calls super()?
I'm trying to migrate an Angular component to use the new inject() function instead of constructor injection. However, my component extends a base class that requires constructor parameters.
import { ...
0
votes
0
answers
30
views
Accessibility Issues Loading mfe-base Page in Shell Application
I'm experiencing accessibility issues when loading a page from my mfe-base. When loading my shell application, the displayed page is from mfe-base. The focus is being assigned to an image, which ...
1
vote
1
answer
160
views
How to properly set up basehref when working with Angular Native Federation?
We are migrating a couple of Angular 17 applications to a Micro-Frontend architecture by using Native Federation, but there is still one issue I still couldn't solve, which is the app context for some ...
3
votes
1
answer
268
views
Angular 17 Module to Standalone Conversion. How should I setup main.ts or app.config.ts?
I'm trying to change my Angular 17 project to be a standalone project. But some of the fundamental files are different than how they are defined in tutorials and other people's projects. I didn't have ...
1
vote
1
answer
57
views
Angular 17 shows Object is possibly 'null'
I am very new to Angular. I am trying to call a GET web API method upon a button click. Now I want to display the response in HTML. When I try to access the model object, it says:
Object is possibly '...
1
vote
0
answers
50
views
Need to update the mock data in angular test
dataTeamService = jasmine.createSpyObj('DataTeamService',['setDataGroup'],{
selectValGroup: of({
id : 1,
accessData : false
})
});
it('shoud remove valData when accessData is false',()=>{
fixture....
1
vote
1
answer
106
views
In Angular .css files url(/assets/mypic.png) files no longer working in build after v17=>v19
I updated Angular v17=>v18=>v19 recently. File references in my.component.css à la background-image:url(/assets/mypic.png) are no longer working.
component.html
<img src="assets/picture....
1
vote
2
answers
78
views
Angular 17 Array push Inserting null object to Array List
I am having a service that insert data in an array ( list ). service.ts code is below.
Problem: Data gets passed to service from component but after push to array it becomes null
import { Injectable } ...
0
votes
1
answer
197
views
How to prevent style leakage between Microfrontend apps when using ViewEncapsulation.None in Angular with Module Federation?
We have migrated our Angular applications into Microfrontends using Dynamic Module Federation (with @angular-architects/module-federation).
In each remote application, I imported a styles.css into app....
0
votes
1
answer
84
views
NG Bootstrap modal disable a button in the modal's template
I'm using Angular 17 and ng-bootstrap 16 and I'm creating an ng-bootstrap modal. I have a Template in my component used as the content for the modal. What I want is to enable or disable the Save ...
1
vote
1
answer
76
views
How to add item below the current item through button click of Angular Formarray
Like it says, I want to add an item to the middle of a FormArray. So, I have a FormArray and every FormArray item has a button to add a new FormArray item. However, it currently always adds it to ...
0
votes
3
answers
83
views
New @for Directive in Angular – Dynamic Array Issue
I'm creating a dynamic FormArray within a FormGroup. The only change I've made is switching from *ngFor to the new @for. The issue occurs when I try to remove an element from the FormArray.
Previously,...
0
votes
0
answers
30
views
Angular 17 upgrade - handle ngclass.*breakpoint changes
I am upgrading my medium-sized application from Angular 16 to Angular 17. However, [ngClass.*] breakpoints are no longer supported in ngx-layout for Angular 17. Since my styles are SCSS-based, I need ...
0
votes
3
answers
115
views
Not able to do component inheritance
I am trying to do component inheritance in Angular 17 and cannot figure why its giving me an error. Here is my code structure:
export class ParentComponent {
constructor(public httpService: ...
0
votes
0
answers
33
views
Syncing the width of mat-header-cell and mat-cell
I am having a mat-table with many columns and the data in some of the mat-cells is empty I want my mat-cell to inherit the width of my mat-header-cell.
Note: width of my mat-header-cell is based on ...
0
votes
1
answer
340
views
Angular 17, ng serve does not run in development mode, no source map
I upgraded to Angular 17 and now ng serve does not run in dev mode, no source map is available.
I tried every possible solution I found online related to proxy config, package.json, angular.json. I ...
0
votes
1
answer
130
views
Some Material components stopped working when I updated to v17
I updated my Angular application to version 17. I am also using Angular Material, so before updating, I got rid of legacy components. But after updating Angular Material to v17, I noticed that ...
0
votes
0
answers
170
views
Migration to Angular v17 with ng2 charts v2
I'm working on migration of Angular 14 project to Angular 17. One of the main obstacles is that the app has some ng2 charts that are version 2 which is not compatible with newer versions of Angular. ...
1
vote
0
answers
86
views
Scroll Sync between 2 Cdk virtual viewports header and row
I'm using a separate CDK virtual scroll viewport for the header and need to keep it synchronized with the main row viewport. Currently, I'm using the elementScrolled event of the row viewport to track ...
1
vote
2
answers
1k
views
How to Upgrade Angular from v16 to v17 with TypeScript 5.2 and Zone.js 0.14.x Dependencies?
I am trying to upgrade my Angular application from version 16 to version 17, but I’m encountering several dependency conflicts that are blocking the process, and I am facing errors during the update.
...
1
vote
0
answers
59
views
Angular Micro Front End - Main App - Angular 19 and MFE App Agular 17 with Web component technique
I'm trying to run Angular MFE application with Angular different versions using Web component technique. But I'm getting below error.
ERROR RuntimeError: NG0203: inject() must be called from an ...
0
votes
0
answers
23
views
Angular UI not updating after SockJS connect
I try to setup websocket connection in Angular.
When adding the SockJs socket, the buttons are no longer working.
Please help me why is the button no longer responding.
Not working code(Button not ...
0
votes
0
answers
29
views
import { map} from "rxjs/operators". Error: Tuple type '[any]' of length '1' has no element
while importing {map} in file templates.component.ts file
import { map } from "rxjs/operators";
Code snipppet:
this.changeMessage = combineLatest([
this....
1
vote
0
answers
55
views
Why is my Swiper component not working in Angular17? The images won't load, just the first, the index changes, but the images don't, and bugs
product.carousel.component.html
<swiper-container loop="true" navigation="true">
@for (image of images; track $index) {
<swiper-slide>
<img ...
1
vote
0
answers
84
views
Error: Debug Failure after updating Angular from 16 to 17 during build or serve
I recently updated my Angular project from version 16 to 17. The update went smoothly, including the installation of node_modules. However, when I attempt to build or serve the project, I get the ...
1
vote
0
answers
41
views
Polyfills Not Loading on Android for Angular 17 App, Causing Null Error
So, I have an angular project. The web works perfectly fine on a computer, but not on my phone.
I have an androin 13 phone.
I tried multiple browsers.
When I tried debbuging it, I got this error after ...
0
votes
1
answer
139
views
How to fix Window is not defined in Angular 17?
I recently upgraded to Angular 17 and the new Verse builder. After running ng build I get:
An unhandled exception occurred: window is not defined
See "/private/var/folders/gv/...
1
vote
1
answer
403
views
Angular 18 input signal instead of @Input
Hi I'm having doubt I'm using input signal instead of @Input I'm sending data from parent component one as simple variable like and another as signal
name = "ajai" name=signal("ajai&...
1
vote
2
answers
10k
views
Upgrading Angular-CLI from Angular 17 to Angular 19 causing major errors on my system -
I was running nG version 17.3 on my Win10 system. I wanted to upgrade my Angular CLI to latest version 19.
So I did the following steps-
npm uninstall -g @angular/cli
npm install -g @angular/cli@...
0
votes
0
answers
68
views
Dompurify Error: src/app/common/util.ts:3:8 - error TS1259: Module can only be default-imported using the 'allowSyntheticDefaultImports' flag
I am using Angular 17 and while running the build I am getting an error stating
Error: src/app/common/util.ts:3:8 - error TS1259: Module '"/usr/src/app/node_modules/dompurify/dist/purify.cjs"...
1
vote
1
answer
404
views
multiselect chips with custom label chips
<p-multiSelect
[options]="employees"
[(ngModel)]="selectedEmployees[question.id]"
[optionValue]="'nip'"
[optionLabel]="'label'"
...
1
vote
0
answers
58
views
Disable Angular Animations as a User
We are automating a third party application using RPA. The application is written in Angular 17 and has many default animations enabled (like expanding a collapsed panel) - which lead to delays and ...
1
vote
1
answer
60
views
How to show different text content for dynamic ngClass in Angular17 --
I am posting my question here although I have doubt in my mind if this is at all achievable. My case scenario is a bit typical. So please bear with me if some of it appears verbose/weird.
I am saving ...
0
votes
1
answer
119
views
Binding data from database to a dropdownlist in Angular 17 and .NetCore 8 not working
I am trying to bind data fetched from database to a dropdownlist upon loading a certain component/page in a nG17 app. The backend API is written in .NetCore 8. I have done the relevant pieces of code ...
1
vote
1
answer
91
views
Input Subject is empty in child component Angular 17
I am trying to pass data from a parent to its child component in Angular 17.
The data is retrieved from the back-end through an API that gets an array of items.
In my parent component, items$ is a ...
1
vote
0
answers
35
views
dynamically bind and call parent component method from child component in angular
I am getting error on tabMethod is not function child component
In the Parent component:
In the .ts file:
this.pillTabs = [
{ tabName: 'Subscribers', tabMethod: this.showSubscribers.bind(this) },
...
2
votes
1
answer
235
views
Override Subresource Integrity algorithm for Angular builds
I am using Angular v17 and configuration allows for setting subresourceIntegrity to true which will add the integrity hash to the <script> tags that import the compiled Angular project.
This is ...
1
vote
0
answers
92
views
Angular 17 swiper element zoom
How can I implement zoom functionality for a swiper element in Angular 17? I followed this approach to use swiper elements in my Angular project. I tried adding the zoom property in the same way as ...
1
vote
0
answers
103
views
Angular ShadowDom pull in style tags from other mixed encapsulation modes
I have a specific component I want to use Shadow Dom with to completely isolate it from external styles (most of the other components use the default emulated view encapsulation).
However, I noticed ...
3
votes
0
answers
35
views
Failed to load javascript module. Server responded with MIME of text/html
I tried deploying my angular 17 project from my local machine to azure. For creating a dist folder I have created a web config and referenced it by adding it in angular json file under "build&...
1
vote
3
answers
180
views
How can I dynamically add wrapper to an Angular component?
In my project I have wrapper classes that are reused often and some contain the 'gap' css property. Now I have a component that loads data asynchronously and that component is hidden if the returned ...
1
vote
1
answer
110
views
Swiper and Material Grid List in Angular 17
I followed this approach to use swiper elements in my angular 17 ssr project. If I use swiper inside material GridList then the view is not rendered properly. Are there any rendering timing issues? ...
0
votes
0
answers
137
views
Getting "invalid-input-response" from Google reCAPTCHA v3 in .NET Web API with Angular frontend
I'm working on integrating Google reCAPTCHA v3 in my .NET backend and Angular frontend. I’ve set up the backend to verify the reCAPTCHA token with Google’s reCAPTCHA API, but I'm getting a response ...
1
vote
0
answers
200
views
Angular 17 Interceptor Not Adding Bearer Token on Initial Login Request
I'm working on an Angular 17 application where I'm trying to add an Authorization Bearer token to the request headers upon login. However, I'm facing an issue where the HttpInterceptor retrieves null ...
0
votes
2
answers
150
views
Angular how to add Enum to a FormGroup as FormControl?
help is appreciated and thanks in advance for all solutions. I created a FormGroup and want via loop adding FormControls to a FormGroup. This tutorial is from Matt Thornton building a real site with ...
1
vote
2
answers
1k
views
"Can't find stylesheet to import" error after upgrading to Angular 17.3.10
I have found everything related to angular material theming, however, it's not the case.
After upgrading Angular 16 to Angular 17 (17.3.10) I cannot import some styles from a specific node_module.
...
-1
votes
1
answer
38
views
ControlValueAccessor using implemented formatand parser in form fieldcheckbox but Input data is changing ,it is not reflecting checkbox
one TrueFalseValueComponent used for if checkbox is checked , I will get 1, if checked is false i will get 0.
For example I am selected first record selection value 0. Now checkbox is not checked. I ...
1
vote
1
answer
377
views
Angular 14 to Angular 17 Migration
Recently, I upgraded my Angular version 14 to 17. After upgrading to 17, I am getting some problems like after installing the npm module getting the error with node_modules which is not expected. ...
0
votes
2
answers
72
views
Common directive to detect for form value before any routing
I need to team suggestion , I have more than 10 form. I want create common directives or any other option form value change before routing. If form changed we need to get confirmation from ...
1
vote
1
answer
259
views
More than one custom value accessor matches form control unspecified name attributes NG_VALUE_ACCESSOR
More than one custom value accessor matches form control unspecified name attributes NG_VALUE_ACCESSOR
I am created two directives for input fields one checkbox true or false instead of 0 or 1 . ...