modal forms sample code MDB

Expected behavior

modal sample code in typescript as shown on MDB website should compile and run

Actual behavior

It would failed with different can't find dependencies module. confident those module have already installed and initialized in app.module. The interesting thing is that when more than one modal form is run this is when error occurs. when a single modal form is run in the app.component and app.component.html error doesn't happen. add another modal component as a new feature error happens. app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MDBSpinningPreloader,MDBBootstrapModule,MDBRootModules, MDBBootstrapModulesPro} from 'ng-uikit-pro-standard'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({ declarations: [ AppComponent

], imports: [ BrowserModule, MDBBootstrapModulesPro.forRoot(), MDBBootstrapModulesPro, AppRoutingModule, FormsModule, MDBRootModules,

MDBBootstrapModule,
ReactiveFormsModule

],

providers: [MDBSpinningPreloader, MDBBootstrapModulesPro], bootstrap: [AppComponent] }) export class AppModule { }

errorMessage

chunk {main} main.js, main.js.map (main) 2.02 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 688 bytes [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] chunk {scripts} scripts.js, scripts.js.map (scripts) 385 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 2.44 MB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 341 kB [initial] [rendered] Date: 2020-08-25T19:02:12.931Z - Hash: ccbcd6742de22135f307 - Time: 36812ms

ERROR in src/app/home/home.component.html:24:18 - error NG8002: Can't bind to 'formControl' since it isn't a known property of 'input'.

24 [formControl]="modalFormElegantEmail"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:26:11 - error NG8001: 'mdb-error' is not a known element: 1. If 'mdb-error' is an Angular component, then verify that it is part of this module. 2. If 'mdb-error' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

26 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:30:11 - error NG8001: 'mdb-success' is not a known element: 1. If 'mdb-success' is an Angular component, then verify that it is part of this module. 2. If 'mdb-success' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

30 Input ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:38:18 - error NG8002: Can't bind to 'formControl' since it isn't a known property of 'input'.

38 [formControl]="modalFormElegantPassword"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:40:11 - error NG8001: 'mdb-error' is not a known element: 1. If 'mdb-error' is an Angular component, then verify that it is part of this module. 2. If 'mdb-error' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

40 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:44:11 - error NG8001: 'mdb-success' is not a known element: 1. If 'mdb-success' is an Angular component, then verify that it is part of this module. 2. If 'mdb-success' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

44 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:65:13 - error NG8001: 'mdb-icon' is not a known element: 1. If 'mdb-icon' is an Angular component, then verify that it is part of this module. 2. If 'mdb-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

65 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:70:13 - error NG8001: 'mdb-icon' is not a known element: 1. If 'mdb-icon' is an Angular component, then verify that it is part of this module. 2. If 'mdb-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

70 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:75:13 - error NG8001: 'mdb-icon' is not a known element: 1. If 'mdb-icon' is an Angular component, then verify that it is part of this module. 2. If 'mdb-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

75 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:5:23 - error NG8003: No directive found with exportAs 'mdbModal'.

5

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **