"Encountering difficulties while setting up an Angular project

I am currently working on setting up an Angular project from scratch.

Here are the steps I have taken so far:

  • First, I installed Node.js

  • Then, I proceeded to install Angular CLI using the command: npm install -g @angular/cli@latest

    The versions of the tools/tools used are: Angular CLI: 9.1.4 Node: 12.16.3 OS: win32 x64

    Specifically for Angular: ... Ivy Workspace:

    Package Version

    @angular-devkit/architect 0.901.4 @angular-devkit/core 9.1.4 @angular-devkit/schematics 9.1.4 @schematics/angular 9.1.4 @schematics/update 0.901.4 rxjs 6.5.4

After that, I created a new app by running ng new app_name
When I tried to run the app with the command ng serve, I encountered several errors and the app failed to start.

I have included a screenshot of the error .

javascriptangulartypescriptcompilation

Answer №1

update

In case you are using angular 9.1.6, everything should be working fine now

npm update @angular/cli @angular/core

original question

I encountered the same issue after creating a new project with

npm install -g @angular/cli
ng new <projectname>

I suspect it is a bug in version 9.1.5 of Angular when paired with the 9.1.4 cli

You will notice the problem if you run

ng --version

If the output looks like this:

Angular CLI: 9.1.4
Node: 12.16.3
OS: win32 x64

Angular: 9.1.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

To fix this, you need to install Angular 9.1.4 instead by running after creating your 

ng new <projectname>

then execute

npm install @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9c908d9abfc6d1ced1cb">[email protected]</a> @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f7f8fffbf7e2fff9f8e5d6afb8a7b8a2">[email protected]</a> @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="690a060404060729504758475d">[email protected]</a> @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7c756877695a23342b342e">[email protected]</a> @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7978b86938188995fb89e99d29e91978b88868479918c80868098b39e819c918d99819d899aa38e939293989e94ce838f8ebde091966548898ea392949789be9287949a91959390db979b97">[email protected]</a> @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3d4d8d3defbdcdac9ffdeddcec3abbec1ded4">[email protected]</a> @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adddf1eeeef1edefdc82ccc1dee1465b44">[email protected]</a> @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27e4e8efebe7f2dff2eeefe179ae93">[email protected]</a> @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6741425f42593264424156">[email protected]</a> @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e7ebe9f4ede8bae9e7feeafedcdcda9e9faefeda3e9e1">[email protected]</a>

ng build

For more information, check out my response here

ERROR in TypeError: Cannot read property 'flags' of undefined

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

Implementing experimental decorators and type reconciliation in TypeScript - A step-by-step guide

My basic component includes the following code snippet: import * as React from 'react'; import { withRouter, RouteComponentProps } from 'react-router-dom'; export interface Props { }; @withRouter export default class Movies extends R ...

javascripttypescript

I'm currently in the process of creating a snake game using HTML5. Can you help me identify any issues or problems that

I am experiencing an issue where nothing is appearing on the screen. Below are the contents of my index.html file: <html> <body> <canvas id="canvas" width="480" height="480" style="background-color:grey;"></canvas> <script src=" ...

javascripthtml

Exploring a JavaScript object to verify if a property contains nested data elements

