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 {}
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 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 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.
I have a lazy load module which needs to expose providers, so I am using the forRoot convention and returning the following code:
#NgModule({
imports: [RouterModule.forChild([
{path: "", component: LazyComponent},
])],
declarations: [LazyComponent],
})
export class LazyModule {
static forRoot() {
return {
ngModule: LazyModule,
providers: [provider]
};
}
}
The problem is when I invoke the forRoot in my app module the lazy load does not work anymore. ( I don't see the separate chunk in my console )
#NgModule({
declarations: [
AppComponent,
HelloComponent
],
imports: [
BrowserModule,
AppRoutingModule,
LazyModule.forRoot() <======== this stops the lazy load module
],
bootstrap: [AppComponent]
})
export class AppModule {
}
From what I learned it should only make the providers singleton, why it does not work?
As of right now, it's not possible to execute a forRoot (or any other configuration static method of this sort) in a module that will load lazily. The problem here is that such a method returns a ModuleWithProviders while loadChildren requires a NgModuleFactory.
I faced a similar issue where I had to lazy load a module with some configurations. So, I came up with this temporary fix.
Lazy Module
#NgModule({
imports: [
RouterModule.forChild([
{path: "", component: LazyComponent},
])],
declarations: [LazyComponent],
})
export class LazyModule {
// considering the function only handle providers
static setDynamicProviders(provider?: any) {
if(LazyModule && LazyModule.__annotations__ && LazyModule.__annotations__[0]){
LazyModule.__annotations__[0].providers.push(provider);
}
return LazyModule;
}
}
Parent Module
const someService = {
provide: 'SOME_TOKEN',
useFactory: (dependecy1) => (//dome something with dependency1)
deps: [SOME_DEPENDENCY_TOKEN]
}
#NgModule({
imports: [
RouterModule.forRoot([
path: 'lazy',
loadChildren: ()=>(import('*your path to lazy module*').then(ref => ref.LazyModule.setDynamicProvider(someService)))
])
]
})
So, I am just modifying the annotations created by #NgModule Decorator. At this stage, Angular does not support lazy loading with static methods that return ModuleWithProviders.
When you import a LazyModule in your AppModule imports array it is not "lazy" anymore. A lazy module should only be referenced in a dedicated RoutingModule.
So if I understood you correctly you would like to share a Service between your LazyModules?
If so remove LazyModule from AppModule and create a SharedModule and move your Service you like to share inside the providers array in SharedModule. Import SharedModule in your AppModule with forRoot and import your SharedModule without forRoot in your LazyModules
Try below code when we define a module is Lazy RouterModule.forChild:
#NgModule({
imports: [RouterModule.forChild([
{path: "", component: LazyComponent},
])],
declarations: [LazyComponent],
})
export class LazyModule { }
But when we load in the parent module, try the below code:
#NgModule({
declarations: [
AppComponent,
HelloComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot([
{
path: '',
loadChildren: './layout/layout.module#LayoutModule',
canActivate: [AuthGuard]
}
]) <======== right way to load lazy module
],
bootstrap: [AppComponent]
})
export class AppModule {
}
Note: FullPath is like './moduleFolder/lazy.module#LayoutModule'
LayoutModule is your exported Module Name
Please let me know
I have an Angular module that I'm loading from an NPM module. How do I load the routes from it? Here is a snippet from my app.module.ts file:
import { HelloWorldModule } from 'hello-world-app-npm/hello-world-app.umd.js'; // The module loaded from NPM
const routes = [
{ path: 'hw', loadChildren: () => HelloWorldModule },
{ path: '', component: AppComponent },
]
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HelloWorldModule,
FormsModule,
HttpModule,
RouterModule.forRoot(routes)
],
exports: [RouterModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here is how I've define my hello world module:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { HelloWorldComponent } from './hello-world.component';
export const routes = [{ path: '', component: HelloWorldComponent }]
#NgModule({
bootstrap: [HelloWorldComponent],
declarations: [
HelloWorldComponent
],
imports: [
RouterModule.forChild(routes)
]
})
export class HelloWorldModule {
}
When I go to "/hw" I get an error in chrome saying
Uncaught (in promise): RangeError: Maximum call stack size exceeded
What am I doing wrong? How do I fix this?
I suspect it could be because of two things.
HelloWorldModule should not be appear inside AppModule import.
bootstrap: [HelloWorldComponent] inside HelloWorldModule is unnecessary.