ERROR in node_modules/firebase/index.d.ts(4336,38): error TS1005: ';' expected.

Hi Everyone ,

This blog is about the error " ERROR in node_modules/firebase/index.d.ts(4336,38): error TS1005: ';' expected."




I have faced this error while adding firebase to angular .
The solution is to update the typescript to version 3.1.3 .

add firebase to angular

Hi Everyone ,

This blog is about how we can add firebase to angular and access the database .

Install firebase and @angular/fire using npm .

npm i @angular/fire

npm i firebase

Create a file in src/environments/environment/ts

export const environment = {

  production: false,

  

  firebase:{

    apiKey: "your api key",

    authDomain: "test-15b0a.firebaseapp.com",

    databaseURL: "https://test-15b0a.firebaseio.com",

    projectId: "your project id ",

    storageBucket: "test-15b0a.appspot.com",

    messagingSenderId: "846752590782",

    appId: "1:846752590782:web:cdfb301f4daf4448"

  }

};

And then , add firebase to app.module.ts


Next step is to access it via service


Hope this helps . Thanks !

Target container is not a DOM element.

Hi Guys ,


This blog is about the error " Target container is not a DOM element. " 



 The full error in the console log is as follows :

Invariant Violation: Target container is not a DOM element.
    at invariant (https://react-gartc9.stackblitz.io/turbo_modules/react-dom@16.8.0/cjs/react-dom.development.js:55:15)
    at Object.render (https://react-gartc9.stackblitz.io/turbo_modules/react-dom@16.8.0/cjs/react-dom.development.js:20611:36)
    at Object.eval (https://react-gartc9.stackblitz.io/~/index.js:43:13)
    at eval (https://react-gartc9.stackblitz.io/~/index.js:45:4)
    at eval (https://react-gartc9.stackblitz.io/~/index.js:46:3)
    at eval (<anonymous>)

Lets see the erroneous code .

HTML code

<div id="root"></div>

and javascript :

render(<App />, document.getElementById('app'));

To fix this update the render function and specify the id of the HTML element . The working code is as follows :

render(<App />, document.getElementById('root'));

Hops this helps .
Thanks !

Error response from daemon: No such container:docker

Hi Guys ,

This blog is about the issue "Error response from daemon: No such container:"
I got this error while using docker , I had an docker container which I tried to stop using the command

docker stop myContainer

But instead of stopping it docker gave an error message like
Error response from daemon: No such container:myContainer .

Later I have found out that the docker container name was incorrect .

So I did docker ps

And I got the list of docker containers .
I checked the name of the container which needs to be stopped under the names column . I am able to stop the container .



The second situation where I got the same error is when I tried to start the docker container using the command
start docker myContainer .

Same as above the name is wrong , hence the error .

Watch the video for more details .

Unexpected value '[object Object]' declared by the module 'AppModule'

Hi Guys ,

This blog is about the error " Unexpected value '[object Object]' declared by the module 'AppModule'" .

Error in the page :

Error in /turbo_modules/@angular/compiler@8.2.10/bundles/compiler.umd.js (2603:21)

Unexpected value '[object Object]' declared by the module 'AppModule'

Error in the console :


Error: Unexpected value '[object Object]' declared by the module 'AppModule'
at syntaxError (util.ts:100)
    at eval (metadata_resolver.ts:603)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (metadata_resolver.ts:600)
    at JitCompiler._loadModules (compiler.ts:127)
    at JitCompiler._compileModuleAndComponents (compiler.ts:107)
    at JitCompiler.compileModuleAsync (compiler.ts:61)
    at CompilerImpl.compileModuleAsync (compiler_factory.ts:58)
    at compileNgModuleFactory__PRE_R3__ (application_ref.ts:50)
    at PlatformRef.bootstrapModule (application_ref.ts:307)


We faced this error due while updating declarations in app.module.ts .

Lets see the erroneous code .

@NgModule({

  imports:      [ BrowserModule, FormsModule ,  AngularFireModule.initializeApp(environment.firebase)],

  declarations: [ AppComponent,

  AngularFireModule.initializeApp(environment.firebase),

   HelloComponent, SubjectComponent ],

  bootstrap:    [ AppComponent ],

  providers: [QuizService , AngularFirestore]

}) 


check the declarations part regarding the issue , remove    AngularFireModule.initializeApp(environment.firebase),th e from declarations .

Working code :

@NgModule({

  imports:      [ BrowserModule, FormsModule ,  AngularFireModule.initializeApp(environment.firebase)],

  declarations: [ AppComponent,

  

   HelloComponent, SubjectComponent ],

  bootstrap:    [ AppComponent ],

  providers: [QuizService , AngularFirestore]

})

Hope this helps . Thanks ! .

Errors while compiling. Reload prevented.

Hi Guys ,

This blog is about the error Errors while compiling. Reload prevented.

I have faced this error while running an angular project . I used ng serve to run the project . Whenever we make changes to the code , angular compiles and auto reloads the app .

So while compiling if there are multiple error it will stop the load and as a developer you need to look into your code and find out root cause of all the errors .It could be a recent line of code you changed .

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 .