Encountered an issue with the ng2-admin dashboard when trying to run the application using the command 'npm

As of yesterday, I was successfully running the ng2-admin dashboard on my local environment. However, today after updating to the latest code and executing the commands npm install and npm start, I encountered the following issue...

'5ms chunk asset optimization 94% asset optimizationError in bail mode: [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:6:0 Cannot find type definition file for 'jquery'.

asset optimizationError in bail mode: [default] \ng2-admin\node_modules\@types\fullcalendar\index.d.ts:6:0 Cannot find type definition file for 'jquery'.

[default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:6:1 Cannot find type definition file for 'jquery'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:7:1 Cannot find type definition file for 'moment'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:21:19 Module '''' has no exported member 'Duration'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:22:17 Module '''' has no exported member 'Duration'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:27:19 Module '''' has no exported member 'Moment'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:28:18 Module '''' has no exported member 'Moment'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:66:18 Module '''' has no exported member 'Moment'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:66:57 Module '''' has no exported member 'Moment'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:74:26 Module '''' has no exported member 'Moment'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:154:27 Module '''' has no exported member 'Duration'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:156:32 Module '''' has no exported member 'Duration'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:157:27 Module '''' has no exported member 'Duration'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:158:25 Module '''' has no exported member 'Duration'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:159:22 Module '''' has no exported member 'Duration'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:160:22 Module '''' has no exported member 'Duration'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:178:52 Module '''' has no exported member 'Duration'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:181:54 Module '''' has no exported member 'Duration'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:188:46 Module '''' has no exported member 'Moment'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:188:66 Module '''' has no exported member 'Moment'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:193:29 Module '''' has no exported member 'Moment'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:193:49 Module '''' has no exported member 'Moment'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:200:26 Module '''' has no exported member 'Moment'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:238:27 Module '''' has no exported member 'Moment'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:239:25 Module '''' has no exported member 'Moment'. [default] D:\ng2-admin\node_modules\@types\fullcalendar\index.d.ts:339:55 Module ''*'' has no exported member 'Moment'. [default] Checking finished with 25 errors '

angulartypescript

Answer №1

After thorough investigation, I have identified the underlying issue and devised a solution to resolve it.

  • Cause of the problem: Recent updates were made to certain development dependency libraries in the package.json file such as fullcalendar, jquery, and jquery.slimscroll. During compilation, these references were incorrectly specified as 'compilerOptions' instead of 'typeRoots', which should actually point to node_modules/@types.

  • Solution:

    1. To address this, you will need to delete the following folders: - Delete the ‘dist’ folder located at 'ng2-admin\' - Delete the ‘node_modules’ folder within 'ng2-admin\' Alternatively, you can run the commands npm install and npm update. Additionally, make the following alteration in the tsconfig.json file: ' "typeRoots": [ "node_modules/@types" ]'
    2. Execute the command > npm run build:dev (to run the gulp file on the local development environment)
    3. Finally, initiate the command npm start and attempt to access the portal URL.

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

The error message "Cannot access the 'id' property of undefined within Angular forms" is indicating that there is

I've been working on an Angular application that includes a parent component (products) for listing details with pagination, as well as a child component (Product Details) to view individual product details using Angular forms. The form successfully l ...

angular

Implementing a Typescript hook using useContext along with an uninitialized context object

I am currently attempting to develop a custom hook called useAuth in React 17 with TypeScript. While my solution is somewhat functioning, it requires the following syntax when utilizing the hook methods: const auth = useAuth(); // Do other stuff ...

reactjstypescriptreact-hooksuse-context

Retrieving cookie values results in a blank response

I'm facing an issue where I am attempting to retrieve a cookie value but am consistently getting an empty result. Interestingly, I can clearly see the cookie key that I am trying to access in the application tab of Chrome. However, when I use document ...

angulartypescriptcookies

Creating dynamic components in Angular 2 and adding them to the view container of the body

I've been grappling with the challenge of dynamically generating a component and then adding it to the document tag. My struggle lies in figuring out the proper method for selecting the body's ViewContainerRef so that I can easily append a new co ...

angular

Encountering an argument error when deploying an Angular app to OpenShift: "Issue with options.body."

I am currently in the process of deploying my Angular8 application to Openshift. I have been following some tutorials and attempting to deploy from the command line. First, I created the package.json file and proceeded to run the following command: >np ...

node.jsangularkubernetesdeploymentopenshift

Why does the OpenApi Generated ApiModule in Angular fail to register when declared in the node_modules directory but functions properly when placed outside that folder?

Encountering a problem with consuming OpenApi Generated files (services, interfaces) via NPM package. Strangely, it works outside the node_modules folder but ApiModule is undefined when placed within. Refer to the Github link below for documentation on usa ...

angulartypescriptnpmnode-modulesopenapi-generator

I want to use Angular and TypeScript to play a base64 encoded MP3 file

I am attempting to play a base64 encoded mp3 file in an Angular application. I have a byteArray that I convert to base64, and it seems like the byte array is not corrupted because when I convert it and paste the base64 string on StackBlitz https://stackbli ...

htmlangulartypescripthtml5-audio

What are the steps to validate a form control in Angular 13?

My Angular 13 application has a reactive form set up as follows: https://i.sstatic.net/LE219.png I am trying to validate this form using the following approach: https://i.sstatic.net/gxpgN.png However, I encountered the following error messages: https:// ...

typescriptangular13

Run Angular 2 application on both http and https protocols

Can anyone help me figure out how to run an Angular 2 app so that it can be accessed over both http and https? In other words, listening on ports 80 and 443 simultaneously. Here's the situation: I currently have an app set up with an SSL certificate ...

angular

What is the relationship between an object and a class in typescript and how can we define

import type { Scene, Camera } from 'three' interface SceneWithActiveCamera extends Scene { activeCamera: Camera } let scene: SceneWithActiveCamera Is there an alternative method to achieve the same result without using an interface? ...

typescriptclassobjecttypesthree.js

Display identical text using JavaScript filter

My search filter highlight is currently displaying [object Object] instead of <mark>match values</mark> when replacing the values. This is the code I am using: this.countries.response.filter((val) => { const position = val.value.toLowerCa ...

javascripthtmltypescriptstenciljs

Non-functional CSS selector not functioning properly in reactive form

I am encountering an issue where I am unable to bind the :invalid CSS selector with my input due to having custom validation. The invalid state only activates with a basic validator example like input type="email", so it will work with examples such as exa ...

htmlcssangularangular-reactive-forms

When making a subscription to the httpClient's get method, an error related to XMLHttpRequest occurs

After setting up a new application using Angular 5 (the latest version), I encountered the following error: Failed to set the 'responseType' property on 'XMLHttpRequest': The response type cannot be changed for synchronous requests mad ...

angularangular-httpclient

Building a Secure User Service in Angular

Struggling to develop a security service for my Angular app, I encountered an issue with repetitive calls to the back-end API (which determines user permissions). Ideally, I want this call to happen once and other requests to piggy-back on that initial req ...

angular

Leveraging GetServerSideProps for Dynamic URL Query Parameters

While working on querying the parameter in the URL within getServerSideProps, I encountered an error where ID was undefined in the DetailThemepage function. My Next.js version is V.13 and the directory structure is app/detail/[id]/page.tsx. http://loca ...

typescriptnext.jsnext.js13

Automatic completion of absolute paths in VS Code with the ability to click and view definitions through the configuration file js/tsconfig.json

In order to ensure that absolute paths function correctly, I have found that there are two key steps involved: the compilation process and configuring the code editor. I successfully managed the compilation aspect by utilizing babel-plugin-module-resolver ...

reactjstypescriptvisual-studio-codenext.jsjsx

Issue encountered when using FormData to upload a file in Angular 6

I've been working on creating a file uploading system using Angular 6 for the front end and Lumen for the back end API. Strangely, while I can successfully upload files using Postman directly to the API, I'm facing issues when trying to do the sa ...

angularform-data

What is the process for adding an item to the dictionary state?

I'm currently working on a function to push an object to the state in my code. The goal of this function is to duplicate the first state object and append it to the end of the state array. addField() { const index = (this.state?.fields.length) -1 ...

reactjstypescript

What issue are we encountering with those `if` statements?

I am facing an issue with my Angular component code. Here is the code snippet: i=18; onScrollDown(evt:any) { setTimeout(()=>{ console.log(this.i) this.api.getApi().subscribe(({tool,beuty}) => { if (evt.index == ...

angulartypescript

Create a separate variable for every component within a custom module in Angular 4

In my Angular 5 project, I have a custom module called "Restaurant." The "Restaurant" module includes 5 components: Banner, Menu, Recommend, Basket, and Restaurantlayout. Restaurantlayout contains all the other components (Banner, Menu, Recommend, Basket ...

angularangular5