Error encountered when updating Angular CLI

I am currently attempting to update my Angular project from version 4 to version 6. After numerous failed attempts to upgrade, I decided to uninstall and reinstall the Angular CLI using 'npm uninstall -g angular-cli' followed by a reinstallation. However, I encountered an error after installing the new Angular CLI.

Error: Cannot find module 'C:\Users\Enoch\Workspaces\Angular IDE 2017 CI\new-front\node_modules\@angular\cli\ember-cli\lib\cli\cli'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Users\Enoch\Workspaces\Angular IDE 2017 CI\new-front\node_modules\angular-ide\bin\ng:39:19)
...

How can I resolve this error and successfully upgrade my existing project to version 6 without causing further issues? I have been searching for a solution for more than 2 hours now.

This is my current package.json:

{
  "name": "new-front",
  "version": "0.0.0",
  "license": "MIT",
  ...
}

Realizing that upgrading directly from version 4 to 6 may not be ideal, I tried upgrading from 4 to 5 first which resulted in the error below. Subsequently, I uninstalled and reinstalled the Angular CLI, leading to the problems mentioned above.


<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ef0fbe9b3f8ecf1f0eadeaeb0aeb0ae">[email protected]</a> C:\Users\Enoch\Workspaces\Angular IDE 2017 CI\new-front
+-- @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cbaaa5a2a6aabfa2a4a5b88bfee5f9e5fafb">[email protected]</a>  invalid
+-- @angular/...
angulartypescript

Answer №1

Initially, the command you used to install the angular-cli was incorrect; the correct command should be

npm install -g @angular/cli

Furthermore, it is not advisable to skip from version 4 to version 6 as this entails transitioning between major versions (even numbers).

You seem to be encountering an error related to 

\new-front\node_modules\@angular\cli\ember-cli\lib\cli\cli'
; please investigate why ember-cli is present in that location.

Lastly, a useful upgrade guide can be found here.

I trust this information proves beneficial.

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

Tips for passing the actions payload within an ngrx effect to the WiithLatestFrom() function in order to retrieve a specific value from the state

