We Keep Coding

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

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],
})

'<selector>' is not a known element

Before I continue with the question: I have checked the other questions with the same title and I have followed given advices. None of it helped so I decided to open a new question.
I have angular project with one module and multiple components. Dashboard component uses welcome component that is apparently not recognized.
The module has the following code:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FrameComponent } from './frame/frame.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { CardComponent } from './card/card.component';
import { AlertComponent } from './alert/alert.component';
#NgModule({
declarations: [
FrameComponent,
HomeComponent,
CardComponent,
WelcomeComponent,
AlertComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: '',
component: HomeComponent
},
{
path: 'dashboard',
component: DashboardComponent
}
])
],
exports: [CardComponent, WelcomeComponent, AlertComponent],
providers: [],
bootstrap: [FrameComponent]
})
export class AppModule { }
As you can see, I have imported WelcomeComponent, declared it and exported it.
WelcomeComponent contains the following code:
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-welcome',
templateUrl: './welcome.component.html',
styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {
#Input()
message: string;
welcomeMessage: string;
constructor() { }
ngOnInit(): void {
}
}
Here you can see app-welcome as a selector. It appears to be connected correctly. But when I use it in dashboard.component.html as given from the example
<app-welcome [message]="message" [welcomeMessage]="welcomeMessage"></app-welcome>
I get the following error:
Error: src/app/dashboard/dashboard.component.html:18:5 - error NG8001: 'app-welcome' is not a known element:
1. If 'app-welcome' is an Angular component, then verify that it is part of this module.
2. If 'app-welcome' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
Other errors are related to welcome and welcomeMessage not existing since component is not recognized.
I tried restarting server, running it as --prod. I tried everything that I found. Does anyone know what could this cause?

Dashboard component is not declared in your AppModule, that's the problem.
Also you don't need to export the components in that case, just declare them.

Angular 2 provider is not accessible in components

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';

how to pass input parameters to an angular 2 component from index.html file

I need to set input, configuration parameters, to a component that is not mentioned in index.html.
I can see how to do that for component selectors that are included in index.html.
How can I do from index.html?

You can have your configuration in your Main module class as below
import {Component, NgModule} from '#angular/core'
import {BrowserModule} from '#angular/platform-browser'
#Component({
selector: 'my-app',
template: `
<div>
<h2>{{name}} Sample</h2>
{{myConfiguration | json}}
</div>
`,
})
export class App {
name:string;
myConfiguration:any=myConfiguration;
constructor() {
console.log(myConfiguration);
this.name = 'Global Configuration'
}
}
#NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App]
})
export class AppModule {
var myConfiguration={id:1,devmode:true};
}
LIVE DEMO

Angular2: Get access to entryComponents property of Module inside a Component

In my Angular2 module I've specified an array of components in the entryComponents property like this:
#NgModule({
// ...
entryComponents: [ComponentA, ComponentB]
// ...
})
export class AppModule { }
In a component I want to access this list of entryComponents. Something like this:
import { Component } from '#angular/core';
#Component({
selector: 'my-selector',
// ...
})
export class MyComponent{
// Something like this:
constructor(private moduleRef: ModuleRef){
console.log(moduleRef.entryComponents);
}
}
Is this possible in any way? I do not need an explicit reference to the module itself but only on the entryComponents list.
Thanks for your help!