Use form API Error

Topic: Use form API Error

vangtry pro asked 6 years ago

Hello im triying to use the component without import all modules, else one by one. In this case i declare import like your API form example in form section

// MDB Angular Pro
import { InputsModule, WavesModule, ButtonsModule, CardsFreeModule } from 'ng-uikit-pro-standard

in the IDE show error in CardsFreeModule, because this no exist in this path

CardsFreeModule is located in

import { CardsFreeModule } from '../../../../node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/free/cards';

when add this in the IDE throw the following

Module not found: Error: Can't resolve '../../../../node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/free/cards'

Also use other module called

CardsModule

but when use this the compile its Ok but in the browser console throw this:

Uncaught Error: Template parse errors:
'mdb-card-body' is not a known element:
1. If 'mdb-card-body' is an Angular component, then verify that it is part of this module.
2. If 'mdb-card-body' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message

this is my file app-shared.module.ts

import { CommonModule } from '@angular/common';
// MDB Angular Pro
import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';
import { InputsModule, WavesModule, ButtonsModule, CardsModule } from 'ng-uikit-pro-standard';
import { CardsFreeModule } from '../../../../node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/free/cards';
import { FormsModule, ReactiveFormsModule } from '../../../../node_modules/@angular/forms';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
@NgModule({
imports: [
WavesModule.forRoot(),
InputsModule.forRoot(),
ButtonsModule.forRoot(),
// CardsFreeModule.forRoot(),
CardsModule.forRoot()
// MDBBootstrapModulesPro.forRoot(),
],
exports: [
CommonModule,
WavesModule,
InputsModule,
ButtonsModule,
// CardsFreeModule,
CardsModule,
// MDBBootstrapModulesPro,
FormsModule,
ReactiveFormsModule
],
providers: [MDBSpinningPreloader],
bootstrap: [],
schemas: [NO_ERRORS_SCHEMA]
})
export class AppSharedModule { }

thanks for your help

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear vangtry,
As a workaround, I can suggest you two ways of getting your app work.
1st: (The easy one) - Use the whole MDBBootstrapModulesPro module,
2nd: (The harder one) - Clone ng-uikit-pro-standard-compile repository, open src/lib/ng-uikit-pro-standard/index.ts file and copy there below lines:
<div>
<pre>// Cards

export * from './free/cards/cards.module';

export * from './free/cards/index';

export * from './free/cards/mdb-card-body.component';

export * from './free/cards/mdb-card-footer.component';

export * from './free/cards/mdb-card-header.component';

export * from './free/cards/mdb-card-image.component';

export * from './free/cards/mdb-card-text.component';

export * from './free/cards/mdb-card-title.component';

export * from './free/cards/mdb-card.component';</pre>
</div>
Then do npm two following commands:
<pre>npm install

npm run compile</pre>
After completing npm run compile script, copy ng-uikit-pro-standard archive from dist directory into your app directory, and do npm install that library.

So if you generate ng-uikit-pro-standard-6.2.1.tgz archive, copy it to your app location and do npm install ng-uikit-pro-standard-6.2.1.tgz

After those steps, you'll be able to do following import:
<pre>import { CardsFreeModule } from 'ng-uikit-pro-standard';</pre>
This problem will be fixed with the next release of MDB Angular.

Best Regards,

Damian

Please insert min. 20 characters.

Dear vangtry, As a workaround, I can suggest you two ways of getting your app work. 1st: (The easy one) - Use the whole MDBBootstrapModulesPro module, 2nd: (The harder one) - Clone ng-uikit-pro-standard-compile repository, open src/lib/ng-uikit-pro-standard/index.ts file and copy there below lines:

// Cards

export * from './free/cards/cards.module';

export * from './free/cards/index';

export * from './free/cards/mdb-card-body.component';

export * from './free/cards/mdb-card-footer.component';

export * from './free/cards/mdb-card-header.component';

export * from './free/cards/mdb-card-image.component';

export * from './free/cards/mdb-card-text.component';

export * from './free/cards/mdb-card-title.component';

export * from './free/cards/mdb-card.component';

Then do npm two following commands:

npm install

npm run compile

After completing npm run compile script, copy ng-uikit-pro-standard archive from dist directory into your app directory, and do npm install that library. So if you generate ng-uikit-pro-standard-6.2.1.tgz archive, copy it to your app location and do npm install ng-uikit-pro-standard-6.2.1.tgz After those steps, you'll be able to do following import:

import { CardsFreeModule } from 'ng-uikit-pro-standard';

This problem will be fixed with the next release of MDB Angular. Best Regards, Damian

vangtry pro commented 6 years ago

Thanks for your help Damian i will try your solution and wait for new release to fix it this

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

vangtry

Pro User 2Support score
2Questions 0Answers 0Snippets