Angular

If you have faced or are facing the below error while running your angular application, then this post is for you. Schema validation failed with the following errors: Data path “” should NOT have additional properties(es5BrowserSupport) Solution There are two ways to remove this error, choose any of the below as per the requirement. 1. Remove es5BrowserSupport option from application Find angular.json file in your project and search for es5BrowserSupport. Comment this line as shown in the image below. Restart the application using command ng serve. This approach is not recommended if you want your application to support older browsers. 2. Upgrade versions to support es5BrowserSupport IfRead More →

If you are working on an angular application, then you should have used Observable from RxJS library. It might happen that when you start using Observable, you might encounter this error. Module ‘”<path to angular app>/node_modules/rxjs/Observable”‘ has no exported member ‘Observable’. This article will guide you through the method to resolve this error. Solution Check your imports section where Observable is imported, you should see import { Observable } from ‘rxjs/Observable’; Modify the above import to import { Observable } from ‘rxjs’; Most probably the error should go away. Reason In RxJS 5, Observable was present in the package rxjs/Observable but in RxJS 6, itRead More →

When you are generating angular components either using Operating system terminal or embedded terminal in VS Code, you might have encountered this error as shown below. F:\angular\src> ng g c MyComponent Could not find an NgModule. Use the skip-import option to skip importing in NgModule. Solution 1 Check the current directory at which the terminal is currently pointing or the path in which you are running this command. Next, check if this folder contains a module or a file with .module.ts extension. In my case I was running this command from inside the path <project name>/src while app module was located inside <project name>/src/app folder.Read More →

If you are generating angular component or module from angular cli using command ng g m [module name] and you get the error trace as below TypeError: core_1.PriorityQueue is not a constructor at new TaskScheduler (E:\angularapp\node_modules\@angular-devkit\schematics\src\engine\task.js:20:23) at SchematicEngine.createContext (E:\angularapp\node_modules\@angular-devkit\schematics\src\engine\engine.js:81:31) at SchematicImpl.call (E:\angularapp\node_modules\@angular-devkit\schematics\src\engine\schematic.js:35:38) at Promise (E:\angularapp\node_modules\@angular\cli\tasks\schematic-run.js:73:23) at new Promise (<anonymous>) at Class.run (E:\angularapp\node_modules\@angular\cli\tasks\schematic-run.js:72:16) at Class.run (E:\angularapp\node_modules\@angular\cli\commands\generate.js:152:33) at resolve (E:\angularapp\node_modules\@angular\cli\ember-cli\lib\models\command.js:261:20) at new Promise (<anonymous>) at Class.validateAndRun (E:\angularapp\node_modules\@angular\cli\ember-cli\lib\models\command.js:240:12) Then you are at the right location. Solution Open the package.json file of your application and search for angular-devkit/core dependency under devDependencies tag. It will look something like this. “devDependencies”: { “@angular-devkit/core”: “0.0.28”, } Error trace above is telling you thatRead More →

Scenario Suppose you have an empty table on an HTML page which has heading tags but its body is empty such as that given below. <table>    <thead>       <tr>          <th>S. No.</th>          <th>Name</th>          <th>ID</th>       </tr>    </thead>    <tbody>   <!– empty body –>    </tbody> </table> Content of the table’s body will be fetched from the server as HTML and will be set dynamically. Or let it be any random HTML which you want to fetch from the server and set it inside another element on HTMLRead More →

What are Pipes? Pipes are a way to transform or modify the data that is shown to the user. Typically, pipes perform utility functions by using a simple syntax which would otherwise require some coding. Example, suppose you want to show the name of an employee or some object in upper case, no matter in which case you are getting it from the backend source or you want to format a large number properly with commas according to its length(such as 1,23,000). Using pipes, this can be easily done. Syntax Pipes are applied to the data to be transformed by using pipe symbol( | ) followed byRead More →

There are times when you need to style an element or add some class to it only on a certain condition and not always. Example, on a shopping site, there may be thousands of items. But while displaying the page to a user, some items are displayed with an icon besides them such as a star or a heart to indicate that this item was marked as favorite sometime back by this user. This can be easily achieved by adding a class dynamically on the condition that this item was flagged as favorite or not. In angular, this is called Class Binding. How to addRead More →

Parent-Child component: Meaning An angular application is made up of components and often components are nested inside one-another. Example, suppose you have a table of rows on a page. In this simple structure we can have 2 components: A table component which represents the entire table and a component which represents a single row of the table. If we have this kind of structure, then table will contain row component and thus table component will be the Parent component and row component will be the Child component. In simple words, when one component contains another component, then the components are said to be nested. WhenRead More →

What is a service A service in Angular is a special typescript class which contains methods and fields like a normal typescript class but its methods and fields can be shared by components. A service is annotated with @Injectable annotation and it is directly injected into the component which wants to use it. Why is service required A service is used to perform utility functions such as fetching data from the server, logging to the console, reading a json file etc. Example: Imagine a component wants to fetch data from the server and show it on the browser. Logic to fetch data can be writtenRead More →