Skip to content

Put module into component, angular

I need put a mdbModal into a component, but the component does’nt have a module.ts archive, when try this movement I get:

ERROR Error: Uncaught (in promise): Error: Export of name 'mdbModal' not found!
Error: Export of name 'mdbModal' not found!

I dont have examples in my collective project, What is the way of can import a module inside a component?

I’m relatively new on angular.

<div
  mdbModal
  #basicModal="mdbModal"
  class="modal right modal-scroll"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myBasicModalLabel"
  aria-hidden="true"
  >
  ...
</div>

This is my parent module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  ModalModule,
  WavesModule,
  InputsModule,
  ButtonsModule,
  CheckboxModule,
} from 'angular-bootstrap-md';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from '../shared/shared.module';
import { NgxPaginationModule } from 'ngx-pagination';

import { PrimeDetailRoutingModule } from './prime-detail-routing.module';
import { PrimeDetailComponent } from './prime-detail.component';


@NgModule({
  declarations: [PrimeDetailComponent],
  imports: [
    CommonModule,
    PrimeDetailRoutingModule,
    SharedModule,
    NgxPaginationModule,
    ModalModule,
    WavesModule,
    InputsModule,
    ButtonsModule,
    CheckboxModule,
    FormsModule,
  ]
})
export class PrimeDetailModule { }

I dont have problems if I import the mdbModal inside a parent module, but yes if I need put it in the component in the absence of module.ts

Answer

The solution for my is, you can put a Component with a Module if the component its inside of the Module Father, example:

  • App
    • MySite
      • Components <—
      • my-site.component.ts
      • my-site.module.ts
      • etc

You can put the new component in this directory <— thats belong to MySite, you can use the next sentence in your cmd box to create:

ng generate component MySite/components/first-component --module app/MySite

After this, in the father module.ts you will see something like this:

import { FirstComponentComponent } from './components/first-component/first-component.component';

@NgModule({
  declarations: [FirstComponentComponent],
})