can't bind to 'formcontrol' since it isn't a known property of 'input'

Hi Guys ,

In this blog I will share information related to error :
can't bind to 'formcontrol' since it isn't a known property of 'input'.

The complete error log is as follows :

Error in /turbo_modules/@angular/compiler@8.0.0/bundles/compiler.umd.js (2479:21)

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("<label>
Name:
<input type="text" [ERROR ->][formControl]="status">
</label>"): ng:///AppModule/StatusComponent.html@2:21
No provider for NgControl ("<label>
Name:
[ERROR ->]<input type="text" [formControl]="status">
</label>"): ng:///AppModule/StatusComponent.html@2:2

You may get this error while using angular reactive forms .

To fix this error add RectiveFormsModule in the inports array .

@NgModule({

  imports:      [ BrowserModule, FormsModule ,ReactiveFormsModule ],

  declarations: [ AppComponent, HelloComponent, StatusComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

Checkout the video on how to fix this error .

Hope this fixes the issue ! Thanks .

JSX expressions must have one parent element.

Hi Guys ,


This blog is about the error " JSX expressions must have one parent element.

Let's look at the erroneous code .

import React from 'react';

export default ({ name }) => <h1>Hello {name}!</h1>

<input type="text" placeholder="enter asset"/>;

You can see there are two elements <h1> and <input> .
The error is because react does not allow multiple component as a parent component . To fix this issue we can put the two elements under single parent component , like a <div> .

Let's fix the code .

import React from 'react';

export default ({ name }) => <div><h1>Hello {name}!</h1>

<input type="text" placeholder="enter asset"/>  </div>;

The error is gone . Hope this helps , Thanks !

Checkout this error in youtube .

Let me know if you still face error in the comments below .

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 ! .