My workspace is in nx and my application is angular 18, and running node version 20.15.0 both are stable versions. I have provided my settings below.
toaster component will get the first effect event. However all following will fail. I do have to run npm i with the –legacy-peer-deps flag as well. However even running the same and swap the signals with a behavior subject and it will produce the same results.
app.component.ts
import { ToasterComponent } from '@libs/components';
import { Component, effect, inject} from '@angular/core';
import { RouterModule } from '@angular/router';
import { ToasterStore } from '@lib/stores';
import { ToasterEventType, ToasterPlacement, ToasterPosition } from '@libs/enums';
import { Toaster } from '@libs/models';
import { getState } from '@ngrx/signals';
import { CommonModule } from '@angular/common';
@Component({
standalone: true,
imports: [CommonModule, RouterModule, ToasterComponent],
providers: [ ToasterStore ],
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
})
export class AppComponent {
toasterStore = inject(ToasterStore);
constructor() {
effect(() => {
const appState = getState(this.toasterStore)
console.log('app state updated', appState);
})
}
updateToaster() {
const toaster: Toaster = {
timeout: 5000,
toasterEventType: ToasterEventType.Success,
toasterPlacement: ToasterPlacement.center,
toasterPosition: ToasterPosition.Top
}
this.toasterStore.updateToaster(toaster)
}
appConfig
import { ApplicationConfig, isDevMode, provideExperimentalZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { provideServiceWorker } from '@angular/service-worker';
import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
import { bearerInterceptor } from './interceptors';
export const appConfig: ApplicationConfig = {
providers: [
provideExperimentalZonelessChangeDetection(),
provideHttpClient(withInterceptors([bearerInterceptor]), withFetch()),
provideRouter(appRoutes), provideServiceWorker('ngsw-worker.js', {
enabled: !isDevMode,
registrationStrategy: 'registerWhenStable:30000'
})
],
};
toaster.component.ts
import { ChangeDetectionStrategy, Component, effect, inject } from '@angular/core';
import { JsonPipe } from '@angular/common';
import { ToasterStore } from '@lib/stores';
import { getState } from '@ngrx/signals';
@Component({
selector: 'lib-toaster',
standalone: true,
imports: [JsonPipe],
templateUrl: './toaster.component.html',
styleUrl: './toaster.component.scss',
providers: [ToasterStore],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ToasterComponent {
readonly store = inject(ToasterStore);
constructor(){
effect(() => {
const state = getState(this.store);
console.log(state, 'toaster state changed')
})
}
}
package.json
{
"name": "@lib/source",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"angular-CL": "npx nx list @nx/angular",
"start:kingdom-lifter": "npx nx serve kingdom-lifter",
"ssl:kingdom-lifter": "npx nx serve kingdom-lifter --ssl true",
"build:kingdom-lifter": "npx nx build --prod --project=kingdom-lifter",
"pwa:kingdom-lifter": "npx nx build --prod --project=kingdom-lifter && http-server -p 8080 -c-1 dist/apps/kingdom-lifter/browser",
"start:backend": "node server.js"
},
"private": true,
"dependencies": {
"@angular/animations": "~18.0.0",
"@angular/common": "~18.0.0",
"@angular/compiler": "~18.0.0",
"@angular/core": "~18.0.0",
"@angular/forms": "~18.0.0",
"@angular/platform-browser": "~18.0.0",
"@angular/platform-browser-dynamic": "~18.0.0",
"@angular/router": "~18.0.0",
"@angular/service-worker": "~18.0.0",
"@nx/angular": "19.3.0",
"@testing-library/user-event": "^14.5.2",
"axios": "^1.6.0",
"bcryptjs": "^2.4.3",
"express": "~4.18.1",
"jsonwebtoken": "^9.0.2",
"mongoose": "^8.4.3",
"mongoose-unique-validator": "^5.0.0",
"multer": "^1.4.5-lts.1",
"nodemailer": "^6.9.14",
"rxjs": "~7.8.0",
"ts-mockery": "^1.2.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~18.0.0",
"@angular-devkit/core": "~18.0.0",
"@angular-devkit/schematics": "~18.0.0",
"@angular-eslint/eslint-plugin": "^18.0.1",
"@angular-eslint/eslint-plugin-template": "^18.0.1",
"@angular-eslint/template-parser": "^18.0.1",
"@angular/compiler-cli": "~18.0.0",
"@angular/language-service": "~18.0.0",
"@angular/pwa": "^18.0.5",
"@ngrx/signals": "^17.2.0",
"@nx/devkit": "19.3.0",
"@nx/esbuild": "19.3.0",
"@nx/eslint": "19.3.0",
"@nx/eslint-plugin": "19.3.0",
"@nx/jest": "19.3.0",
"@nx/js": "19.3.0",
"@nx/node": "^19.3.0",
"@nx/playwright": "19.3.0",
"@nx/workspace": "19.3.0",
"@playwright/test": "^1.36.0",
"@schematics/angular": "~18.0.0",
"@swc-node/register": "~1.9.1",
"@swc/core": "~1.5.7",
"@swc/helpers": "~0.5.11",
"@testing-library/angular": "^16.0.0",
"@testing-library/jest-dom": "^6.4.6",
"@types/express": "~4.17.13",
"@types/jest": "^29.4.0",
"@types/node": "18.16.9",
"@typescript-eslint/eslint-plugin": "^7.3.0",
"@typescript-eslint/parser": "^7.3.0",
"@typescript-eslint/utils": "^8.0.0-alpha.28",
"esbuild": "^0.19.2",
"eslint": "~8.57.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-playwright": "^0.15.3",
"jest": "^29.4.1",
"jest-environment-jsdom": "^29.4.1",
"jest-environment-node": "^29.4.1",
"jest-preset-angular": "~14.1.0",
"jwt-decode": "^4.0.0",
"nx": "19.3.0",
"prettier": "^2.6.2",
"ts-jest": "^29.1.0",
"ts-node": "10.9.1",
"typescript": "~5.4.2"
}
}
I have uninstalled angular cli and re installed. I have made another project from scratch and made a simple service and tried to replicate and it fails also. I am not sure of what the issue could be at this point.
Daniel Filipkowski is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.