ERROR in TypeError: Cannot read property 'flags' of undefined
AngularTypescriptAngular Problem Overview
I have a problem when I try to run ng serve on a recently created Angular project.
The version I'm using is 9.1.4, this error does not occur on a project with an older Angular version.
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.901.4
@angular-devkit/build-angular 0.901.4
@angular-devkit/build-optimizer 0.901.4
@angular-devkit/build-webpack 0.901.4
@angular-devkit/core 9.1.4
@angular-devkit/schematics 9.1.4
@angular/cli 9.1.4
@ngtools/webpack 9.1.4
@schematics/angular 9.1.4
@schematics/update 0.901.4
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0
After executing ng serve or ng build:
chunk {main} main.js, main.js.map (main) 2 kB [initial] [rendered]<br>
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 679 bytes [initial] [rendered]<br>
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]<br>
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]<br>
chunk {vendor} vendor.js, vendor.js.map (vendor) 339 kB [initial] [rendered]<br>
Date: 2020-05-08T02:06:46.145Z - Hash: 1a1b937f0ca2bb37634b - Time: 4087ms<br>
**ERROR in TypeError: Cannot read property 'flags' of undefined**
at resolveAlias (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:36513:37)
at checkAliasSymbol (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:64502:26)
at checkImportBinding (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:64534:13)
at checkImportDeclaration (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:64552:29)
at checkSourceElementWorker (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:64961:28)
at checkSourceElement (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:64800:17)
at Object.forEach (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:317:30)
at checkSourceFileWorker (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:65123:20)
at checkSourceFile (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:65091:13)
at getDiagnosticsWorker (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:65179:17)
at Object.getDiagnostics (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:65165:24)
at C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:98703:85
at runWithCancellationToken (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:98665:24)
at getBindAndCheckDiagnosticsForFileNoCache (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:98691:20)
at getAndCacheDiagnostics (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:98956:26)
at getBindAndCheckDiagnosticsForFile (C:\Cursos\Angular\ang-hello-world\node_modules\typescript\lib\typescript.js:98688:20)
** **Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/** **
The result I get on my browser after running this project is:
Cannot GET /
Angular Solutions
Solution 1 - Angular
edit
If you use angular 9.1.6 it should be fine now
npm update @angular/cli @angular/core
original post
Something is broken in Angular 9.1.5 - if you run the following it should work:
npm install @angular/core@9.1.4 @angular/animations@9.1.4 @angular/common@9.1.4 @angular/forms@9.1.4 @angular/platform-browser@9.1.4 @angular/router@9.1.4 @angular/platform-browser-dynamic@9.1.4 @angular/compiler@9.1.4 @angular/compiler-cli@9.1.4 @angular/language-service@9.1.4
ng build
Just spent about 4-5 hours trying to fix it myself...
The issue seems to stem from using Angular CLI 9.1.4 with Angular 9.1.5 (most likely the compiler
You'll see the issue when you do
ng --version
if you get:
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
Then you will need to follow the npm installs i listed above
Solution 2 - Angular
9.1.6 just released, should fix that issue
Solution 3 - Angular
Got the same problem updating from 10.1.0 to 11.1.1.
Updating TypeScript to the latest Version from 4.0.2 to 4.1.3 solved the problem:
npm i typescript@latest
Solution 4 - Angular
@Matt's answer worked for me as well for ng serve, but needed additional steps. First do these steps "Quoting the steps from his answer":
- First check
ng --version. Go to next step if you get:
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
- Force reinstall the angular packages with 9.1.4 as the version using:
npm install @angular/core@9.1.4 @angular/animations@9.1.4 @angular/common@9.1.4 @angular/forms@9.1.4 @angular/platform-browser@9.1.4 @angular/router@9.1.4 @angular/platform-browser-dynamic@9.1.4 @angular/compiler@9.1.4 @angular/compiler-cli@9.1.4 @angular/language-service@9.1.4
Couple of more steps for more ng serve to finally work.
- Next error I got was about tslib:
An unhandled exception occurred: Cannot find module 'tslib'For this I installed the tslib package manually using npm. - Next error I got was
You seem to not be depending on "@angular/core" and/or "rxjs". This is an error.. For this I referred https://stackoverflow.com/questions/49537782/you-seem-to-not-be-depending-on-angular-core and voila! ng serve worked!
Solution 5 - Angular
try this solution :
npm install @angular/core@9.1.4 @angular/animations@9.1.4 @angular/common@9.1.4 @angular/forms@9.1.4 @angular/platform-browser@9.1.4 @angular/router@9.1.4 @angular/platform-browser-dynamic@9.1.4 @angular/compiler@9.1.4 @angular/compiler-cli@9.1.4 @angular/language-service@9.1.4
npm install
ng serve