Brand new Angular 9 application encountering the error message "ERROR in Cannot read property 'flags' of undefined" when running "ng build" on a Mac device

I set up a fresh Angular 9 project on my MacBook by executing

ng new demo (no routing, CSS)
cd demo
ng build

However, I encountered the following error:

ERROR in Cannot read property 'flags' of undefined

When running "ng version", here's what I received:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.0.5
Node: 12.16.1
OS: darwin x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.900.5 (cli-only)
@angular-devkit/build-angular   0.900.5
@angular-devkit/core            9.0.5 (cli-only)
@angular-devkit/schematics      9.0.5 (cli-only)
@schematics/angular             9.0.5 (cli-only)
@schematics/update              0.900.5 (cli-only)
rxjs                            6.5.4
typescript                      3.7.5

After some investigation, I pinpointed the issue to be:

TypeError: Cannot read property 'flags' of undefined
    at checkUnreachable (/Users/im/tmp/demo/node_modules/typescript/lib/typescript.js:31915:31)
    at bindChildrenWorker (/Users/im/tmp/demo/node_modules/typescript/lib/typescript.js:29665:17)
    ...

This seems to be occurring while processing the file: /Users/im/tmp/demo/node_modules/@angular-devkit/build-angular/node_modules/typescript/lib/lib.es5.d.ts

Any suggestions on how to resolve this?

Here is some additional version information from outside the workspace:

# npm version

{
  demo: '0.0.0',
  npm: '6.14.2',
  ares: '1.15.0',
  brotli: '1.0.7',
  cldr: '35.1',
  ...
}

# ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ...
                |___/


Angular CLI: 9.0.5
Node: 12.16.1
OS: darwin x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.5
@angular-devkit/core         9.0.5
@schematics/angular          9.0.5
...
angulartypescript

Answer №1

I came across a solution that resolved my issue:

Upon running ng new demo, I observed that the package-lock.json file indicated the use of version 3.6.4 of typescript for @angular-devkit/build-angular and @angular-devkit/build-optimizer.

By updating the package-lock.json file and performing an npm install to ensure they also utilize typescript version 3.7.5, the application started functioning correctly.

Alternatively, switching to yarn proved effective in resolving the issue right from the beginning:

ng new demo --packageManager=yarn

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

Can I assign a value from the tagModel to ngx-chips in an Angular project?

