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

I currently have an array of strings and wish to print only the lines that include a specific substring

Here i want to showcase lines that contain the following strings: Object.< anonymous > These are multiple lines: Discover those lines that have the substring Object . < anonymous > Error: ER_ACCESS_DENIED_ERROR: Access denied for user ' ...

Tips on obtaining data from ion-select and presenting it in a label

I'm having a problem with dynamic binding in my drop-down. I can't seem to display the default selected value in the label, and when I change the selection, the new value isn't showing up either. Take a look at my code below: <p>{{l ...

Invoke a function in Angular when the value of a textarea is altered using JavaScript

Currently, I am working with angular and need to trigger my function codeInputChanged() each time the content of a textarea is modified either manually or programmatically using JavaScript. This is how my HTML for the textarea appears: <textarea class ...

Steps for compiling SCSS to CSS using Angular-CLI and moving it to the assets directory

I am currently working on an Angular 5 project with an assets folder where I store my common CSS file and reference it in index.html. I now plan to create a new folder called "sasstyles" and place some .scss files there. When I compile or run the project ...

Distributing on NPM after setting up verdaccio

After successfully installing Verdaccio locally on my Ubuntu machine, everything was running smoothly. However, when attempting to publish a package to NPM, even after shutting down Verdaccio, I kept encountering this error: If you are behind a proxy, ...

"Is it possible to differentiate between a variable that is BehaviorSubject and one that is not

I am dealing with a variable that can be of type Date or BehaviorSubject<Date | null>. My concern is figuring out how to determine whether the variable is a BehaviorSubject or not. Can you help me with this? ...

Using Npm to install a module results in an abundance of files being provided

Back when I used npm install 6 months ago to install a module, it would create a new folder under node_modules containing all the files for that module. However, now when I use it, it creates multiple files for one module. How can I install a module to a ...

What is the best way to execute my mocha fixtures with TypeScript?

I am seeking a cleaner way to close my server connection after each test using ExpressJS, TypeScript, and Mocha. While I know I can manually add the server closing code in each test file like this: this.afterAll(function () { server.close(); ...

Loading custom Angular modules results in an error

Seems like a simple thing, but I'm struggling to figure it out on my own. I have an Angular application with the following key files: app/app.module.ts app/dashboard/dashboard.component.html app/dashboard/stats-tile/stats-tile.component.html I used ...

Having trouble resolving React within the Formik/dist package due to a custom webpack configuration

Struggling to set up projects from scratch, encountering an issue with webpack not being able to resolve formik's modules while other third-party modules like styled-components work fine. I've tried searching online for a solution but couldn&apos ...

Issue in Vue/Node application: Rule is restricted to a single resource source

I just recently started diving into Vue and Node, and things were going smoothly with a Vue3 project I was experimenting with to enhance my skills. I decided to incorporate scss files, so I went ahead and installed sass-loader via npm using: npm install sa ...

Server-side rendering with the Node.js mustache template engine

I am in the process of developing a basic application for compiling mustache templates into static pages on the server side. This is what I have accomplished so far: var view = { title: "Joe", calc: function () { return 2+4; } }; v ...

Is there a way to troubleshoot the "module not found error" that keeps popping up when I attempt to execute the code following a smooth installation of sqlite3?

Initially, I successfully installed the sqlite3 module but encountered errors like "module not found". However, upon attempting to reinstall sqlite3 (npm install sqlite3), more errors surfaced that required thorough post editing. The output is as follows: ...

Develop a user interface designed specifically for a subset of JSX.Elements or ReactElement

For better organization, I decided to create an interface called IconInterface to group all my icons: import { IconProps, CaretProps, CheckboxProps } from "./IconProps"; interface IconInterface { (props: IconProps | CaretProps | CheckboxProp ...

Is there a way to edit the previous entry made in a command prompt survey?

Is it possible to correct a typo in a command prompt questionnaire after moving to the next question? For instance, during the npm init process, if I mistakenly make a typo in the package name field and hit enter, the prompts advance to the version:. Is t ...

Can Angular Material Tabs be customized to have a different style?

I need help styling my mat-tabs to achieve a specific look. Here is the design I am trying to replicate: https://i.stack.imgur.com/tg6XC.png https://i.stack.imgur.com/tth0z.png However, I'm encountering an issue where the white border under the curr ...

The NgModel within the parent component is expected to mirror the state of the child component

My Angular 10 project includes a library with a wrapper component around a primeng-component. The primeng-component utilizes ngModel. I am trying to set the ngModel in the parent-component accessing the wrapper-component, and I want any changes made to the ...

Conflicting Dependencies in NPM Next When Using React Package

I'm facing an issue regarding a React / React-DOM package dependency conflict that I can't seem to resolve despite looking at solutions provided elsewhere. Whenever I try to install/update a dependency or deploy my Next.js app to Vercel, I encou ...

Increasing the value of a TypeScript variable using ngFor in an HTML template can enhance its usefulness

Can you dynamically increase a variable declared in your TypeScript file for each element generated by an ngFor loop in your HTML file? <tbody> <tr *ngFor="let item of invoiceItems"> <td>{{item.ItemName}}</td> <td>{ ...

angular2: Comparing Routes without Components to Routes with Empty Paths

As per the latest version of angular2, routes can be declared in two ways: Componentless Route: Setting up URLs without specifying a component Empty path routes: Setting up Components without specifying a URL. Is this accurate? Can someone provide a det ...