Angular app is running fine with ng serve,but error shown when run with ng serve --prod
ERROR in : Invalid provider for the NgModule 'ɵngrx_modules_effects_effects_b in E:/TrainingPortal/node_modules/#ngrx/effects/effects.d.ts' - only instances of Provider and Type are allowed, got: [ɵngrx_modules_effects_effects_f in E:/TrainingPortal/node_modules/#ngrx/effects/effects.d.ts, EffectSources in E:/TrainingPortal/node_modules/#ngrx/effects/effects.d.ts, Actions in E:/TrainingPortal/node_modules/#ngrx/effects/effects.d.ts, ?null?, ...]
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {DatePipe} from '#angular/common';
.
.
import { StoreDevtoolsModule } from '#ngrx/store-devtools';
import { environment } from 'src/environments/environment';
import { appReducer } from './state-management/app.reducer';
import AppEffects from './state-management/app.effects';
import { PdfViewerModule } from 'ng2-pdf-viewer';
.
.
import { PdfReaderComponent } from './shared/components/pdf-reader/pdf-
reader.component';
import { AsyncPipe } from '../../node_modules/#angular/common';
#NgModule({
declarations: [
AppComponent,
.
.
],
imports: [
AngularFireDatabaseModule,
.
.
Ng5SliderModule,
StoreModule.forRoot(appReducer),
EffectsModule.forRoot(AppEffects),
StoreDevtoolsModule.instrument({
maxAge: 25, // Retains last 25 states
logOnly: environment.production // Restrict extension to log-only mode
})
],
providers: [ApiService,DatePipe,MessagingService, AsyncPipe],
bootstrap: [AppComponent]
})
export class AppModule { }
Related
I am trying to view a story of an Angular Material Button. However, in the story, the button does not have any styles. I imported angular material using : ng add angular/material and these ara my files for my component :
This is the html file :
<button mat-button color="primary">Button Material</button>
This is the module of my lib :
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Route } from '#angular/router';
import { ElementComponent } from './element/element.component';
import {MatButtonModule} from '#angular/material/button';
import { MaterialComponent } from './material/material.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
export const plateRoutes: Route[] = [];
#NgModule({
imports: [CommonModule, RouterModule,BrowserAnimationsModule, MatButtonModule],
declarations: [
ElementComponent,
MaterialComponent,
],
})
export class PlateModule {}
This is the component story :
As you can see the style does not apply to the mat button...
In your MaterialComponent you have to import the material module of Button
import { MatButtonModule } from '#angular/material/button';
import { Meta, moduleMetadata, Story } from '#storybook/angular';
import { ButtonComponent } from './button.component';
export default {
title: 'button',
component: ButtonComponent,
decorators: [
moduleMetadata({
imports: [MatButtonModule],
}),
],
} as Meta<ButtonComponent>;
And after this you will need to add the style in the build step of the storybook
{
...
"build-storybook": {
...
"options": {
"styles": [
// the style that you should import
"./node_modules/#angular/material/prebuilt-themes/indigo-pink.css"
]
},
}
...
}
I try to run my NestJs/TypeOrm with Neo4j db but i've got an error :
Nest can't resolve dependencies of the NEO4J_DRIVER (?). Please make sure that the argument NEO4J_OPTIONS at index [0] is available in the Neo4jModule context.
I don't understand where it come from.
This is my app.module
import { Module } from '#nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { Neo4jModule } from 'nest-neo4j'
import { PersonModule } from './person/person.module';
#Module({
imports: [
Neo4jModule.forRootAsync({
scheme: "neo4j+s",
host: "db-sp8xxaunnz13icv892y5.graphenedb.com",
port: 24786,
username: 'neo4j',
password: 'ingrid-ticket-capital-spirit-reform-6035'
}),
PersonModule,
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
This is my person.module.ts
import { Module } from '#nestjs/common';
import { PersonService } from './person.service';
import { PersonController } from './person.controller';
import { TypeOrmModule } from '#nestjs/typeorm';
import { Person } from './person.entity';
import { Neo4jModule } from 'nest-neo4j/dist';
import { PersonRepository } from './person.entityrepository';
#Module({
imports: [
TypeOrmModule.forFeature([PersonRepository]),
,
],
providers: [
PersonService
],
controllers: [
PersonController
]
})
export class PersonModule {}
Thanks for helping me !
I think you missed driver to install.
Try this npm i neo4j-driver.
From my perspective, you're using wrong method, instead of forRootAsync you should use forRoot on Neo4jModule
app.module.ts
Here MatToolbarModule is not working.
The error is
File 'h:/Chale/Angular Projects/CertiStore/node_modules/#angular/material/toolbar/index.d.ts' is not a module.ts(2306)
MatListModule is not working.
The error is
Module '"../../node_modules/#angular/material/list"' has no exported member 'MatListModule'.ts(2305)
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatToolbarModule} from '#angular/material/toolbar';
import { MatListModule } from '#angular/material/list';
#NgModule({
declarations: [
AppComponent,
StudentDashboardComponent,
UploadComponent,
NavBarComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatToolbarModule,
MatListModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
How can I get rid of these errors???
Is it because of the newest version in angular or is their anything I missed?
I am new to angular 2 and what I did is use the angular infinite scroll and load the data when the scroll is scrolled but it prompt some error cannot bind property I illustrated below error :
install angular 2-infinite-scroll
import { NgModule, enableProdMode, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { FormsModule } from '#angular/forms';
import { Routes } from '#angular/router';
import { AppComponent } from './app/app.component';
/* Feature Modules */
import { DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
import { PlanModule } from './plan.module';
import { InfiniteScrollModule } from 'angular2-infinite-scroll';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
enableProdMode();
#NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule,
DatepickerModule.forRoot(),
PlanModule,
InfiniteScrollModule
],
declarations: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
add html page
<div id="activityList" *ngIf="structure.jobplan" infinite-scroll
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="300"
(scrolled)="bindActivitiesOnScroll($event)" >
then i got error :
Uncaught Error: Template parse errors:
Can't bind to 'infiniteScrollDistance' since it isn't a known property of 'div'. ("
<div id="activityList" *ngIf="structure.jobplan" infinite-scroll
[ERROR ->][infiniteScrollDistance]="2"
[infiniteScrollThrottle]="300"
(scrolled)="bindAct"): ng:///ActivityModule/ActivityListComponent.html#5:12
Can't bind to 'infiniteScrollThrottle' since it isn't a known property of 'div'. ("t" *ngIf="structure.jobplan" infinite-scroll
[infiniteScrollDistance]="2"
[ERROR ->][infiniteScrollThrottle]="300"
(scrolled)="bindActivitiesOnScroll($event)" >
"): ng:///ActivityModule/ActivityListComponent.html#6:12
at syntaxError (index.ts:26)
at TemplateParser.parse (index.ts:26)
at JitCompiler._compileTemplate (index.ts:26)
at index.ts:26
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (index.ts:26)
at index.ts:26
at Object.then (index.ts:26)
at JitCompiler._compileModuleAndComponents (index.ts:26)
at JitCompiler.compileModuleAsync (index.ts:26)
i googled but cant find a solution why it does not allowing to bind property,
couldn't find where i made mistake please help me
what i did was to import
import { InfiniteScrollModule } from 'angular2-infinite-scroll';
inside my app.module.ts
I've just started using Angular 2 with Rails 5.1.
When i try to import the angular-drag-and-drop-list in my CategoriesModule, i get an error in my rails application:
Uncaught ReferenceError: angular is not defined
The drag-and-drop file is loaded, and this error is trickered from the bottom of it:
...
})(angular.module('dndLists', []));
What am i doing wrong? I've installed the package with npm and now it's added in my package.json as:
"angular-drag-and-drop-lists": "^2.1.0",
Here is my module:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { Http, HttpModule } from '#angular/http';
import { CategoriesIndexComponent } from './categories_index.component';
import { dndLists } from 'angular-drag-and-drop-lists';
#NgModule({
declarations: [
CategoriesIndexComponent
],
imports: [
dndLists,
BrowserModule,
HttpModule
],
providers: [],
bootstrap: [ CategoriesIndexComponent ]
})
export class CategoriesIndexModule{ }
So Angular is not being loadet before the file?
How can this happen?
I would appreciate any help.