I am currently working on traversing through the object above in order to determine if a contact is a member of a specific list. For instance, if the user is a member of the list with an ID of 2022, I want to display their first name (which is also includ ...

javascriptjqueryjavascript-objects

Is utilizing getStaticProps the best approach for handling offline data in Next.js?

My current project in Next.js involves offline static data for the webpage content. I am using an array to store the data for later mapping. Do you recommend using getStaticProps in this scenario? For example, here is a snippet of my code: import { data } ...

javascriptnode.jsreactjsapinext.js

Unable to retrieve Google Maps route on Android device

After discovering the route between two latitude and longitude values on Google Maps using "Get Directions," everything appears accurately. However, when attempting to use the same directions in an Android mobile application, only the destination marker ...

javascriptandroidgoogle-maps

The API response indicates that the service is currently not accessible

I'm attempting to retrieve a report from the MOZ API, but I keep receiving this response: { "status" : "503", "error_message" : "Service Temporarily Unavailable" } This is the code I am using: function MozCall(callback) { var mozCall = ' ...

javascriptnode.jsexpress

extracting ng-repeat values and passing them to the controller

I have created a form that dynamically increases whenever the user clicks on the add sale button Here is the HTML code: <fieldset data-ng-repeat="choice in choices"> <div class="form-group"> <label for="name"> Qu ...

javascriptjqueryangularjs

What is the best way to remove a particular element from an array stored in Local Storage?

Currently working on a web application that features a grade calculator allowing users to add and delete grades, all saved in local storage. However, encountering an issue where attempting to delete a specific grade ends up removing the most recently add ...

javascriptarraysvue.js

Issues encountered when retrieving data with ReactiveForms

My current project involves gathering data using ReactiveForms. Here is the structure of my setup: Initially, I create a modal to gather the necessary data: async present(){ const modal = await this.modalController.create({ component: dataComponent, cs ...

angularionic-frameworkangular-reactive-forms

Is it advisable to utilize media queries and transform: translateY(-%) to position content above the mobile keyboard?

I've been struggling for nearly a whole day and could really use some assistance. I'm having trouble understanding how chat web apps manage to work around this particular issue. There have been numerous forum posts discussing the problem: I am tr ...

javascriptcssreactjs

Guide to deploying a Next JS App with Mongoose for MongoDB connectivity on Vercel

I am experiencing issues when trying to deploy my Next.js app on Vercel with a MongoDB connection. I have added environment variables on the Vercel site where we deploy the Next.js app. Is there anything wrong in the following file? next.config.js module. ...

javascriptreactjsmongodbnext.js

Popup Triggered by a JavaScript Timer

Seeking assistance in creating a straightforward timer-based popup. Once the timer hits 10 seconds, the popup should become visible. The timer should pause or stop, and after clicking the 'ok' button on the popup, the timer should reset to 0. Can ...

javascriptjquery

Struggled to incorporate Typescript function overload's implementation

After reviewing the previous question: Typescript: exclude undefined/null properties from type In my TypeScript project, I attempted to create an overload for a function called request, which can optionally accept a payload. The function is defined by the ...

typescriptoverloadingtypescript-typingstypescript-genericstypescript2.0

The method .depth() does not exist within this context

When I attempted to execute this code using npm start in the terminal //index.js const api = require('./api'); console.log('Starting monitoring!'); setInterval(async () => { //console.log(await api.time()); console.log(await ...

javascriptnode.jsfunctionapi

Why does React component still use old state when re-rendering?

I recently encountered an issue with my code. I am using an array of objects in my state, and when I delete an item from the array, the component does not render correctly without the deleted object. Additionally, when I try to open another object (trigger ...

javascriptreactjs

Test Transmission Service

Hey there, I'm currently working on writing Angular code for a component that involves an observable. However, I'm facing some issues testing the broadcast service as I keep getting an error indicating that the service is not being called. Does a ...

angularunit-testingtestingangular7azure-ad-msal

Tips for altering the browser tab color on a PC or Mac with HTML or JavaScript

While I am aware of the method to change theme colors on mobile devices using <meta name="theme-color" content=" #0000ffbb" />, I prefer browsing on my laptop. Are there ways to customize browser tab appearance using HTML or JS fo ...

javascripthtmlbrowser

Send information to the main application component

Can data be passed two or more levels up from a Child Component to the App Component? https://i.stack.imgur.com/JMCBR.png ...

angular

Unable to pass on error from Express server to React client app

Background Overview In my project, I've implemented a React component named 'Register.jsx' where users can input their desired username and password. Upon clicking the submit button, this information is transmitted to an Express backend whi ...

javascriptreactjsexpress

The donut chart in Chart.js is stuck in grayscale without any colorization

I just set up a donut chart using chart.js with the following code: <div id="chartContainer" style="height: 320px; width: 320px"> <canvas id="hoursFEContainer"></canvas> </div> To use chart.js, I downlo ...

javascriptnode.jschartschart.js