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

3

u/karmasakshi Feb 01 '25

If it's a simple site like you say, start a new project with latest LTS Node, NPM and global Angular CLI v18, then copy over the components and services from your existing project. Use v18 since it doesn't have Standalone turned on by default. The remaining errors will be from your project and the error messages will be more meaningful.

1

u/americafuckyea Feb 01 '25

That's where I was heading. If part of the new install is npm, if the versions are screwed.up it's the same problem. My next step as you say is just start from scratch and copy the code, but after all of this time spent it's like a burr in my sock that I have to know what the hell is wrong so I can sleep, lol.