directive in Angular 5

Uncaught Error: Encountered undefined provider

Hi Guys,

Here is how you can fix the issue "Uncaught Error: Encountered undefined provider" . Have a look at the stack trace below.


compiler.js:485 

Uncaught Error: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files.
    at syntaxError (compiler.js:485)
    at eval (compiler.js:15725)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (compiler.js:15710)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:14994)
    at CompileMetadataResolver._getEntryComponentMetadata (compiler.js:15812)
    at eval (compiler.js:15293)
    at Array.map (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15293)
    at JitCompiler._loadModules (compiler.js:34226)


To find out which part of the code is throwing  this error , first have a check in the component.ts file.
Check the value of provider attribute in the @Component decorator .

Invalid providers for "AppComponent" - only instances of Provider and Type are allowed

Hi Guys,

You might have faced the issue "Invalid providers for "AppComponent" - only instances of Provider and Type are allowed" .

The full stack trace is as below:

Uncaught Error: Invalid providers for "AppComponent" - only instances of Provider and Type are allowed, got: [?./user.service.ts?]
    at syntaxError (webpack-internal:///../../../compiler/esm5/compiler.js:706)
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:15963)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (webpack-internal:///../../../compiler/esm5/compiler.js:15931)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (webpack-internal:///../../../compiler/esm5/compiler.js:15215)
    at CompileMetadataResolver._getEntryComponentMetadata (webpack-internal:///../../../compiler/esm5/compiler.js:16033)
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:15514)
    at Array.map (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (webpack-internal:///../../../compiler/esm5/compiler.js:15514)
    at JitCompiler._loadModules (webpack-internal:///../../../compiler/esm5/compiler.js:34447)



To find the root cause of the issue first check the providers attribute of @Component decorator in the component.ts file.

If the value is anything other than a valid Typescript type you will get the above error.

property binding in Angular 5

Hi Guys,

Let's understand what is property binding in angular 5.

We all know that an HTML element has various properties like id , name , value, etc. . Angular provides a way to bind to the property of HTML elements , called property binding .

There are multiple use cases that can be simplified using property binding like , if you have to change the value of a text field dynamically , or enable/disable a button. Let's see how can we do it.

First create an html file which will act as a component . Name this file as test.component.html , in this file have a text field . To bind a property we need to put the property in []. Here we are going to bind the value property , so I have placed value in square brackets . Since I am going to bind this property to a dynamic value , I will do so by assigning the property to a variable myValue.

<input type="text" [value]="myValue">

You need to define myValue in the component file . So , create a typescript file and name it as test.component.ts . The content of the file should be as below.

import { Component } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent {
myValue="test";
}

Finally update your index.html as 

<app-test></app-test>

That's all , verify the code by refreshing the localhost:4200 in chrome browser . You will see the output as

---

node_modules appears empty, you may need to run 'npm install'

Hi Guys,


You might face the error node_modules appears empty, you may need to run 'npm install'  if you try to test an angular 2/4/5 application . 

node_modules appears empty, you may need to run 'npm install'

This error occurs when you use the command ng serve.

C:\projects\my-app> ng serve

Note that this command is used to start a server , serving the angular application .

The most common cause of this error is missing node_modules folder in the directory from which you have called ng serve.

To solve this take the following steps.

1. Check , if you have called ng serve from the correct location ? to serve the application you need to navigate to the project folder and then call ng serve .

2. If you are in correct folder , check if you have a folder named node_modules in it.If not your project is incomplete . Create a new application using ng new and replace the src folder of new app with src folder of your existing app.

C:\projects> ng new my-app-new

Copy the src folder in my-app to my-app-new

C:\projects> cd my-app-new
C:\projects\my-app-new> ng serve

3. If you have node_modules  folder available and in your app folder then it might be corrupted. To solve this create a new application using ng new and replace the src folder of new app with src folder of your existing app.


Important links
S O

The selector "app-root" did not match any elements

Hi Guys,

You might face this error when we try add a newly created component in Angular 2/4/5.

Let's have a look at the complete stack trace:

ERROR Error: The selector "app-root" did not match any elements
    at DefaultDomRenderer2.selectRootElement (platform-browser.js:2791)
    at DebugRenderer2.selectRootElement (core.js:14962)
    at createElement (core.js:10279)
    at createViewNodes (core.js:13409)
    at createRootView (core.js:13338)
    at callWithDebugContext (core.js:14739)
    at Object.debugCreateRootView [as createRootView] (core.js:14040)
    at ComponentFactory_.create (core.js:10959)
    at ComponentFactoryBoundToModule.create (core.js:3919)
    at ApplicationRef.bootstrap (core.js:5730)

This would come if you have placed the newly created component selector in the root component .

Let's look at the working code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyFirstApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>

</body>
</html>

Remember this code is working fine , now lets see the erroneous code.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyFirstApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-mycomponent></app-mycomponent>
</body>
</html>

So the error is due to the app-mycomponent which is not present. So , how to fix this error ? You need to add the new component in the app component , not in the index.html.

<app-mycomponent></app-mycomponent>
<div style="text-align:center">
  <h1>
    Welcome  {{title}}!
  </h1>
  <img width="300" src="xyz">
</div>

Now, we see the output as:

mycomponent works!

TIP

Check Bootstrapping of Angular App

Links:

Refer to similar answers in Stack Overflow site.

Lexical scoping in JavaScript

If you are familiar with JavaScript you might be aware that JavaScript uses lexical scoping . Now what really is lexical scoping and how is it different than other languages like java ?
What is actually a scope ? A scope is the visibility and accessibility of the variable . So when a JavaScript function tries to refer to a variable , the scope of the variable comes into play . Now lexical scoping means the variable will be accessible to the function only if it was in scope when it was defined.
The key point is variable does have different scopes while definition and execution.