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,
Related
I have created some modules here but i am facing an error
Auth module
import { Module } from "#nestjs/common";
import { AuthService } from "./auth.service";
import { LocalStrategy } from "./local.strategy";
import { JwtStrategy } from "./jwt.strategy";
import { UsersModule } from "../users/users.module";
import { PassportModule } from "#nestjs/passport";
import { JwtModule, JwtService } from "#nestjs/jwt";
import { jwtConstants } from "./constants";
import { ConfigModule, ConfigService } from "#nestjs/config";
#Module({
imports: [
UsersModule,
PassportModule,
JwtModule.register({
secret: jwtConstants.secret,
signOptions: { expiresIn: "1d" },
}),
],
providers: [AuthService, LocalStrategy, JwtStrategy],
exports: [AuthService, LocalStrategy, JwtStrategy],
})
export class AuthModule {}
Email module
import { Module } from "#nestjs/common";
import EmailService from "./email.service";
import { ConfigModule } from "#nestjs/config";
import { EmailConfirmationService } from "./emailConfirmation.service";
import { EmailConfirmationController } from "./emailConfirmation.controller";
import { EmailConfirmationGuard } from "./guards/emailConfirmation.guard";
import { AuthModule } from "src/auth/auth.module";
import { UsersModule } from "src/users/users.module";
#Module({
imports: [ConfigModule,AuthModule,UsersModule],
providers: [EmailService,EmailConfirmationService,EmailConfirmationGuard],
exports: [EmailConfirmationService,EmailConfirmationGuard],
controllers : [EmailConfirmationController]
})
export class EmailModule {}
User module
import { Module } from "#nestjs/common";
import { UsersService } from "./users.service";
import { UsersController } from "./users.controller";
import { MongooseModule } from "#nestjs/mongoose";
import { UserSchema } from "./entities/user.entity";
import { EmailModule } from "src/email/email.module";
#Module({
imports: [MongooseModule.forFeature([{ name: "User", schema: UserSchema }]),EmailModule],
providers: [UsersService],
exports: [UsersService],
controllers: [UsersController],
})
export class UsersModule {}
Error I am facing
[Nest] 9200 - 09/26/2021, 3:43:15 PM ERROR [ExceptionHandler] Nest cannot create the EmailModule instance.
The module at index [1] of the EmailModule "imports" array is undefined.
Potential causes:
- A circular dependency between modules. Use forwardRef() to avoid it. Read more: https://docs.nestjs.com/fundamentals/circular-dependency
- The module at index [1] is of type "undefined". Check your import statements and the type of the module.
Scope [AppModule -> AuthModule -> UsersModule]
Error: Nest cannot create the EmailModule instance.
The module at index [1] of the EmailModule "imports" array is undefined.
Potential causes:
- A circular dependency between modules. Use forwardRef() to avoid it. Read more: https://docs.nestjs.com/fundamentals/circular-dependency
- The module at index [1] is of type "undefined". Check your import statements and the type of the module.
What am i missing ?
EmailConfirmationService is used in UsersController
UserService is used in EmailConfirmationService
You have JwtService listed in your imports. Imports are for modules only.
Share the code from JwtService as well so that we can make sure there are no other issues.
Update:
If the EmailModule wants to use the exports from the AuthModule (JwtService in this case), it must add the AuthModule to its imports array.
This is the entire premise of the DI system, modules share things between eachother by placing the thing they intend to share in the exports array. After that, any module can add the Source module to its imports array to gain access to the things that the source exported. The error message literally spells it out for you:
If JwtService is exported from a separate #Module, is that module imported within EmailModule? #Module({ imports: [ /* the Module containing JwtService */ ] })
In order to use EmailService in you UserController and also UserService is used in EmailConfirmationService then you have to do something like this in UserModule:
imports: [forwardRef(() => EmailModule)]
and inside the EmailModule do the same thing for the UserModule:
imports: [forwardRef(() => UserModule)]
Rest of the imports should be without the forwardRef(()=>)
you can read more about circular dependency here https://docs.nestjs.com/fundamentals/circular-dependency
Make sure your target in tsconfig.json is es6.
I have created a shared module to modularize my app so in case i want to use for example a Material component i can have it in other module by import it, the problem is when i do that give this kind of error If 'mat-menu' is an Angular component, then verify that it is part of this module. How can i solve it?.In the past without the shared module it worked perfectly but now no, and Its required to be with the shared module because its for homework
Below i will let my three modules
App Module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//My imports
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { UsersDashboardComponent } from './components/users-dashboard/users-dashboard.component';
import { AdminDashboardComponent } from './components/admin-dashboard/admin-dashboard.component';
import { RouterModule } from '#angular/router';
import { HttpClientModule} from '#angular/common/http';
import { HomeAdminComponent } from './auth/home-admin/home-admin.component';
import { HomeComponent } from './auth/home/home.component';
import { CoreModule } from './../app/core/core.module';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AdminDashboardComponent,
UsersDashboardComponent,
HomeAdminComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule,
BrowserAnimationsModule,
RouterModule,
HttpClientModule,
CoreModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Auth Module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { SharedModule } from '../shared/shared.module';
import { AuthRoutingModule } from './auth-routing.module';
import { HomeComponent } from 'src/app/auth/home/home.component';
import { HomeAdminComponent } from 'src/app/auth/home-admin/home-admin.component';
#NgModule({
declarations: [HomeComponent,HomeAdminComponent],
imports: [
CommonModule,
AuthRoutingModule,
SharedModule,
],
})
export class AuthModule { }
Shared module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { MaterialModule } from 'src/app/shared/material/material.module';
import { ReactiveFormsModule } from '#angular/forms';
#NgModule({
declarations: [],
imports: [
CommonModule,
MaterialModule,
ReactiveFormsModule
],
exports: [
MaterialModule,
ReactiveFormsModule
]
})
export class SharedModule { }
To avoid this problem you need to Add SharedModule as an import in all the FeatureModules where your components reside as declarations. Same like you have done in AuthModule. And also all the material modules imported into the MaterialModule should be exported in exports.
I solve it putting the SharedModule into the imports of the AppModule
I would recommend to create your own custom Components build on top whatever module you are using (in your case it is angular material) inside the shared module and then export these components and import your shared module in any other modules then, use these components, this will help you in the future if you decided to use another library instead of angular material or if you want to build some custom design.
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';
I am doing the Angular2 Heroes Tutorial:
https://angular.io/docs/ts/latest/tutorial/toh-pt1.html
in plain Javascript (not Typescript) and i am having trouble to Import the Forms Module as mentioned: (description is only for Typescript):
Before we can use two-way data binding for form inputs, we need to import the FormsModule package in our Angular module. We add it to the NgModule decorator's imports array. This array contains the list of external modules used by our application.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
#NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
When i am adding the Forms module to my app.module.js import array, it fails to find the module:
zone.js:129 Uncaught Error: Unexpected value 'undefined' imported by the module 'class2'
Here is my app.module.js:
(function(app) {
app.AppModule =
ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule, ng.common.FORM_DIRECTIVES],
declarations: [ app.AppComponent],
bootstrap: [ app.AppComponent ]
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
in my node_modules folder the Forms module exists. If i remove "ng.common.FORM_DIRECTIVES" from the imports array, no error is thrown.
The Content of console.dir(ng) is:
Object
common:Object
compiler:Object
core:Object
coreTokens:Object
platformBrowser:Object
platformBrowserDynamic:Object
probe
:
inspectNativeElement(element /** TODO #9100 */)
__proto__:Object
The content of console.dir(ng.forms) is:
undefined
I am sorry, i found the error. As so often it was nothing having to do with typescript or angular, i just had to add the script tag in the index.html file to load the forms.umd.js:
<script src="../node_modules/#angular/forms/bundles/forms.umd.js"></script>
now i can import the Forms Module with the following code and i can use the ngModule functionality:
ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
declarations: [ app.AppComponent],
bootstrap: [ app.AppComponent ]
})
Try using import { FORM_DIRECTIVES } from 'angular2/common';
Source: Angular 2 two way binding using ngModel is not working
EDIT:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FORM_DIRECTIVES } from 'angular2/common';
import { AppComponent } from './app.component';
#NgModule({
imports: [
BrowserModule,
FORM_DIRECTIVES
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
If this doesn't work, post the console.dir(ng); again( with this code in use ).
I am trying to find out the reason for the following error.
app/src/app.module.ts(13,33): error TS2307: Cannot find module 'src/components/test/test.module
I am using Angular2 RC5 and created a feature module and imported it in app.module.ts file. I am using lazy loading of the module with the router.
app.module.ts looks like this
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { routing } from './app.routes';
/* App Root */
import { AppComponent } from './app.component';
/* Feature module */
import { TestModule } from 'src/components/test/test.module';
#NgModule({
imports: [ BrowserModule, routing ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: []
})
export class AppModule { }
test.module.ts looks like this
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { TestComponent } from './test.component';
import { routing } from './test.routes';
#NgModule({
imports: [ CommonModule, routing ],
declarations: [ TestComponent ],
providers: []
})
export default class TestModule { }
app.routes.ts looks like
import { Routes, RouterModule } from '#angular/router';
export const routes: Routes = [
{
path: '',
redirectTo: '/test',
pathMatch: 'full'
},
{
path: 'test',
loadChildren: 'src/components/test/test.module'
}
];
export const routing = RouterModule.forRoot(routes);
test.routes.ts looks like
import { Routes, RouterModule } from '#angular/router';
import { TestComponent } from './test.component';
const routes: Routes = [
{ path: '',
component: TestComponent }
];
export const routing = RouterModule.forChild(routes);
Above error appears when I try to compile test.module.ts file with default keyword. If I remove it, error disappears. but of course, in that case, I won't be able to use lazy loading for feature module.
Does anyone come across this?
I see multiple errors in your code.
You are importing wrong module in your AppModule.
Your export class name of test.module.ts is TestModule, but you are importing DashboardModule in your AppModule.
Instead of:
import { DashboardModule } from 'src/components/test/test.module';
You should import:
import { TestModule } from 'src/components/test/test.module';
And, of course, you need to add TestModule to your AppModule imports.