Angular 6.1 and later: Angular 6.1 (released on 2018-07-25) added built-in support to handle this issue, through a feature called “Router Scroll Position Restoration”. As described in the official Angular blog, you just need to enable this in the router configuration like this: RouterModule.forRoot(routes, {scrollPositionRestoration: ‘enabled’}) Furthermore, the blog states “It is expected that this … Read more
Open angular.json file and find budgets keyword. It should look like: “budgets”: [ { “type”: “initial”, “maximumWarning”: “2mb”, “maximumError”: “5mb” } ] As you’ve probably guessed you can increase the maximumWarning value to prevent this warning, i.e.: “budgets”: [ { “type”: “initial”, “maximumWarning”: “4mb”, <=== “maximumError”: “5mb” } ] What does budgets mean? A performance … Read more
Since this is at least the third time I’ve wasted more than 5 min on this problem I figured I’d post the Q & A. I hope it helps someone else down the road… probably me! I typed in instead of of in the ngFor expression. Befor 2-beta.17, it should be: <div *ngFor=”#talk of talks”> … Read more
Try one of these: ApplicationRef.tick() – similar to AngularJS’s $rootScope.$digest() — i.e., check the full component tree NgZone.run(callback) – similar to $rootScope.$apply(callback) — i.e., evaluate the callback function inside the Angular zone. I think, but I’m not sure, that this ends up checking the full component tree after executing the callback function. ChangeDetectorRef.detectChanges() – similar … Read more
If you don’t need two-way data-binding: <select (change)=”onChange($event.target.value)”> <option *ngFor=”let i of devices”>{{i}}</option> </select> onChange(deviceValue) { console.log(deviceValue); } For two-way data-binding, separate the event and property bindings: <select [ngModel]=”selectedDevice” (ngModelChange)=”onChange($event)” name=”sel2″> <option [value]=”i” *ngFor=”let i of devices”>{{i}}</option> </select> export class AppComponent { devices=”one two three”.split(‘ ‘); selectedDevice=”two”; onChange(newValue) { console.log(newValue); this.selectedDevice = newValue; // … … Read more
Angular Concepts imports makes the exported declarations of other modules available in the current module declarations are to make directives (including components and pipes) from the current module available to other directives in the current module. Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported. providers … Read more
Import it from the file where it is declared directly instead of the barrel. I don’t know what exactly causes the issue but I saw it mentioned several times (probably some kind of circular dependency). It should also be fixable by changing the order of the exports in the barrel (don’t know details, but was … Read more
While using formControl, you have to import ReactiveFormsModule to your imports array. Example: import {FormsModule, ReactiveFormsModule} from ‘@angular/forms’; @NgModule({ imports: [ BrowserModule, FormsModule, ReactiveFormsModule, MaterialModule, ], … }) export class AppModule {}
This is not related to an HTTP proxy. You have dependency conflict (incorrect and potentially broken dependency) as it says, so try to run the command with –force, or –legacy-peer-deps. If it doesn’t take effect, the temporary solution is using prior versions of the Node.js (downgrading the Node.js version) as it causes this kind of … Read more
I had a similar issue. Looking at the lifecycle hooks documentation, I changed ngAfterViewInit to ngAfterContentInit and it worked.