SystemJS works client side. It loads modules (files) dynamically on demand when they are needed. You don’t have to load the entire app up front. You could load a file, for example, inside a button click handler. SystemJS code: // example import at top of file import myModule from ‘my-module’ myModule.doSomething() // example dynamic import … Read more
providedIn: ‘root’ is the easiest and most efficient way to provide services since Angular 6: The service will be available application wide as a singleton with no need to add it to a module’s providers array (like Angular <= 5). If the service is only used within a lazy loaded module it will be lazy … Read more
Each of your .spec.ts file have all its tests grouped in describe block like this: describe(‘SomeComponent’, () => {…} You can easily run just this single block, by prefixing the describe function name with f: fdescribe(‘SomeComponent’, () => {…} If you have such function, no other describe blocks will run. Btw. you can do similar … Read more
There is no equivalent to $scope.emit() or $scope.broadcast() from AngularJS. EventEmitter inside of a component comes close, but as you mentioned, it will only emit an event to the immediate parent component. In Angular, there are other alternatives which I’ll try to explain below. @Input() bindings allows the application model to be connected in a … Read more
You have to wait for TypeScript 2.0 with async/await for ES5 support as it now supported only for TS to ES6 compilation. You would be able to create delay function with async: function delay(ms: number) { return new Promise( resolve => setTimeout(resolve, ms) ); } And call it await delay(1000); BTW, you can await on … Read more
update Angular 5 StackBlitz example update ngComponentOutlet was added to 4.0.0-beta.3 update There is a NgComponentOutlet work in progress that does something similar https://github.com/angular/angular/pull/11235 RC.7 Plunker example RC.7 // Helper component to add dynamic components @Component({ selector: ‘dcl-wrapper’, template: `<div #target></div>` }) export class DclWrapper { @ViewChild(‘target’, {read: ViewContainerRef}) target: ViewContainerRef; @Input() type: Type<Component>; cmpRef: … Read more
There was a bug, but it was fixed in the meantime. :host { } works fine now. Also supported are :host(selector) { … } for selector to match attributes, classes, … on the host element :host-context(selector) { … } for selector to match elements, classes, …on parent components selector /deep/ selector (alias selector >>> selector … Read more
There is a work-around mentioned in the changelog for 2.0.0-beta.6 (2016-02-11) (listed under breaking changes): If you use –target=es5, you will need to add a line somewhere in your application (for example, at the top of the .ts file where you call bootstrap): ///<reference path=”node_modules/angular2/typings/browser.d.ts”/> (Note that if your file is not in the same … Read more
You need to use the new configuration option (this works for ng build and ng serve as well) ng serve –configuration=local or ng serve -c local If you look at your angular.json file, you’ll see that you have finer control over settings for each configuration (aot, optimizer, environment files,…) “configurations”: { “production”: { “optimization”: true, … Read more
Use the HttpClient class from HttpClientModule if you’re using Angular 4.3.x and above: import { HttpClientModule } from ‘@angular/common/http’; @NgModule({ imports: [ BrowserModule, HttpClientModule ], … class MyService() { constructor(http: HttpClient) {…} It’s an upgraded version of http from @angular/http module with the following improvements: Interceptors allow middleware logic to be inserted into the pipeline … Read more