"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 https://i.sstatic.net/Whl8y.png.

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

React-Collapsible Compilation Error

Currently, I am working on a project that involves Spring and ReactJS. I am still new to front-end development. One of the tasks I am trying to accomplish is creating a simple accordion using "REACT-COLLAPSIBLE". The code I have written is quite straight ...

javascriptjavareactjsdependenciesreact-component

Counting the number of visible 'li' elements on a search list: A guide

In the following code snippet, I am attempting to create a simple search functionality. The goal is to count the visible 'li' elements in a list and display the total in a div called "totalClasses." Additionally, when the user searches for a spec ...

javascriptjqueryhtmlcss

Navigating through the directories in PUG using the absolute path

Referring to the docs for PUG (), it states: If a path is absolute (example: include /root.pug), it gets resolved by prepending options.basedir. Otherwise, paths are resolved in relation to the file being compiled. To clarify, I understand that this in ...

javascriptnode.jsexpresspug

Transferring multiple parameters between components using Navigate and ParamMap

My concern is that I'm unsure of how to pass multiple parameters through the component's route. I need to send two attributes. Is there a specific syntax required in defining the route? Below is my desired functionality for passing the attribut ...

htmlangular

Sending values to Vuex getters from a Vuex action

I have been utilizing a Vuex getter across various components in my application. However, I recently encountered a scenario where I require slightly more intricate logic before accessing the getter, leading me to employ a Vuex Action. The challenge now is ...

javascriptvue.jsvuex

Updating the checkbox status in Angular when the radio button value is changed

I need help with a feature where all the checkboxes are checked based on the value of a radio button, and vice versa when an unchecked radio button is clicked. I have tried to implement this functionality using the following code but have not been successf ...

angulartypescript

excess white space appears in the mobile version

I recently completed a website using both materializecss and bootstrap platforms. While I know this may not be the best practice, it worked for my needs. However, I am facing an issue with the mobile view. When I reduce the viewport size, a margin appear ...

javascripthtmlcsstwitter-bootstrapmaterialize

Establishing a path for a post request in a Node.js application

While setting up a basic registration page, I encountered an error when trying to establish a route for the post request of the user credentials. node:_http_outgoing:648 throw new ERR_HTTP_HEADERS_SENT('set'); ^ Error [ERR_HTTP_HEADERS_ ...

javascriptnode.jsexpress

Guide to creating a nested table with JavaScript

Currently, I am utilizing JavaScript to dynamically generate a table. To better explain my inquiry, here is an example of the HTML: <table id='mainTable'> <tr> <td> Row 1 Cell 1 </td> ...

javascripthtmldynamichtml-table

Best practice for incorporating types into a Redux-toolkit reducer

As someone who is relatively new to TypeScript, I have a specific goal in mind. I am looking to create an interface where: interface ActionType { fieldName: {any one key from the interface FormStateType listed below such as 'name', 'age&ap ...

reactjstypescriptreduxtypesredux-toolkit

UI-Router is malfunctioning, causing ui-sref to fail in generating the URL

I'm currently working on a project that involves Angular, Express, and UI-router for managing routes. While I've properly configured my $states and included the necessary Angular and UI-router libraries in my HTML file, I am facing an issue wher ...

javascriptangularjsnode.jsexpressangular-ui-router

What is the best way to establish a client.js file for socket.io in Node.js?

I am looking to separate the client script from the index.html file in the chat application example found at https://socket.io/get-started/chat/. Currently, I am facing an issue where the message "a user connected" is not appearing when I refresh the webpa ...

javascriptnode.jsexpresssocket.ioclient-server

Dynamic loading of tinymce in progress

When tinymce is loaded in the head and before dom, everything works fine. However, if I attempt to load the JavaScript with ajax using jquery.getScript(), it doesn't work. I initialize tinymce when the user clicks the content area, so the dom must be ...

javascriptajaxtinymce

Using PHP to create redirects within an iframe

Imagine I have embedded an iframe to showcase a different website on my own site. However, when the displayed site contains a redirect that directs to other pages within its domain, this results in the entire browser being redirected to the external site w ...

phpjavascriptjqueryhtmliframe

Does the AJAX load more feature duplicate the existing data?

I've successfully implemented a PHP code that generates JSON data from WordPress posts in the database. By using AJAX, I'm able to load this JSON on my HTML page without any issues. Now, I want to enhance this functionality by adding a "Load Mo ...

javascriptphpjqueryajaxwordpress

Tips for avoiding redundant AJAX requests

Currently, I am working with JavaScript and not jQuery. Imagine a scenario where I have 3 users in my database [Kim, Ted, Box] and 3 buttons structured as follows: <button class="user">Kim</button> <button class="user">Ted</button> ...

javascriptajax

Structural directives allow for the declaration of variables

In my Angular application, I've implemented a custom structural directive called `IfDataDirective` as follows: @Directive({ selector: '[appIfData]' }) export class IfDataDirective { private hasView = false; @Input() set appIfData( ...

angularangular2-directives

What is the best way to apply a class to the grandparent div of an element in AngularJS?

Currently, I have a dynamically generated list of tests: <script id="TestsTemplate" type="text/ng-template"> <article class="tests-main"> <section class="tests"> <div class="test" ng-repeat="test in ...

javascripthtmlangularjs

Having trouble loading data.json file in React.js and jQuery intergration

Having a background in mobile development, I am relatively new to web development so please excuse any amateur questions. Currently, I am working on a react.js project using create-react-app (which utilizes Babel). I am following a tutorial that requires ...

javascriptjqueryjsonreactjs

Error message 'Chart was not disposed' is displayed in amChart while rendering live data through a socket connection

I encountered a similar issue with the amChart displaying a "chart was not disposed" warning, leading to memory leakage. To find a solution, I referred to the following guide: However, since I am updating the chart in real-time using socket connections a ...

angularamcharts4