HTML code: <tag-input class="martop20 tag-adder width100 heightauto" [onAdding]="onAdding" (onAdd)="addInternalDomain($event)" type="text" Ts code: addInternalDomain(tagTex ...

angulartypescriptnpm

The Elusive Glitch: IOS Encounter with Ionic 2

VIEW PROBLEM

I am currently developing an Ionic 2 application using Angular 2. Interestingly, I have encountered a peculiar issue that only occurs on one specific page of the app, but specifically on IOS devices. Strangely enough, only the visible por ...

iosangularionic2

Alter the style type of a Next.js element dynamically

I am currently working on dynamically changing the color of an element based on the result of a function //Sample function if ("123".includes("5")) { color = "boldOrange" } else { let color = "boldGreen" } Within my CSS, I have two clas ...

javascriptreactjstypescriptnext.js

Angular 2 is throwing an error stating that the argument 'ElementRef' cannot be assigned to the parameter 'ViewContainerRef'

I'm developing an Angular 2 application with angular-cli, but when I include the following constructor, I encounter the following error: Error Argument of type 'ElementRef' is not assignable to parameter of type 'ViewContainerRef&apos ...

typescriptangular

Frontend Will Not Be Able to Access Cloud Run Environment Variables when in Production

My current setup involves using docker to build an image through Google Cloud Build and Google Cloud Registry. I have Pub/Sub triggers in place to populate Cloud Run instances with new Docker images upon a successful build. The issue I am facing is that m ...

reactjstypescriptgoogle-cloud-platformnext.jsgoogle-cloud-run

The process of transitioning to a different view through a button press

How can I switch to another view by clicking a button in Aurelia? Here is my code: <button class="btn btn-success " click.delegate="save()">New item</button> Typescript configureRouter(config: RouterConfiguration, router: ...

typescriptaurelia

Do developers usually commit or ignore the environment.ts file in their projects?

Should the file src\environments\environment.ts be committed or added to the .gitignore file? In a fresh Angular project (8.x), I have noticed that this file is not included in the .gitignore file. My assumption is that it's like this becau ...

angular

Issue with Angular Datatable not displaying content when [dtTrigger] directive is included in the HTML table - Angular 14

Upon adding [dtTrigger] = "dtTrigger" to the HTML table, I encountered an issue where the datatable ceased rendering. All the features of the datatable were no longer visible on the page. Removing [dtTrigger] = "dtTrigger" from the HTML ...

angularangular-datatables

The attribute 'value' is not present in the object of type 'Readonly<{}>'

My current project involves creating a form that will dynamically display content based on the response from an API. The code I am working with is structured as follows: class Application extends React.Component { constructor(props) { super(props); ...

reactjstypescript

Access to this feature is restricted when using a decorator in TypeScript with NodeJS

I have designed a decorator to handle async errors, but I am encountering difficulties in accessing it within class methods. My goal is to develop a reusable CRUD class that other classes can inherit from, with a method for CRUD operations. Decorator Code ...

node.jstypescriptmongoose

How to Validate Ionic 2 Radio Button Selections with TypeScript

Imagine having a list like the one shown below: <ion-list radio-group [(ngModel)]="autoManufacturers"> <ion-list-header> Auto Manufacturers </ion-list-header> <ion-item> <ion-label>Cord</ion-label> &l ...

angulartypescriptionic-frameworkionic2ionic3

Utilizing a React hook to render and map elements in a function

Can the hook return function be assigned to a render map in React? In this example, we have the socialAuthMethodsMap map with the onClick parameter. I tried to assign the signInWithApple function from the useFirebaseAuth hook, but it violates React's ...

javascriptreactjstypescriptfirebasereact-hooks

How to set up 'ng serve' command in Angular to automatically open a private browsing window?

I am looking for a way to open my project in an Incognito Mode browser without storing any cache. Is there a specific Angular CLI flag that can be included in the ng serve -o command or in the Angular CLI configuration file to enable opening a browser in ...

javascriptangularangular-cli-v7

The Ionic project compilation was unsuccessful

Issue: This module is defined using 'export =', and can only be utilized with a default import if the 'allowSyntheticDefaultImports' flag is enabled. Error found in the file: 1 import FormData from "form-data"; ~~~~~~~~ node ...

javascriptangulartypescriptionic-framework

Encountering problem while upgrading Angular Material from version 13 to 14 - error TS2307: Module '@angular/material/core/common-behaviors/constructor' not found

While upgrading Angular and Angular Material from version 13.2.6 to 14.2.2, I encountered the following challenges: Error TS2307: Module '@angular/material/core/common-behaviors/constructor' or its type declarations cannot be found. Error TS2345 ...

angulartypescriptangular-materialmigration

When a module is generated, it appends an additional slash to the path in the app.module.ts file

I've noticed a strange behavior with the generator in Angular CLI tools that adds an extra slash character for modules. For example, when running ng generate component visual a line like this is added to the app.module.ts file import { VisualCo ...

angulartypescriptangular-cli

What is causing unexpected behavior when one service calls another service?

Let's say I make a call to a service that returns an observable, and if it doesn't encounter any errors, then another service should be called which also returns an observable. What I tried doing is calling both services separately, one after th ...

angulartypescriptsubscription

Updating *ngIf in Angular 6 after the Component has finished Loading

Component: import { Component, OnInit } from '@angular/core'; // Services import { AuthService } from './services/auth.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleU ...

angularangular6

Testing the value of an input in Angular using unit tests

Currently, I am delving into the official documentation of Angular2 which focuses on unit testing (https://angular.io/docs/ts/latest/guide/testing.html). My struggle lies in setting a component's input field value so that it reflects in the component ...

angularunit-testingangular2-testing

Is there a way to switch on and off an ngrx action?

Here is a statement that triggers a load action to the store. The relevant effect will process the request and return the response items. However, my goal is to be able to control this action with a button. When I click on start, it should initiate dispa ...

javascriptangularrxjs