I have been trying to create my own datatable, but facing issues.
So my app structure is like so:
where hkdt in my custom datatable module, I want to use this in my app module so that it is accessible everywhere.
hkdt.component.ts is:
import { Component } from '#angular/core';
#Component({
selector: 'hkdt',
exportAs: "hkdt",
templateUrl: './hkdt.html',
styleUrls: ['./hkdt.css']
})
export class HkdtComponent {
}
hkdt.module.ts is:
import { CommonModule } from "#angular/common";
import { NgModule } from "#angular/core";
import {HkdtComponent} from "./hkdt.component";
#NgModule({
imports: [CommonModule],
declarations: [HkdtComponent],
exports: [HkdtComponent]
})
export class HkdtModule {
}
index.ts is:
export * from './hkdt.component';
export * from './hkdt.module';
and I want to use it in my app.module.ts like so:
In my imports array of app.module.ts I import HkdtModule from import {HkdtModule} from "./core/hkdt";
and using it in some module like so:
<hkdt></hkdt>
below is my app.module.ts:
import {HkdtModule} from "./core/hkdt";
#NgModule({
declarations: [
AppComponent,
SignInComponent,
HomeComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
AppRoutingModule,
BrowserAnimationsModule,
HkdtModule
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
but I get a console error:
Can anybody help me resolve me this problem.
Note: I do not want to import the component in the module and use it because I want to later publish my hkdt as a plugin and I want to make it work independently in a pluggable manner.
Related
i have 2 libs.
1 - ui-templates
2 - ui-components
To import ui-templates from app, im doing that:
import {UiTemplatesModule} from '#growerdiaries-web/ui-templates';
import { AppComponent } from './app.component';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, UiTemplatesModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
And everything works fine.
But now, i want to use some components of ui-components into ui-templates.
To do that, on ui-templates module, i created this code:
//if i use #growerdiaries-web/ui-components dosent works. Dosent find the reference.
import {UiComponentsModule} from '../../../ui-components/src/lib/ui-components.module';
import { LoginTemplateComponent } from './login-template/login-template.component';
#NgModule({
imports: [CommonModule, UiComponentsModule],
declarations: [
LoginTemplateComponent
],
exports: [
LoginTemplateComponent
],
})
export class UiTemplatesModule {}
Why module cant find the reference from ui-components library direcly? Im doing something wrong?
ui-components module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ButtonComponent } from './button/button.component';
import { InputComponent } from './input/input.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
#NgModule({
imports: [CommonModule],
declarations: [
ButtonComponent,
InputComponent,
HeaderComponent,
FooterComponent
],
exports: [
ButtonComponent,
InputComponent,
HeaderComponent,
FooterComponent
],
})
export class UiComponentsModule {}
It was necessary to clear the visual studio code cache. Resolved.
I have a structure like this:
home - page
home2 - page
test-component - component
I need to be able to use the component(<app-test-component></app-test-component>) on both pages.
If I just use the tag:
ERROR Error: Uncaught (in promise): Error: Template parse errors:
'app-test-component' is not a known element:
If I just import (import {TestComponentComponent} from '../test-component/test-component.component') into home.module.ts and put it in the module import:
core.js:9110 ERROR Error: Uncaught (in promise): Error: Unexpected
directive 'TestComponentComponent' imported by the module
'HomePageModule'. Please add a #NgModule annotation.
A similar error if added to declarations.
Git.
How to import a component on both pages and use?
There are few changes that you should make:
You should not import component as I can see in the code.
Rearrange the project structure, and move reusable component such as TestComponent into a shared component. To give you an example, I'll give below example where I have created shared module names as TestModule
/app
/home
-home.component.ts
-home.module.ts
/test
-test.component.ts
-test.module.ts
-app.component.ts
-app.module.ts
app.module.ts
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HomeModule, RouterModule.forRoot([{ path: '', component: HomeComponent }])],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
test.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { TestComponent } from './test.component';
#NgModule({
declarations: [TestComponent],
exports: [TestComponent],
imports: [CommonModule],
})
export class TestModule {}
home.module.ts
#NgModule({
declarations: [HomeComponent],
exports: [HomeComponent],
imports: [
CommonModule,
TestModule
]
})
export class HomeModule { }
This set of project structure would certainly help you to reuse test.module features. Let me know if you need more code.
Declare TestComponentComponent only in home.module.
home.module.ts
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
])
],
declarations: [HomePage, TestComponentComponent]
})
export class HomePageModule {}
app.module.ts
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
I have an ionic app and created a custom component for ion-navbar but, how could I use this component in all of my pages? If I declare him on all the pages i get this error
Here's my Github if u want https://github.com/tiagosilveiraa/PManager
You can create a shared module and include that new shared module as an import for the page modules that need the header:
shared.module.ts
import { NgModule } from '#angular/core';
import {CommonModule} from '#angular/common';
import {HeaderComponent} from './header/header.component';
import {IonicModule} from '#ionic/angular';
#NgModule({
imports: [
CommonModule,
IonicModule
],
declarations: [HeaderComponent],
exports: [HeaderComponent]
})
export class SharedModule {}
Then for the home.module.ts
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
SharedModule,
RouterModule.forChild(routes),
],
declarations: [HomePage]
})
export class HomePageModule {}
I've created a stackblitz where I'm trying to instantiate the HelloComponent dynamically using the ReflexiveInjector and I have the HelloComponent listed in the app modules entryComponents array.
However I'm still getting:
Component HelloComponent is not part of any NgModule or the module has not been imported into your module.
Thoughts?
Added a link to this SO in this feature request asking for virtual / logical modules. Please thumbs it up if you like the suggestion.
You should also declare the HelloComponent in your declarations array of your module. Read the official docs about entrycomponents.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
#NgModule({
imports: [ BrowserModule, FormsModule ],
entryComponents: [HelloComponent],
declarations: [ AppComponent, HelloComponent ], // declare here
bootstrap: [ AppComponent ]
})
export class AppModule { }
I have my main module like this, where I import the basic Libraries :
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { MaterialModule } from '#angular/material';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { MapModule } from './map/map.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MapModule,
MaterialModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
My question is when I create a new Module within the app i.e Map Module do I need to reimport all those libraries to that Module. I was under the impression that if I import the libraries on the module it would work under child modules.
But in my Map Module I am getting errors like.
Can't bind to 'ngClass' since it isn't a known property of 'div'.
My Current MapModule looks like
import { NgModule } from '#angular/core';
import { MapComponent } from './map.component';
import { MapMenuComponent } from './map-menu/map-menu.component';
import { MapControlsComponent } from './map-controls/map-controls.component';
import { MapService } from './map.service';
#NgModule({
imports: [],
exports: [],
declarations: [MapMenuComponent, MapControlsComponent, MapComponent],
providers: [MapService],
})
export class MapModule { }
Do I need to reimport the MaterialModule, Forms etc into module again for the components in this module to work ?
You only need to reimport modules with declarations, i.e. modules that define new components, directives and pipes. Modules that register providers don't need to be imported.
In this list:
imports: [
BrowserModule,
FormsModule,
HttpModule,
MapModule,
MaterialModule.forRoot()
],
FormsModule modules need to be imported, by HttpModule need not. BrowserModule re-exports CommonModule, so in the other modules you would probably want to import CommonModule, not BrowserModule to get built-in directives like NgClass. By importing CommonModule you will not have this error:
Can't bind to 'ngClass' since it isn't a known property of 'div'.
You can use SharedModule. All modules those are used in multiple modules
sharedModule example
import { NgModule } from '#angular/core';
import { anyService} from './any.service';
#NgModule({
providers: [anyService]
})
export class SharedModule {}
Now you can import this shared module in any modules in which want to use this module