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
prime.module.ts:
import {
ModalModule,
WavesModule,
InputsModule,
ButtonsModule,
CheckboxModule,
} from 'angular-bootstrap-md';
…
#NgModule ({
...
imports: [ModalModule.forRoot(),],
...
})
https://mdbootstrap.com/docs/b5/angular/pro/installation/
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],
})
Related
I can't register my component. If I set
<app-actions-button></app-actions-button>
This is work good.
But if I set
<app-actions-button (send)="some($event)"></app-actions-button>
i got error:
ERROR in src/app/test.component.html:162:1 - error NG8001: 'app-actions-button' is not a known element:
If 'app-actions-button' is an Angular component, then verify that it is part of this module.
If 'app-actions-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
Check my module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ActionsButtonRoutingModule } from '../actions-button/actions-button-routing.module';
import { ActionsButtonComponent } from './actions-button.component';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { ModalModule } from "ngx-bootstrap/modal";
#NgModule({
declarations: [ActionsButtonComponent],
imports: [
CommonModule,
ActionsButtonRoutingModule,
FormsModule, ReactiveFormsModule,
ActionsButtonComponent
],
exports: [ActionsButtonComponent],
})
export class ActionsButtonModule { }
Your component app-actions-button dose not have an #Output property and it fails to compile.
You can read more on how to implement it here in the #Output Angular docs
I’m using Angular 8 with ASP.NET Core 2.2.
I have two pages Index.cshtml and Job newlist.cshtml
In page index.cshtml I use tag <app-job-newlist></app-job-newlist>.
Then in page newlist.cshtml I use tag <app-jobpicload></app-jobpicload>
When loading page newlist.cshtml, I see error:
ERROR Error: "The selector "app-job-newlist" did not match any elements"
this my code app-modules.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { AppRoutingModule } from './app-routing.module';
//import { CommnetComponent } from './commnet/commnet.component';
import { CommentComponent } from './comment/comment.component';
import { JobListComponent } from './job-list/job-list.component';
import { JobServiceService } from './services/job-service.service';
import { JobLoadFileComponent } from './job-load-file/job-load-file.component';
#NgModule({
declarations: [
CommentComponent,
JobListComponent,
JobLoadFileComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [JobServiceService],
bootstrap: [ JobListComponent]
})
export class AppModule { }
Explain:
Every component you want to use in your angular app have to explicit
import in correct module or else you will see that error because
angular cant find selector tag for that component
Fix
Make sure to import your app-job-newlist to your module
I read all presented questions stack overflow showed me, none of which solved my issue.
I'm new to Angular and I have a couple Modules and Components. I want a child module to import a component. Then have a parent module import the child module and create it's component. And yes, I have exported the Component in the child module.
I want it like so:
Parent Module
Child Module
Component (Toy)
But I get the error:
ERROR in parent/parent.module.ts(8,5): error TS2304: Cannot find name 'ToyComponent'.
I do not understand why this is not working. I would appreciate an explanation over some sample code. Thanks!
This is the relevant code:
Toy Component
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-toy',
templateUrl: './toy.component.html',
styleUrls: ['./toy.component.css']
})
export class ToyComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Toy Component HTML
<p>
Awesome toy!
</p>
Child Module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ToyComponent } from './toy/toy.component';
import { ChildComponent } from './child.component';
#NgModule({
declarations: [
ToyComponent,
ChildComponent
],
imports: [
CommonModule
],
exports: [
ToyComponent
]
})
export class ChildModule { }
Parent Module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ChildModule } from './child/child.module';
import { ParentComponent } from './parent.component';
#NgModule({
declarations: [
ToyComponent,
ParentComponent
],
imports: [
ChildModule,
CommonModule
],
exports: [
]
})
export class ParentModule { }
Parent Component HTML
<p>
parent works! Child: Toy: <app-toy></app-toy>
</p>
Fix:
1. Remove ToyComponent from the declarations and exports of ParentModule.
2. Declare ToyComponent in your Child Module and export it.
3. Add ChildModule as an import to your parent module.
Reason:
Your ToyComponent is declared under your ChildModule. Since you use ToyComponent in your ParentModule, you need to export your ToyComponent from your ChildModule. And import the ChildModule in your ParentModule.
Problem
It looks like that the import statement for ToyComponent is missing in ParentModule which causes the error.
Fix
Since ToyComponent is added to exports in ChildModule it must
not be referenced in ParentModule
Remove ToyComponent from the
declarations-list in ParentModule
The ToyComponent is known to the ParentModule because ChildModule is added to the imports-List.
I'm trying to make a shared module, but it's don't want to work somehow.
The shared module looks like this:
import { ModuleWithProviders, NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { SharedMetaModule } from './shared-meta';
import { ApplicationState } from './state/application-state';
import { MilitaryTimePipe } from './pipes/military-time-pipe';
import { KeysPipe } from './pipes/object-pipe';
import { GirlsClass } from './advertisers/girls';
#NgModule({
imports: [CommonModule],
declarations: [
KeysPipe,
MilitaryTimePipe
],
exports: [
SharedMetaModule,
KeysPipe,
MilitaryTimePipe
],
providers: [ApplicationState]
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
return { ngModule: SharedModule };
}
}
I have an app.module.ts like this:
import { SharedModule } from '#shared/shared.module';
#NgModule({
imports: [
...
SharedModule.forRoot(),
Then I have a profile-gallery.module.ts where a pipe from the shared module would be used.
If I don't import the shared module in the profile-gallery module I got this error:
The pipe 'keys' could not be found.
If I import the shared module to the profile-gallery module I got this error:
MetaModule already loaded; import in root module only.
How could work the shared module in this situation?
The purpose of a Shared module is to import it in all the required modules, more than once. So there is no need for the forRoot method that makes sure it's imported only once.
Remove the forRoot method entirely and import the module where needed:
import { SharedModule } from '#shared/shared.module';
#NgModule({
imports: [
...
SharedModule,
I am new on angular 2. I was following the legacy quick-start application, Tour of Heroes.
I created services as mentioned in the application.
I have a service HeroService. Which is used to pull all the heroes data.
I have included the HeroService at the app.module file as provider to be able to access it through out the application for all application.
My app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{
path: 'heroes',
component: HeroesComponent
}
])
],
declarations: [ AppComponent, HeroesComponent, HeroDetailComponent ],
providers: [ HeroService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
And my Component File where I want to Access the HeroService to get data is:
export class HeroesComponent implements OnInit {
constructor(private heroService: HeroService) { }
}
The problem is I am getting an error like this, when i build the project :
Cannot find name 'HeroService'.
I have followed all the steps correctly. If I import the HeroService in my HeroesComponent, it seems to work. But fails when not imported.
Am I missing some step. As far as I understood declaring the provider on app.module will register it to use throughout the application/components without need of importing it each time.
Please correct me If I am wrong somewhere.
You need to import inside the component as well
import { HeroService } from './hero.service';