Questions tagged [angular7]

Questions about Angular version 7, the web framework from Google. Use this tag for Angular questions which are specific to only version 7. Use tag Angular for any Angular questions which are not specific to an individual version.

Questions about Angular version 7, the web framework from Google. Angular version 7 entered a 3 year Long Term Support period on July 1, 2018.

See the changelog for what changed in version 7.

If you need help upgrading from version 7 to version 8, please see the Official Angular upgrade guide

5213 questions
37
votes
5 answers

How to use Angular7 (angular material) drag drop between two components

As recently angular introduced drag and drop in angular material https://material.angular.io/cdk/drag-drop/overview . All examples describes with in a single component. How to use this in two different components, Drag one component item and drop…
36
votes
3 answers

Typescript 3 Angular 7 StopPropagation and PreventDefault not working

I have a text input inside a div. Clicking on the input should set it to focus and stop the bubbling of the div click event. I've tried the stopPropagation and preventDefault on the text input event but to no avail. The console logs shows that the…
user1019042
  • 2,428
  • 9
  • 43
  • 85
36
votes
5 answers

"moment" has no exported member 'default'

I'm using moment.js to change the local date format for my application but getting the following error: "moment" has no exported member 'default' when importing the library. Below is my code: import {Inject, Injectable, Optional} from…
Amit Golhar
  • 799
  • 4
  • 8
  • 21
36
votes
1 answer

No provider for InjectionToken angularfire2.app.options

Recently I started to learn to use the concept of firebase in combination with angular. As a start, I try to make the login process work. Currently, I get an ennoying error when I try to navigate to the login page and I cannot figure out what is…
Cornelis
  • 1,729
  • 5
  • 23
  • 39
36
votes
6 answers

Angular 7 Drag and Drop - Dynamically Create Drop Zones

Is there a way to dynamically create drop zones? I'm having some troubles with ngFor and cdkDropList. Here is my first list and draggable elements:
sebamed
  • 1,047
  • 1
  • 9
  • 18
34
votes
1 answer

Angular service worker is in SAFE_MODE

I have an Angular PWA. Its service worker was working flawlessly until I upgraded from Angular 5.0 to 7.2 After the upgrade, I see the following error in /ngsw/state Driver state: SAFE_MODE (Initialization failed due to error: Invariant violated…
shobhit vaish
  • 951
  • 8
  • 22
34
votes
2 answers

How to pipe / map an Observable in Angular

A nested object is showing up as [object Object] so I'm trying to cast it via pipe and map but I'm not getting any where. I've tried the models as classes and interfaces but no help. Can someone tell me what I'm doing wrong? Thanks. The function: …
Tong
  • 697
  • 1
  • 8
  • 16
34
votes
1 answer

Angular component default style css display block

I am sick of all my angular elements being 0x0 pixels, because they have names like app-card, app-accordion, which the browser does not recognise as HTML5 compliant elements and as thus, will not give any default styles to. This is means that…
Karl Johan Vallner
  • 3,980
  • 4
  • 35
  • 46
32
votes
2 answers

WARNING in ./node_modules/ng2-charts/fesm5/ng2-charts.js 230:54-72 "export 'ɵɵdefineInjectable' was not found in '@angular/core'

I am using ng2-charts in Angular 7 app and having warning WARNING in ./node_modules/ng2-charts/fesm5/ng2-charts.js 230:54-72 "export 'ɵɵdefineInjectable' was not found in '@angular/core' error in VS Code error in browser What could be the…
WasiF
  • 26,101
  • 16
  • 120
  • 128
32
votes
6 answers

cannot find name 'require' in angular 7(typescript 3.1.3)

My question is why this error shown? ERROR in src/app/p2p/p2p.component.ts(14,16): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try npm i @types/node. I have install @types/node in…
ikhwan rozali
  • 431
  • 1
  • 4
  • 8
30
votes
5 answers

how to enable gzip compression in angular cli for production build

I would want to compress the bundle files that are created when building the angular project. I use ng build --environment=${environment} to build the application currently and the version of "@angular/compiler-cli": "^4.0.0" do not generate the .gz…
Cling
  • 489
  • 1
  • 6
  • 15
29
votes
2 answers

How to use reportProgress in HttpClient in Angular?

I am downloading file using HTTP POST method. I want to call another method to show download progress to end user until file download complete. How to use reportProgress in HttpClient for this. downfile(file: any): Observable { return…
user10274935
29
votes
6 answers

Angular 7 reactive form how to reset the form and get its initial values instead of resetting them to empty values

Is there a way to reset a reactive form group into its initial values instead of get it empty using .reset() method ? I have the following stackblitz, where the default selected value is Parent, and if the user change it to sister, and wants to get…
alim1990
  • 4,656
  • 12
  • 67
  • 130
29
votes
14 answers

JavaScript heap out of memory in Angular 7 using Azure DevOps

I am getting FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory after Angular 7.1 upgrade. The previous version 6.1 was working perfectly fine. I get the error only in Azure DevOps while running ng build --prod…
Abhishek
  • 621
  • 1
  • 8
  • 19
28
votes
7 answers

Selecting options from Mat-select using cypress

I have Mat-select dropdown as follows Gender Male
PremKumar
  • 1,282
  • 4
  • 25
  • 43