Construct an outdated angular project from scratch

I'm facing an issue with an old Angular project that I'm trying to build. After pulling down the code, running npm install

@angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc9f9095bccdd2cbd2c8">[email protected]</a>
, and attempting to build using ng build, I encountered the following error:

The versions of @angular/compiler-cli and typescript could not be determined. The most common reason for this is a broken npm install.

To resolve this issue, please ensure that your package.json includes both @angular/compiler-cli and typescript in devDependencies. Then delete node_modules and package-lock.json (if it exists) before running npm install again.

My concern is about the cli version mentioned as 1.7.4, which seems incorrect as angular/cli is not listed in the package.json file. How can I fix this issue without modifying the existing code?

Update:

I have now added @angular/[email protected] and [email protected] to the devDependencies. I have also included the updated package.json. However, the new error message states:

Unable to locate any apps in .angular-cli.json.

This occurs because I do not have a .angular-cli.json file. Can someone tell me the latest version of angular cli that does not require this file?

Update 2:

I created an .angular-cli.json file and attempted to build the project. After making some JSON file adjustments, I encountered a mysterious error:

TypeError: Cannot read property 'length' of undefined

This seems to originate from an older version of cli/compiler/typescript. How can I identify the root cause of this error?

If I start updating the cli and other dependencies, it might lead to problems since transitioning to Angular 7.2 would require extensive code changes. (I attempted this previously but gave up after one day.)

package.json:

"dependencies": {
    "@angular/cli": "^1.7.4",
    "@angular/common": "^2.4.5",
    ...
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.4.5",
    ...
  }

Answer №1

After researching various issues reported on the GitHub repository, I was able to find a resolution.

To update the globally installed angular-cli package on your system, follow these steps:

1. Run: npm uninstall -g angular-cli

2. Run either: npm cache clean or npm cache verify (if you are using npm version > 5)

3. Run: npm install -g @angular/cli@latest

Please note that depending on your system, you may need to prefix the above commands with 'sudo'.

Additionally, it is recommended to update the local project version as well, as it will take precedence over the global installation within your project directory:

1. Remove the 'node_modules' directory by running: rm -rf node_modules

2. Uninstall the previous angular-cli version with: npm uninstall --save-dev angular-cli

3. Install the latest version of @angular/cli locally with: npm install --save-dev @angular/cli@latest

4. Finally, run: npm install

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why am I having trouble iterating through my array object?

Trying to showcase the contents of object within an array. However, unable to showcase any results. Why is this happening? This is what I've attempted so far: Demo available here: https://stackblitz.com/edit/ionic-dsdjvp?file=pages%2Fhome%2Fhome.ts ...

Encountering a React Native error with socketcluster-client library

I encountered an error while running my Android emulator with the command npm run android. The command prompt displayed the following error: 10:54:45 AM: Warning: 'react-native-vector-icons' peer dependency missing. To view the full warning, na ...

Incorporating React build files into a version control system

As I attempt to include the build files produced by running npm run build in a React App to a Git repository, I encounter an issue. The files generated through npm run build are directly utilized by my Django backend server. However, my backend and fronte ...

Encountering an issue when setting up an Azure Pipeline to transfer Angular code to an S3 bucket

How can I execute the following command in an Azure Pipeline task? npm config set registry http://*.*.*.*:* I want to utilize my organization's registry for npm. ...

Is Angular Signals on track to potentially supplant NgRx in some aspects?

After diving into Signals that are set to be introduced in Angular 16, I have already started coding with it and find it pretty amazing! I've heard rumors (and believe them) that Signals will likely replace most of the RxJS code, except for asynchron ...

During the build process, Fontawesome is causing a 401 unauthorized error

After smoothly using fontawesome for several months without any problems, I encountered an error today while attempting to push my app to production. An unexpected error occurred: "https://npm.fontawesome.com/@fortawesome/fontawesome-pro/-/6.1.1/fontawesom ...

What steps can be taken to avoid npm installing unnecessary demo/sample/example/test code when installing a package?

Is it possible to specify which elements of a package npm should not install? For instance, in my project called test-api, one of the dependencies is a package named jmespath: user@hostname MINGW64 ~/Projects/test-api/node_modules/jmespath (develop) $ ll ...

A comprehensive guide on implementing form array validations in Angular 8

I am currently using the formArray feature to dynamically display data in a table, which is working perfectly. However, I am facing difficulty in applying the required field validation for this table. My goal is to validate the table so that no null entry ...

node-ts displays an error message stating, "Unable to locate the name '__DEV__' (TS2304)."

I recently inserted __DEBUG__ into a TypeScript file within my NodeJS project. Interestingly, in VSCode, no error is displayed. However, upon running the project, I encounter an immediate error: error TS2304: Cannot find name '__DEBUG__'. I att ...

"Trying to initialize a new React Native project using 'npx react-native init

When trying to create a new react-native project using the command below in the visual studio terminal: npx react-native init project-name The terminal seems to freeze for about 10 minutes at this line: ⸨⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂ ...

The interaction between Nextjs router and useEffect resulting in unintended re-rendering

I'm currently facing a challenge with Next.js's next/navigation router. In my component, I have a series of useEffects implemented. Strangely, when I call router.replace, one of the effects runs twice or even infinitely in some cases. As a result ...

Why am I encountering this rendering issue when passing data to the ReactTable component?

The following code snippet represents the parent component containing an array of columns and data. const TransactionTable = () => { const columns = useMemo( () => [ { Header: 'DATE/TIME', accessor: &apos ...

Instructions on removing all node_modules from all packages in an npm 7 workspace monorepo

Is there a way to remove all node_modules directories from all packages within an npm 7 workspace? In the past, with Lerna, we could simply run lerna clean -y. However, now that we are transitioning to native NPM 7+ workspaces, is there a similar command ...

Error in TypeScript: The object may be null when using the window.open method

Is there a way to implement this code in Typescript? window.open(externalUrl, '_blank').focus(); Encountering the following TypeScript error: Object is possibly 'null'.ts(2531) I attempted the following solution without success: ...

Navigating within components using code is an essential skill when working with Vue Router

I am currently developing a Quasar application powered by Vue 3 with vue-router version 4 All my routes are properly configured and function well when navigating from a component template using <router-link to="/route">Go to route</rout ...

Step-by-step guide on executing a multi-location "delete" operation using AngularFire2 or Firebase in Angular2

My goal is to simultaneously remove 2 nodes on Firebase in a single operation. I am familiar with the remove() function for deleting a node when I have its location. However, I am unsure about what type of data the remove() operation returns - whether it i ...

Typescript is throwing a fit because it doesn't like the type being used

Here is a snippet of code that I am working with: import { GraphQLNonNull, GraphQLString, GraphQLList, GraphQLInt } from 'graphql'; import systemType from './type'; import { resolver } from 'graphql-sequelize'; let a = ({Sy ...

What advantages does subscribe() offer compared to map() in Angular?

I recently started exploring observables in angular2 and found myself puzzled over the decision to use map() instead of subscribe(). Let's say I am fetching data from a webApi, like so: this.http.get('http://172.17.40.41:8089/api/Master/GetAll ...

Showing a dynamically updated array in Angular

Within my Angular Application I am utilizing an ngFor loop in the component to display an array. Now, I am filtering the data from the array and aiming to update the newly filtered array in place of the original one. While I can successfully display the ...

How can I customize the styling of Angular Material Datepicker?

I am currently incorporating the Angular Material Datepicker into various parts of my application. One particularly important usage is a legacy one that must remain untouched for the proper functioning of the application. This legacy Datepicker is extensiv ...