In our application we are using Angular(version 10) and ngrx(version 7). My app was running fine till I changed the tsconfig. I changed the below property:
"module": "commonjs"
to
"module": "es2020"
From then I started getting the below error:
Uncaught ReferenceError: Cannot access 'jobTreeReducers' before initialization
Following is the folder structure for the error raised module
The job-tree-store.module.ts is
import { NgModule } from "#angular/core";
import { StoreModule } from "#ngrx/store";
import { EffectsModule } from "#ngrx/effects";
import { CommonModule } from '#angular/common';
import { jobTreeReducers, JobTreeEffects } from "./index";
#NgModule({
imports: [
CommonModule,
StoreModule.forFeature('jobTree', jobTreeReducers),
EffectsModule.forFeature([JobTreeEffects]),
]
})
export class JobTreeStoreModule {}
I imported that and using in the App Module.
Please help me solve this issue.
Thanks...
Related
I'm developing an application in angular (Angular CLI: 13.1.4) and when integrating Firebase, I'm getting some export errors (given below), any one please suggest me an solution
app.module.js
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpClientModule } from '#angular/common/http';
import { MatToolbarModule } from '#angular/material/toolbar'
import { MatIconModule } from '#angular/material/icon'
import { MatButtonModule } from '#angular/material/button';
import { AngularFireModule } from "#angular/fire/compat";
import { AngularFireAuthModule } from "#angular/fire/compat/auth";
import { AngularFireStorageModule } from "#angular/fire/compat/storage";
import { AngularFirestoreModule } from "#angular/fire/compat/firestore";
import { AngularFireDatabaseModule } from "#angular/fire/compat/database";
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
IndexComponent,
PlaceDetailComponent,
PlacesComponent,
AdminIndexComponent,
AdminPlaceComponent,
],
imports: [
AngularFireModule.initializeApp(environment.config),
AngularFireAuthModule,
AngularFirestoreModule,
AngularFireStorageModule,
AngularFireDatabaseModule,
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
MatToolbarModule,
MatIconModule,
MatButtonModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
package.json
Error
./node_modules/#angular/fire/fesm2015/angular-fire-app-check.js:106:27-37 - Error: export 'getToken' (imported as 'getToken$1') was not found in 'firebase/app-check' (module has no exports)
./node_modules/#angular/fire/fesm2015/angular-fire-app-check.js:107:37-57 - Error: export 'initializeAppCheck' (imported as 'initializeAppCheck$1') was
not found in 'firebase/app-check' (module has no exports)
./node_modules/#angular/fire/fesm2015/angular-fire-app-check.js:108:33-49 - Error: export 'onTokenChanged' (imported as 'onTokenChanged$1') was not found in 'firebase/app-check' (module has no exports)
./node_modules/#angular/fire/fesm2015/angular-fire-app-check.js:109:45-73 - Error: export 'setTokenAutoRefreshEnabled' (imported as 'setTokenAutoRefreshEnabled$1') was not found in 'firebase/app-check' (module has no exports)
./node_modules/#angular/fire/fesm2015/angular-fire.js:16:98-109 - Error: export 'isSupported' (imported as 'isSupported') was not found in 'firebase/analytics' (module has no exports)
./node_modules/#angular/fire/fesm2015/angular-fire.js:17:98-111 - Error: export 'isSupported' (imported as 'isSupported$1') was not found in 'firebase/messaging' (module has no exports)
./node_modules/#angular/fire/fesm2015/angular-fire.js:18:104-117 - Error: export 'isSupported' (imported as 'isSupported$2') was not found in 'firebase/remote-config' (module has no exports)
× Failed to compile.
I ran npm install on the terminal and the issue goes away. There may be some deprecated libraries that are causing this. For me, angularfire2 caused this issue.
I have problems with a PrimeNG chart.
At the beginning my problem was with in the html with the [options], I read that it was better if I downloaded the 2.9.4 chart.js and I did it, now I have the error:
Module not found: Error: Can't resolve 'chart.js/auto' in 'D:\Proyectos trabajo\Plots\node_modules\primeng\fesm2015'
I read that it is related with the way I have to import the v2, but I dont understand the right way, I am trying to use this:
import Chart from 'chart.js';
but I have one error in 'chart.js', well here is my code:
the module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { PlotsRoutingModule } from './barChart-routing.module';
import { BarPageComponent } from './pages/bar-page/bar-page.component';
import { BarChartComponent } from './components/bar-chart/bar-chart.component';
import { BarFormComponent } from './components/bar-form/bar-form.component';
import {ChartModule} from 'primeng/chart'; //IS HERE WHERE THE PROBLEM IS??? I tryed to change it for import Chart from 'chart.js' but I have an error
#NgModule({
declarations: [
BarPageComponent,
BarChartComponent,
BarFormComponent
],
imports: [
CommonModule,
PlotsRoutingModule,
ChartModule
]
})
export class PlotsModule { }
the component imports:
import { Component, OnInit } from '#angular/core';
import { Subscription } from 'rxjs';
import { AppConfig } from 'src/app/plots/interfaces/interfaces';
import { AppConfigServiceService } from 'src/app/plots/services/app-config-service.service';
the angular.json
"scripts": [
"./node_modules/chart.js/dist/Chart.js"
]
thank you for your help
It depends on the version of angular you are using. Chart.js was updated to 3.3.2 in primeng 12.1.0
Follow this link for the migration guide
https://github.com/primefaces/primeng/wiki/Migration-Guide#1210
If you have any customized classes which use chart.js you may need to have a look at this too https://www.chartjs.org/docs/latest/migration/v3-migration.html
how to add FusionChartsModule in app.module using angular 8 version.Below is my code:
*error:Unexpected value 'FusionChartsModule' imported by the module 'AppModule'. Please
add a #NgModule annotation. *,Getting this error in console code is compiling
successfully
these are my version details
Angular CLI: 8.3.29
Node: 12.16.1
OS: win32 x64
Angular: 8.2.14
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FusioncharttestComponent } from './fusioncharttest/fusioncharttest.component';
import { FusionChartsModule } from 'angular-fusioncharts';
// Import FusionCharts library and chart modules
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FusionMaps from "fusionmaps/fusioncharts.maps";
import * as World from 'fusioncharts/maps/fusioncharts.world';
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, Charts, FusionMaps, FusionTheme, World);
#NgModule({
declarations: [
AppComponent,
FusioncharttestComponent
],
imports: [
BrowserModule,
FusionChartsModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I faced the same issue.
I deleted the node modules & package-lock.json file and then install angular-fusioncharts: 3.0.4
Do not include ^ token in the version number
I can't register my component. If I set
<app-actions-button></app-actions-button>
This is work good.
But if I set
<app-actions-button (send)="some($event)"></app-actions-button>
i got error:
ERROR in src/app/test.component.html:162:1 - error NG8001: 'app-actions-button' is not a known element:
If 'app-actions-button' is an Angular component, then verify that it is part of this module.
If 'app-actions-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
Check my module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ActionsButtonRoutingModule } from '../actions-button/actions-button-routing.module';
import { ActionsButtonComponent } from './actions-button.component';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { ModalModule } from "ngx-bootstrap/modal";
#NgModule({
declarations: [ActionsButtonComponent],
imports: [
CommonModule,
ActionsButtonRoutingModule,
FormsModule, ReactiveFormsModule,
ActionsButtonComponent
],
exports: [ActionsButtonComponent],
})
export class ActionsButtonModule { }
Your component app-actions-button dose not have an #Output property and it fails to compile.
You can read more on how to implement it here in the #Output Angular docs
I am trying a simple angular project with Django. I have a working Django project. I am getting this error during compiling.
[0] app/app.module.ts(1,10): error TS2305: Module '"/user/blah-blah/angular/node_modules/#angular/core/index"' has no exported member 'NgModule'.
[0] app/app.module.ts(2,10): error TS2305: Module '"/user/blah-blah/angular/node_modules/#angular/platform-browser/index"' has no exported member 'BrowserModule'.
[0] app/app.module.ts(3,10): error TS2305: Module '"/user/blah-blah/angular/node_modules/#angular/router/index"' has no exported member 'RouterModule'.
app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { DepartmentListComponent } from './department-list.component';
import { EmployeeListComponent } from './employee-list.component';
#NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([
{path: 'departments', component: DepartmentListComponent},
{path: 'employees', component: EmployeeListComponent}
])
],
declarations: [ AppComponent, DepartmentListComponent, EmployeeListComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I have been following this tutorial for angular and this to use Django with Angular. According to one of the suggestions here in stack overflow, all rc4 has to be changed to rc5 in package.json but mine are all rc5 already. Where could I be possibly going wrong ?