Module not found: Error: Can't resolve '@angular/cdk/a11y'

Hi Guys ,

This blog is about the error Module not found: Error: Can't resolve '@angular/cdk/a11y' .

The full error is as follows :

/src/app/material-module.ts Module not found: Error: Can't resolve '@angular/cdk/a11y' in ..


This error is due to the material module is missing but the code is expecting it to be in the node_modules .

To fix this issue simply type the following command in the command prompt .

npm install --save @angular/material

If this does not work remove the node_modules and perform npm update .


Thanks !

Could not find module "@angular-devkit/build-angular"

Hi Guys ,

This blog is about the issue Could not find module "@angular-devkit/build-angular" . This error comes when you run the command ng serve .

The complete error log is as follows :


Could not find module "@angular-devkit/build-angular" from "F:\\progvocab\\study\\gitRepo\\new\\qanda".
Error: Could not find module "@angular-devkit/build-angular" from "F:\\progvocab\\study\\gitRepo\\new\\qanda".
    at Object.resolve (C:\Users\progvocab\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\core\node\resolve.js:141:11)
    at Observable.rxjs_1.Observable [as _subscribe] (C:\Users\progvocab\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\src\architect.js:132:40)
    at Observable._trySubscribe (C:\Users\progvocab\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\Observable.js:43:25)
    at Observable.subscribe (C:\Users\progvocab\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\Observable.js:29:22)
    at DoOperator.call (C:\Users\progvocab\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\operators\tap.js:29:23)
    at Observable.subscribe (C:\Users\progvocab\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\Observable.js:24:22)
    at C:\Users\progvocab\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\util\subscribeTo.js:22:31
    at Object.subscribeToResult (C:\Users\progvocab\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\util\subscribeToResult.js:7:45)
    at MergeMapSubscriber._innerSub (C:\Users\progvocab\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\operators\mergeMap.js:75:38)
    at MergeMapSubscriber._tryNext (C:\Users\progvocab\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\rxjs\internal\operators\mergeMap.js:72:14)

Now , this error comes if the dev dependency is missing angular devkit .
So in the command prompt type the following command to install angular devkit

npm install --save-dev @angular-devkit/build-angular

Hope this helps in resolving the issue you faced .

Error: Attempting to open an undefined instance of `mat-autocomplete`

Hi Guys ,

In this blog I will share information related to error :
Error: Attempting to open an undefined instance of `mat-autocomplete`

You may find this error when you use autocomplete in angular material .

The full error log is as follows :

AutocompleteSimpleExample.html:3 ERROR Error: Attempting to open an undefined instance of `mat-autocomplete`. Make sure that the id passed to the `matAutocomplete` is correct and that you're attempting to open it after the ngAfterContentInit hook.
    at getMatAutocompleteMissingPanelError (autocomplete-trigger.ts:99)
    at MatAutocompleteTrigger._attachOverlay (autocomplete-trigger.ts:615)
    at MatAutocompleteTrigger._handleFocus (autocomplete-trigger.ts:458)
    at Object.eval [as handleEvent] (VM548 AutocompleteSimpleExample.ngfactory.js:114)
    at handleEvent (view.ts:138)
    at callWithDebugContext (services.ts:630)
    at Object.debugHandleEvent [as handleEvent] (services.ts:377)
    at dispatchEvent (util.ts:135)
    at eval (element.ts:200)
    at HTMLInputElement.eval (dom_renderer.ts:52)

Lets look at the code which is causing this issue .

<form class="example-form">

  <mat-form-field class="example-full-width">

    <input type="text" placeholder="Pick one" aria-label="Number" 

    matInput [formControl]="myControl" [matAutocomplete]="matAutocomplete">

    <mat-autocomplete #auto="matAutocomplete">

      <mat-option *ngFor="let option of options" [value]="option">

        {{option}}

      </mat-option>

    </mat-autocomplete>

  </mat-form-field>

</form>

You can see we have a mat-autocomplete  with a template reference variable #auto and the value as matAutocomplete. Also notice that property binding [matAutocomplete] is having value as mat

Now the error is due to we are using the value of the template reference variable instead of the reference .

Lets correct the code .

<form class="example-form">

  <mat-form-field class="example-full-width">

    <input type="text" placeholder="Pick one" aria-label="Number" 

    matInput [formControl]="myControl" [matAutocomplete]="auto">

    <mat-autocomplete #auto="matAutocomplete">

      <mat-option *ngFor="let option of options" [value]="option">

        {{option}}

      </mat-option>

    </mat-autocomplete>

  </mat-form-field>

</form>

Hope this fixes the issue you are facing .

Deploy Microservice to AWS

Hi Guys ,

This blog will have a brief information on how to deploy a micro service in AWS .

So first thing is you need an AWS account , which will provide different services to achieve the same .
Login to AWS management console .

In this example I will take spring boot micro service as a reference .

You need to create an EC2 instance where we are going to run the micros service .

using maven build the jar file Spring boot and upload to AWS S3 .
Create  a bucket in S3 , and then upload the jar file .
Make sure you give the access as public so that it can be downloaded to the EC2 from S3 .

Cloud Foundry

What is Cloud Foundry ?

• Open source 

Why Cloud Foundry ?

Component template should contain exactly one root element.

Hi Guys ,

In this blog I will share information related to error : Component template should contain exactly one root element.

This error is related to template attribute .




Let us see the erroneous code .

template: `

<h1>My data </h1>

<table>

<th>

<td>

Stock Name

</td>

<td>

Market Capitalization

</td>

</th>

<tr v-for = "a in stocks">

<td >

{{a.name}}

</td>

<td>

{{a.mCap}}

</td>

</tr>

</table>

` ,

You can notice that the template attribute starts with an h1 tag and then has a table tag . But in vue js the component template should have only one root element , so you have to enclose the entire component in one tag . To fix this I have removed the h1 tag.

template: `

<table>

<th>

<td>

Stock Name

</td>

<td>

Market Capitalization

</td>

</th>

<tr v-for = "a in stocks">

<td >

{{a.name}}

</td>

<td>

{{a.mCap}}

</td>

</tr>

</table>

` ,

Hope this resolves the issue . Thanks !


Youtube link :

The full error details is as below  :

[Vue warn]: Error compiling template:


  <h1>My data </h1>
    <table>
      <th>
        <td>
          Stock Name
        </td>
        <td>
          Market Capitalization
        </td>
      </th>
      <tr v-for = "a in stocks">
        <td  >
          {{a.name}}
        </td>
        <td>
          {{a.mCap}}
        </td>
      </tr>
    </table>
  

- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.


found in

---> <ByMarketCap>
       <Anonymous>
         <Root>

The "data" option should be a function that returns a per-instance value in component definitions.

Hi Guys ,

In this blog I will share information related to error : The "data" option should be a function that returns a per-instance value in component definitions.

This error is related to data attribute .

Let us see the erroneous code .

` ,

data : {

stocks : [

{"name" : "HDFC" , "mCap": "1000Cr"} ,

{"name" : "ICICI" , "mCap": "100Cr"}

]

}

}

The error is due to Vue expects the data attribute to contain a function .
Let us fix this by wrapping our data in a function .

` ,

data: function () {

return {

stocks: [

{ "name": "HDFC", "mCap": "1000Cr" },

{ "name": "ICICI", "mCap": "100Cr" }

]

}

}

Hope this resolves the issue . Thanks !
Youtube link below :