I created a directive to auto-grow a textbox but when i implemented it to the component i'm getting the error.
myAppComps.ts
NPM RUN BUILD
auto-grow.directives.ts
myAppComps.html
package.json:
If you are using RC6 and up - you need to use #NgModule to declare the directives (under 'declarations'):
#NgModule({
imports: [ BrowserModule],
declarations: [ AppComponent,PeopleListComponent ], //<----here
providers: [],
bootstrap: [ AppComponent ]
})
Source
Related
The part after (?) of error message is unclear:
Error: Nest can't resolve dependencies of the MemberController (?).
Please make sure that the argument Object at index [0] is available in
the MemberModule context.
Potential solutions:
If Object is a provider, is it part of the current MemberModule?
If Object is exported from a separate #Module, is that module imported within MemberModule? #Module({
imports: [ /* the Module containing Object */ ] })
Here the incomprehensible moments are:
Object is a broad concept; I can't understand on what it refers
Object at index [0] - at index of what?
MemberModule context - again, the context is a broad concept. Is context the property of some object?
If Object is a provider, is it part of the current MemberModule? - what means the difference between "part of" and "not part of"?
Main module
#NestJS_Module({
imports: [
MemberModule,
TypeOrmModule.forRoot({
type: "postgres",
host: "localhost",
port: 5432,
username: "*******",
password: "*******",
database: "*******",
autoLoadEntities: true,
synchronize: __IS_DEVELOPMENT_BUILDING_MODE__
})
],
controllers: [],
providers: []
})
export default class NestJS_Application {}
Member module
import { Module as NestJS_Module } from "#nestjs/common";
import { TypeOrmModule } from "#nestjs/typeorm";
import MemberModel from "../Data/FromDataBase/Models/Member.model";
import MemberController from "../Controllers/Member.controller";
import MemberTypeORM_Gateway from "../Data/FromDataBase/Gateways/MemberTypeORM_Gateway";
#NestJS_Module({
imports: [ TypeOrmModule.forFeature([ MemberModel ]) ],
controllers: [ MemberController ],
providers: [ MemberTypeORM_Gateway ]
})
export default class MemberModule {}
Member controller
#Controller()
export default class MemberController {
private readonly memberService: MemberGateway;
public constructor(applicationService: MemberGateway) {
this.memberService = applicationService;
}
// ...
}
Because I tried tried the solution for Nest can't resolve dependencies of the PhotoService (?), here must the other solution.
I am building a nestjs app where I want to create a rabbitmq
#Module({
imports: [
ClientsModule.register([
{
name: 'rabbitmq',
transport: Transport.RMQ,
options: {
urls: [
'amqp://guest:guest#rabbitmq',
],
queue: 'my_queue',
},
},
]),
],
controllers: [],
providers: [RabbitMQService],
exports: [RabbitMQService],
})
And service:
#Injectable()
export class RabbitMQService {
constructor(
#Inject('rabbitmq') private client: ClientProxy
) {}
}
The error I am getting is: Nest can't resolve dependencies of the RabbitMQService (?). Please make sure that the argument rabbitmq at index [0] is available in the RabbitMQService context.
As much I am aware, this should work, but nope. Could anyone help?
From the error, it looks like somewhere in your application you have RabbitMQService in an imports array where #Module() classes are supposed to go. Make sure that you keep providers and other #Injectables() to the providers array and keep #Module() and other DynamicModules to the imports array. Common error docs
I get this error
Nest can't resolve dependencies of the WorkspaceController (?). Please make sure that the argument API_SERVICE at index [0] is available in the WorkspaceModule context.
I have this code
app.module.ts
#Module({
imports: [
ClientsModule.register([
{
name: 'API_SERVICE',
transport: Transport.REDIS,
options: {
url: 'redis://localhost:6379'
}
}
]),
WorkspaceModule
],
controllers: [AppController],
providers: [AppService]
})
workspace.module.ts
#Module({
imports: [],
controllers: [WorkspaceController]
})
export class WorkspaceModule {}
workspace.controller.ts
#Controller()
export class WorkspaceController{
constructor(#Inject('API_SERVICE') private client: ClientProxy) {}
#Get("default-languages")
getDefaultLanguages():Observable<string[]> {
return this.client.send<any>({cmd:'getDefaultLanguages'},{});
}
}
You register the ClientsModule inside of AppModule which means that controlelrs and providers in AppModule's scope (i.e. in its own providers and controllers arrays) have access to that provider (#Inject('API_SERVICE')), but once you leave to another module's scope (like WorkspaceModule), that provider is no longer available. If you need that microservice client in several different modules, I'd suggest making a wrapper module for it, that imports and exports the ClientsModule, otherwise, you just need to move the ClientsMOdule.register from AppModule to WorkspaceModule
Example Wrapper
#Module({
imports: [ClientsModule.register(clientsModuleOptions)],
exports: [ClientsModule],
})
export class WrapperClientsModule {}
It's called module re-exporting
The official doc is not clear about how modules in nestjs work and I'm having a problem with a circular dependency. It seems like my module structure is messed up I would like to understand what is wrong with it. The error I'm getting reads:
Nest cannot create the module instance. Often, this is because of a
circular dependency between modules. Use forwardRef() to avoid it.
(Read more: https://docs.nestjs.com/fundamentals/circular-dependency)
Scope [AppModule -> UsersModule -> CategoriesModule]
Here are the import parts of all the modules mentioned in the error message.
AppModule:
UsersModule,
SmsRegistrationModule,
AuthModule,
SubscriptionModule,
EmailModule,
EntriesModule,
CategoriesModule,
AwsModule,
SharedModule
UsersModule:
CategoriesModule
CategoriesModule:
AwsModule,
SharedModule,
The error raised when I added SharedModule to the CategoriesModule module. Seems like I'm missing something on how these modules communicate and thus can't resolve this error.
Your help would be much apprecicted.
EDIT:
SharedModule:
#Module({
providers: [
CacheService,
CodeGenService,
IsUniqueEmail,
BasicFileService,
],
imports: [
CacheModule.registerAsync({
imports: [ConfigModule],
useClass: CacheConfigService,
}),
UsersModule,
AwsModule,
],
exports: [
CacheService,
CodeGenService,
IsUniqueEmail,
BasicFileService,
],
})
export class SharedModule {}
Your SharedModule imports UserModule, so the import chain (or at least the one I'm going to follow here) is AppModule -> UsersModule -> CategoriesModule -> SharedModule -> UsersModule -> CategoriesMOdule -> SharedModule -> .... To get around this, either the SharedModule should not import the UsersModule, or you should forward reference the CategoriesModule from the UserModule, the UserModule from the SharedModule and the SharedModule from the CategoriesModule. This is my first time seeing a circular dependency a few modules deep, so I can't give the exact syntax of how to work with the forwardRef method.
I'm using Angular 4 and angular/material. MdToolbar works fine, but when I add MdSidenav to my app template just like the documentation states Node gives me a ReferenceError: navigator is not defined. anyone experience anything similar?
src/app.component.html
<md-sidenav-container>
<layout-header>
<nav-bar></nav-bar>
<!-- TODO: Create nav component -->
<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
<a routerLink="/lazy">Lazy</a>
<a routerLink="/lazy2">Lazy 2</a>
<a routerLink="/user-profile">User Profile</a>
<a routerLink="/test-rest">Test Rest</a>
<a routerLink="/test-route-params">Test Route Params</a>
</layout-header>
<md-sidenav #sidenav class="sidenav">
<ul>
<li>Search</li>
<li>Start a Group</li>
<li>App Settings</li>
<li>About</li>
<li>Help</li>
<li>Logout</li>
</ul>
</md-sidenav>
<!--primary router outlet: a dynamic component that the router uses to
display-->
<router-outlet></router-outlet>
<!-- TODO: Issue with event not emitting via onShown/onHidden -->
<!-- Ref: https://github.com/valor-software/ngx-bootstrap/issues/1886 -->
<app-dialog (dynamicComponent)="onDialogLoad($event)" (onShown)="test()"
(onHidden)="test2()"></app-dialog>
<!--TODO: example; Delete-->
<button (click)="create()">Create</button>
<simple-notifications [options]="options"></simple-notifications>
<layout-footer></layout-footer>
</md-sidenav-container>
src/app.module.ts
#NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
TransferHttpModule,
NgReduxModule,
MdToolbarModule,
MdSidenavModule,
MdIconModule,
MdCardModule,
MdInputModule,
MdButtonModule,
DialogModule.forRoot([LoginForm]),
SimpleNotificationsModule.forRoot(), // TODO: remove; testing only
RouterModule.forRoot(AppRoutes)
],
providers: [ AuthGuard, DialogService ],
declarations: [
AppComponent,
HomeView,
AboutComponent,
HeaderComponent,
FooterComponent,
NavBarComponent,
LoginForm,
SideNavComponent
],
exports: [ AppComponent ],
bootstrap : [ AppComponent ]
})
export class AppModule {}
NodeJS error
ERROR { ReferenceError: navigator is not defined
at new Platform (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/material/bundles/material.umd.js:3396:36)
at ServerAppModuleInjector.get (ng:///ServerAppModule/module.ngfactory.js:177:61)
at ServerAppModuleInjector.get (ng:///ServerAppModule/module.ngfactory.js:182:120)
at ServerAppModuleInjector.get (ng:///ServerAppModule/module.ngfactory.js:187:108)
at ServerAppModuleInjector.getInternal (ng:///ServerAppModule/module.ngfactory.js:477:56)
at ServerAppModuleInjector.NgModuleInjector.get (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:3563:44)
at resolveDep (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:10931:45)
at createClass (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:10795:147)
at createDirectiveInstance (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:10628:37)
at createViewNodes (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:11978:49)
at callViewAction (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:12348:13)
at execComponentViewsAction (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:12287:13)
at createViewNodes (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:12005:5)
at createRootView (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:11883:5)
at Object.createProdRootView [as createRootView] (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:12461:12)
at ComponentFactory_.create (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:9819:46)
at ComponentFactoryBoundToModule.create (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:3434:29)
at ApplicationRef_.bootstrap (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:5016:57)
at /Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:4803:79
at Array.forEach (native)
at PlatformRef_._moduleDoBootstrap (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:4803:42)
at /Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:4765:27
at ZoneDelegate.invoke (/Users/lsorensen/code/OneUnionV1/node_modules/zone.js/dist/zone-node.js:365:26)
at Object.onInvoke (/Users/lsorensen/code/OneUnionV1/node_modules/#angular/core/bundles/core.umd.js:4132:37)
at ZoneDelegate.invoke (/Users/lsorensen/code/OneUnionV1/node_modules/zone.js/dist/zone-node.js:364:32)
at Zone.run (/Users/lsorensen/code/OneUnionV1/node_modules/zone.js/dist/zone-node.js:125:43)
at /Users/lsorensen/code/OneUnionV1/node_modules/zone.js/dist/zone-node.js:758:57
Just exporting MdSidenavModule from NgModule might do the trick in your case.
I had luck breaking out the Material modules(the ones used across multiple components) into their own module, which cleaned up app.module a bit. Then did an import AND export in app.module, something like this:
material.module.ts
import { MdSidenavModule } from '#angular/material';
.
.
const MATERIAL_MODULES = [
MdSidenavModule,
.
.
];
#NgModule({
imports: MATERIAL_MODULES,
exports: MATERIAL_MODULES
})
export class MaterialModule { }
app.module
import { MaterialModule } from '../material.module';
.
.
#NgModule({
imports: [
MaterialModule,
.
.
],
exports: [ MaterialModule ],
})