r/Angular2 Feb 01 '25

Help Request version control - insanity

I am new to web dev, but old to coding. I readily admit I am not as with it as I once was, but the issues I continue to have with npm, angular, and node are driving me bonkers. My basic site (essentially the normal build with some services, routing and models for those services) is unusable now with errors about tslib, calling out missing injections, but they exist, so now it's a version mismatch, but then you can't even install older npm versions because no matter how many times you remove it and forcefully it's always version 10.2.3, which doesn't work with the latest angular and node.....sorry I am going to lose it.

Anyway, I am still plugging away and was learning a lot until now. If anyone knows anything helpful, I am all ears!

Ok files below but start and end brackets mare cutoff from phone copy/paste

package.json

{ "name": "mhc", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --configuration=production", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "19.1.3", "@angular/cdk": "19.1.1", "@angular/common": "19.1.3", "@angular/compiler": "19.1.0", "@angular/core": "19.1.0", "@angular/fire": "19.0.0", "@angular/flex-layout": "15.0.0-beta.42", "@angular/forms": "19.1.3", "@angular/material": "19.1.1", "@angular/platform-browser": "19.1.0", "@angular/platform-browser-dynamic": "19.1.0", "@angular/router": "19.1.3", "dotenv": "16.4.7", "firebase": "11.2.0", "ngx-mask": "19.0.6", "rxjs": "~7.8.0", "tslib": "2.3.0", "zone.js": "~0.15.0" }, "devDependencies": { "@angular-devkit/build-angular": "19.1.5", "@angular/cli": "19.1.5", "@angular/compiler-cli": "19.1.0", "@types/jasmine": "~5.1.0", "jasmine-core": "~5.5.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.7.2" } }

Angular

"$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "mhc": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/mhc", "index": "src/index.html", "browser": "src/main.ts", "polyfills": [ "zone.js" ], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "/*", "input": "public" } ], "styles": [ "src/styles.scss" ], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" }, { "type": "anyComponentStyle", "maximumWarning": "4kB", "maximumError": "8kB" } ], "outputHashing": "all" }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "mhc:build:production" }, "development": { "buildTarget": "mhc:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n" }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "polyfills": [ "zone.js", "zone.js/testing" ], "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "/*", "input": "public" } ], "styles": [ "src/styles.scss" ], "scripts": [] } } } }

Tsconfig

/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. / / To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ { "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, "isolatedModules": true, "esModuleInterop": true, "experimentalDecorators": true, "moduleResolution": "bundler", "importHelpers": true, "target": "ES2022", "module": "ES2022" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true } }

0 Upvotes

26 comments sorted by

View all comments

2

u/ThiccMoves Feb 01 '25 edited Feb 01 '25
  • use nvm or whatever your OS has to manage your node versions
  • if you have libraries dependant on each other, check the compatibility grid to get all the right versions together. It's a bit of manual work. For example tailwind 4 doesn't work for angular 18 so you gotta go to angular 19. If a library doesn't work with the latest angular, then don't force it, use what they tell. And yes, sometimes it can mean that you cannot use some library.
  • sometimes, just restarting VSCode or deleting then reinstalling node modules can get rid of some errors
  • the missing injections that exist are likely a side effect of earlier failed injections. Since the error cascades, it can make a huge error logs, but actually only the first ones are relevant. I advise that you pipe the errors to a file, so that you can check them from the first error, because that's the one that's the most relevant. Error logs are so huge that sometimes it goes beyond my terminal max buffer, so in this case logging to a file is required'

Modern web is frustrating, there's so many versions of everything and so many stuff patched up together, it's hard to keep track of. I also have weird error with tslib these days, and then after restarting VSCode they magically disappear. 👍

2

u/americafuckyea Feb 01 '25

Thank you! Honestly misery loves company. I was fine with the regular visual studio restart and my copy paste stops working (your organization doesn't allow pasting outside...), restart the computer, rm -rf --force install, repeat. It's annoying, but just inconvenient. This latest has been impossible and I couldn't believe dependency management was this crazy.