Hey there, struggling to pass my actions payload to getMainCareuserMessagesConversationAppointmentsShift(?) with the following effect. caregiverAcceptFetch = createEffect(() => { return this.actions.pipe( ofType(rdxMainCareuserMessagesConversa ...

angularngrx-storengrx-effects

Acquiring information from the service in Ionic 2

THE ISSUE: Apologies if this is a basic question. Within my Ionic 2 application, I have implemented a POST request for the login functionality and it is functioning correctly. The process involves a form with email and password fields, sending this data ...

angularionic-frameworkionic2

Creating an Angular component that is flexible in terms of the data type it accepts

Currently, I have successfully implemented a lookup component that is responsible for fetching and filtering a list of users based on the query provided. When a user is selected from this list, they are set as members. This component can be configured with ...

angular

Error Message: Unexpected character "C" found in JSON response from Ionic 2 Http GET request

Trying to execute a GET request and extract data from the response. this.http.get('http://localhost:8888/maneappback/more-items.php').subscribe(res => { console.log(res.json()); }, (err) => { console.log(err); }); An error message ...

javascriptphpjsonangularionic-framework

Angular promise not triggering loop creation

I am encountering an issue with a particular function handleFileInput(file: any) { let promise = new Promise((resolve, reject) => { this.uploadFileDetails.push({ filename:this.FileName,filetype:this.FileType}); ... resolve(dat ...

angulartypescript

Cancel the previous Angular/RxJS request to unsubscribe

I'm on the quest for a more streamlined approach using RxJS to tackle this task. The existing code gets the job done, but it seems like there should be a more efficient solution. ngOnInit() { this.activatedRoute.params.subscribe(({ bookId }) => ...

angularrxjs

Some code paths fail to return a value in Google Cloud Function callable functions

When utilizing async functions in my cloud function and including a 'return' statement in each potential output, I am still encountering the error message Not all code paths return a value I attempted removing my database calls and only leaving ...

typescriptgoogle-cloud-firestoregoogle-cloud-functionscallable

Angular 8 encountering issues with incomplete/impartial JSON parsing

Upon receiving a JSON object through a Socketio emit, the data appears as follows: { "single":[ { "name":"Xavi555", "data":[ { "_id":"5e2ea609f8c83e5435ebb6e5", "id":"test1", "author":"someone", ...

jsonangular

What is the best way to utilize typed variables as types with identical names in Typescript?

Utilizing THREE.js with Typescript allows you to use identical names for types and code. For instance: import * as THREE from '/build/three.module.js' // The following line employs THREE.Scene as type and code const scene: THREE.Scene = new THRE ...

javascripttypescript

What is the best way to consistently and frequently invoke a REST API in Angular 8 using RxJS?

I have developed a REST API that retrieves a list of values. My goal is to immediately invoke this API to fetch values and store them in a component's member variable. Subsequently, I plan to refresh the data every five minutes. Upon conducting some ...

javascriptangulartypescriptrxjs

Encountering a Typescript error while attempting to remove an event that has a FormEvent type

Struggling to remove an event listener in Typescript due to a mismatch between the expected type EventListenerOrEventListenerObject and the actual type of FormEvent: private saveHighScore (event: React.FormEvent<HTMLInputElement>) { This is how I t ...

javascriptreactjstypescript

When switching tabs, Ion-select should not reload the selected name

Whenever I switch tabs and then return to the previous tab in Ionic, the select field that was previously set becomes null, even though the page is still loading and the variable is populated. <ion-header color="primary"> <ion-navbar> &l ...

angulartypescriptionic-frameworkionic3

Angular library modules for node packages

After developing my latest library, I noticed some red underlines: https://i.stack.imgur.com/ffAjI.png In this package, I plan to incorporate other npm packages like ionic and crypto. I attempted to update the package.json within the library: { "name ...

javascriptnode.jsangularnpm

What is the best way to implement debouncing for an editor value that is controlled by the parent component?

Custom Editor Component import Editor from '@monaco-editor/react'; import { useDebounce } from './useDebounce'; import { useEffect, useState } from 'react'; type Props = { code: string; onChange: (code: string) => void ...

javascriptreactjstypescriptdebouncing

Rendertron always renders base routes as empty

I'm running into an issue while trying to use rendertron via an Apache proxy - all the base routes are showing up as "null." Could this be due to a configuration error on my part? Any help would be greatly appreciated. The Rendertron service is curre ...

angularapacheproxyrendertron

react Concealing the Card upon clicking a different location

Utilizing a combination of React and TypeScript, this component allows for the card to be toggled between shown and hidden states upon clicking on the specified div tag. However, there is a need to ensure that the card is hidden even if another area outs ...

reactjstypescript

The utilization of angular2-materialize is not possible due to an error message indicating that jQuery.easing is undefined

Greetings to all who are taking the time to read this. I am encountering an issue while trying to run ng serve. Here is the error message I am receiving: TypeError: jQuery.easing is undefined Here is a breakdown of what I have done so far: ng new X cd X ...

jqueryangularangular-cliangular2-materialize

What is the best way to organize a collection of objects by a specific characteristic in Typescript?

Imagine you have an array of objects with the following structure: type Obj = { id: number, created: Date, title: string } How can you effectively sort this array based on a specific property without encountering any issues in the type system? For ...

typescriptsorting

Enumerate the names of the private properties within the class

I am working on a problem where I need to use some of the class properties as values in a map within the class. In the example below, I have used an array instead of a map because when a property is marked private, it is not included in the keyof list. How ...

typescriptprivatekeyof

Error encountered while utilizing a custom third-party component within an Angular project during static analysis

Currently, I am utilizing an Angular (2+) datepicker component (link to Github) in two separate Angular projects: Angular CLI v1.0.0-beta.30, Angular v2.3 Angular CLI v1.0.0, Angular v4.0 The first project works flawlessly both during development with n ...

javascriptangularangular2-aot