Questions tagged [angular]
Questions about Angular (not to be confused with AngularJS), the web framework from Google. Use this tag for Angular questions which are not specific to an individual version. For the older AngularJS (1.x) web framework, use the AngularJS tag.
angular
117,091
questions with no upvoted or accepted answers
50
votes
6
answers
8k
views
How to debug Angular universal?
I am using Angular Universal Starter repo. In angular 4 universal for ssr we could debug browser and node part of application in dev mode(see console), but now I do not see way to debug node part. I ...
- 1,581
33
votes
5
answers
3k
views
Angular 2 Initial loading progress
I've tried my best to bring the bundle size of Angular 2 down and have been relatively successful in reducing the size to ~300kb (Angular 2 + jquery + bootstrap + some other small third party ...
- 19.5k
22
votes
0
answers
871
views
__WEBPACK_IMPORTED_MODULE_1_firebase_app__.app is not a function
Firebase provider
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
@...
- 1,971
21
votes
1
answer
3k
views
Server Side Rendering Angular 2 in ASP.NET with Edge.js
I'm exploring the possibility of rendering Angular 2 on the server side using Edge.js in an ASP.NET MVC application.
I'm aware that the Angular Universal Starter Kit has part of this equation: https:/...
- 1,208
20
votes
6
answers
7k
views
How can we preload fonts in Angular?
Should we include the fonts in index.html file with rel="preload" like the below code or can we configure this in Angular CLI to preload all the fonts required?
Please suggest me a better ...
- 2,182
18
votes
2
answers
7k
views
Add selected items to ng-select with multiple and typeahead
I'm using ng-select to select multiple values from a large list that is remotely loaded depending on what the user types in the box. Here are my requirements:
Tags added dynamically
Dropdown is not ...
- 1,847
18
votes
0
answers
7k
views
Angular5 Server side rendering, external Api data service does not work in ssr
I have set up and used successfully Angular5 + SSR. It is still pretty nice.
All components work well on SSR and Non-SSR.
And there are some services which call external HTTP get APIs to get some ...
- 755
18
votes
1
answer
1k
views
How to dynamically load external angular 2 module (like served from an external module.bundle.js)
I can dynamically load local modules as someone else did in the plunker here. But how do I load an external module, lets say from a separate bundle js served by another service. In the example plunker,...
- 686
18
votes
1
answer
684
views
Angular 2 - Is it possible to use the new router while upgrading with the "Upgrade Adapter"
I am upgrading my application progressively using the Upgrade Adapter. My app uses ui-router (+ has child routes).
I read this great article about routing in Angular 2. My question is:
Is it ...
- 6,663
17
votes
0
answers
2k
views
Angular CLI Hot Module Reload
I followed this github story: https://github.com/angular/angular-cli/wiki/stories-configure-hmr
I am able to see changes after auto-refresh when I do ng serve (environment is Dev), however with ng ...
- 2,666
17
votes
3
answers
9k
views
Angular - Template inheritance
I have the following child component and it's inheritance parent component:
@Component({
template: `<p>child</p>`
})
export class EditChildComponent extends EditViewComponent{
...
- 639
17
votes
3
answers
2k
views
Angular Multiple Entry Points with AOT
I have an angular app that is compiled with webpack and uses multiple entry points:
entry: {
'app1': helpers.root('src', 'app1', 'main.ts'),
'app2': helpers.root('src', 'app2', '...
- 2,679
16
votes
0
answers
9k
views
Unhandled Promise rejection: timeout ; Zone: <root> in angular 6
When I use ng-recaptcha component while routing to another route.
Error is :
Unhandled Promise rejection: timeout ; Zone: ; Task: Promise.then ; Value: timeout undefined
Unhandled Promise rejection:...
15
votes
1
answer
6k
views
How can I fix this warning from Google Chrome? Cookie... `SameSite=None` but without `Secure`
This piece of code
this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider())
are generating this warning on Chrome:
A cookie associated with a resource at http://google.com/ was set with ...
- 208
15
votes
1
answer
1k
views
Angular (8) Universal with firebase cloud functions - can't match any routes
UPDATE: I created a new project with every angular update there was and now on 8.2.0 it seems to be working. Just follow the instructions below, BUT there's currently a bug within webpack. So, after ...
15
votes
1
answer
15k
views
How do you destroy an Angular 2 component without a ComponentFactory?
When creating components dynamically through a ComponentFactory the ComponentRef that's returned provides a destroy method which works perfectly for what I'd like to accomplish. With that in mind, it ...
- 1,123
14
votes
1
answer
2k
views
Angular PWA in microfrontends
I have several microfrontends setup using an "app-shell" sort of app for the domain root and each microfrontend on the first path element. Each app is built like a standalone angular ...
- 4,113
14
votes
1
answer
4k
views
Migrate to Angular 9 with webpack from Angular 5
This is not a question i just want to share my experience!
You need to upgrade your dependencies in package.json
-all angular dependencies to version 9
-add this dependencies:
"@angular-devkit/...
- 178
14
votes
2
answers
12k
views
How to solve this error Module not found: Error: Can't resolve 'fs'
I have created new angular project with electron.I do need to set up the electron.
I have got below errors.
ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs' in '...
- 577
14
votes
4
answers
7k
views
Looking for an Angular 7 version of Vue.js "nextTick"
I'm developing a page in Angular 7, where i want to do something (scroll to section) after i'm sure the page has re rendered. The section i want to scroll to is initially hidden with an ngif and when ...
- 141
14
votes
1
answer
4k
views
How to fix error "Disconnectedreconnect failed before timeout of" in angular unit testing
I have around 50 test cases written in Angular. On executing those it says Disconnectedreconnect failed before timeout of 10000ms. I did some configuration settings like
captureTimeout: 60000, // it ...
- 151
14
votes
2
answers
3k
views
Wrap or extend angular-material component allowing pass-through of unknown attributes to child component
We are using Angular 5 and material design and creating our own components with helper methods for various functions (i.e. dynamic column generation for mat-table).
I'd like a way to pass unknown ...
- 2,596
14
votes
1
answer
1k
views
Angular perfect fowarding of component properties to a child component
I recently became aware of the following technique in React to foward properties to child components. This uses destructuring assignment:
const MyInputComponent = (props) => <input {...props} /&...
- 6,511
14
votes
1
answer
924
views
Angular AOT and lazy loading. TypeError: System.import is not a function
I am using Angular 4. After AOT and run rollup in lazy module appears this error:
Error: Uncaught (in promise):TypeError: System.import is not a function
My project works fine in JIT but in AOT I ...
- 195
14
votes
1
answer
2k
views
CORB blocking dynamic AdSense advertisements
I have a server-side rendered Angular application in which I'm using ng2-adsense to display AdSense ads on certain routes. I've noticed that most of the time (not all of the time), my ads don't ...
- 8,406
13
votes
1
answer
2k
views
File download progress in the browser: Angular 4
I'm creating an application that consumes a REST api for downloading a file. The api returns the file right when you hit it. So I'm using the following logic to get the file:
downloadFile(file) {
...
- 3,486
13
votes
2
answers
5k
views
Broken autoimport in Visual Studio Code
I'm using Visual Studio Code for Angular 2+ development.
After a while, the autoimport for classes and dependencies stopped working partially. I don't know what I have exactly done but before that ...
- 339
13
votes
1
answer
6k
views
Angular 5 services are initialized before APP_INITIALIZER is done
I am converting an AngularJS 1.6 app to Angular 5, and I'm trying to figure out why my services are being initialized before the APP_INITIALIZER is done.
Context:
I need to fetch the app config ...
- 1,347
13
votes
1
answer
1k
views
Cannot assign to read only property 'dataChange' of object '#<ValidationComponent>'
I am trying to use a two way binding in Angular 4. Here is my component code:
@Component({
selector: 'form-validation',
templateUrl: './form.validation.template.html',
encapsulation: ...
- 611
13
votes
1
answer
7k
views
unit-testing for values set async in ngOnInit() function of an angular component
I'm trying to unit-test an array that is set from an async service in the ngOnInit() function of my component.
export class DashboardComponent implements OnInit {
todos: Todo[] = [];
constructor(...
- 170
13
votes
4
answers
5k
views
Required request part 'file' is not present - Angular2 Post request
I am trying to get my file upload functionality done using Angular2 and SpringBoot. I can certify that my java code for the file uploading working fine since I have tested it successfully using ...
- 2,065
13
votes
1
answer
6k
views
Angular 4 Animate the newly added element of an array
I have a div where I have some values in an array displayed in it and I can add more. The newly added value will be added directly to the div:
list = ['milk', 'sugar', 'flour'];
state = 'normal';
...
- 4,816
13
votes
2
answers
2k
views
Angular 2+: Routing based on response from api
Say I have the following
const routes = [
{
path: 'product/:id',
component: ProductDetailsComponent,
}
{
path: 'search',
component: SearchResultsComponent,
}
]
now say
...
- 627
13
votes
1
answer
6k
views
Webpack imported class from module is not a constructor
I have an angular2 package library ( call it A) that I import from another different angular2 project ( call it B ) using npm install .
All services , components from A seems to work on the B project ,...
- 3,497
13
votes
3
answers
6k
views
Angular 2 / How to prevent IE from triggering automatically input validation?
I have forms in my Angular 2 application that uses ngControl. Example:
<label for="login-field-inputLogin" class="sr-only">Login</label>
<input
[(ngModel)]="login"
id="login-...
- 131
13
votes
1
answer
4k
views
Angular/Typescript - Wildcard module declaration
I'm trying to implement wildcard modules and i don't seem to get it work:
Right now i have the following code which works:
typings.d.ts
declare module "*.json" {
const value: any;
export ...
- 5,884
12
votes
0
answers
2k
views
cdk-virtual-scroll-viewport usage with angular/flex-layout (row and wrap)
I would like to use virtual scrolling with flexlayout - e.g. the following code should work with virtual scrolling:
<div fxLayout="row wrap" fxLayoutAlign="start center">
...
- 1,649
12
votes
0
answers
3k
views
Router RedirectTo default does not fire event NavigationEnd
I am using Angular v6.1.0 and. My routing file here:
const routes: Routes = [
{
path: '', component: DashboardComponent, children: [
{ path: '', redirectTo: 'activity', pathMatch: 'full' }...
- 506
12
votes
2
answers
1k
views
Angular 2+ - data loading: best practices
I was wondering what the best approach is to load data in Angular 5. Of course, we want to keep components dumb ;) For now, I am using a resolver and Angular calls the resolver in a specific route. ...
- 4,366
12
votes
0
answers
3k
views
Access host component in a structural directive
I'm using Angular 5.2.10. Suppose we have the following template:
<mat-form-field *appEntityValidate>
<input
matInput
type="text"
placeholder="Some input">
<...
- 14.1k
12
votes
0
answers
6k
views
ngx-translate - merge translation file of different modules
I use angular-cli in my project with @ngx-translate. The application has lazy-loaded modules and one shared-module (not lazy-loaded) with components.
The language files are separated per modules. The ...
- 121
12
votes
1
answer
3k
views
How to get caret position for a contenteditable 'div' in Angular 2?
I have the following code:
<div #test (click)="onClick(test)" contenteditable="true">
This text can be edited by the user.
</div>
@ViewChild('test') el:ElementRef;
...
- 454
12
votes
1
answer
4k
views
peerDependencies configuration for publishable libraries with NX & Angular
I have a monorepo using NX & Angular and I am publishing some libs to NPM and i have the following scenario
apps
only_App
libs
lib_A // v1.0.0
lib_B // v1.0.0
lib_C // v1.0.0
lib_A ...
- 199
12
votes
1
answer
13k
views
How to configure CHROME_BIN path in Jenkins env variable for Headless Chrome
I'm working on basic Angular project and I'm able to run the test with karma and Jasmin on my Windows with headless chrome. But Jenkins says that No binary for ChromeHeadless browser on your platform,...
- 10.3k
11
votes
1
answer
2k
views
Linting is extremely slow after upgrading nx/angular . Plugin: import/no-deprecated
The project has been upgraded from 11.2.11 to 12.2.10 during the nx upgrade process (nx migrate)
Now, the code linting increased from 30 seconds to 4 minutes:
time TIMING=1 ng lint my-app
> nx ...
- 346
11
votes
1
answer
4k
views
How Can I Access a Service in my Angular NGRX Selector
In my Angular app I have a Selector file plan.selectors.ts which has a few really complex Selectors. A lot of calculations are carried out when retrieving the data and some of these calculations are ...
- 1,919
11
votes
1
answer
11k
views
Run angular Karma tests in visual studio code
I installed vscode-test-explorer extension along with its child angular-karma-test-explorer and jasmine-test-adapter to vscode as answered here.
However, no tests are loaded to the Test Explorer, it ...
- 2,309
11
votes
0
answers
464
views
SystemJS.registerDynamic() equivalent function in the latest version of SystemJS
We have this old code which was written in SystemJS version 0.21.3. We are trying to use the latest version of SystemJS to load the module dynamically from an in-memory JavaScript variable.
Can ...
- 6,352
11
votes
0
answers
2k
views
Angular 7+: HMR (Hot Module Replacement) does not work if any route-resolve involved
HMR (Hot Module Replacement) is a great functionality, that works properly if no "Route-resolve" (see below) is present.
If I remove resolve here:
{
path: 'new',
component: ...
user3025289
11
votes
1
answer
11k
views
Running headless Chromium Browser throws error 'Failed to read DnsConfig' (inside Docker container)
My Goal:
To run unit tests on my Angular 6 app (that runs inside of a Docker container) using Karma/Jasmine. In order to run these tests it appears I need a web browser. So it seemed like Chromium ...
- 123