angular: ivy throw ERROR in EISDIR: illegal operation on a directory, read and Cannot combine @Input decorators with query decorators

🐞 bug report

Affected Package

"@angular/core": "8.1.0-next.2",

Is this a regression?

"@angular/core": "8.0.x",

Description

I tried out Ivy as suggested here when compiling, I get : ERROR in EISDIR: illegal operation on a directory, read

🔬 Minimal Reproduction

The error doesn’t give me an indication as to where in my code the error would come from …

🔥 Exception or Error



$ npm start

> front@0.0.0 start /Users/hugodes/src/core-front
> gulp sass && node --max_old_space_size=3072 node_modules/.bin/ng serve -c=local

[17:43:41] Using gulpfile ~/src/core-front/gulpfile.js
[17:43:41] Starting 'sass'...
[17:43:42] Finished 'sass' after 724 ms
  0% compiling
Compiling @angular/core : es2015 as esm2015

Compiling @angular/common : es2015 as esm2015

Compiling @angular/platform-browser : es2015 as esm2015

Compiling @angular/platform-browser-dynamic : es2015 as esm2015

Compiling @angular/cdk/bidi : es2015 as esm2015

Compiling @angular/cdk/coercion : es2015 as esm2015

Compiling @angular/cdk/platform : es2015 as esm2015

Compiling @angular/cdk/keycodes : es2015 as esm2015

Compiling @angular/cdk/observers : es2015 as esm2015

Compiling @angular/cdk/a11y : es2015 as esm2015

Compiling @angular/animations : es2015 as esm2015

Compiling @angular/animations/browser : es2015 as esm2015

Compiling @angular/platform-browser/animations : es2015 as esm2015

Compiling @angular/material/core : es2015 as esm2015

Compiling @angular/common/http : es2015 as esm2015

Compiling @angular/material-moment-adapter : es2015 as esm2015

Compiling @angular/forms : es2015 as esm2015

Compiling @angular/router : es2015 as esm2015

Compiling @ngrx/store : es2015 as esm2015

Compiling @auth0/angular-jwt : module as esm5

Compiling @angular/animations/browser/testing : es2015 as esm2015

Compiling @angular/cdk : es2015 as esm2015

Compiling @angular/cdk/collections : es2015 as esm2015

Compiling @angular/cdk/scrolling : es2015 as esm2015

Compiling @angular/cdk/drag-drop : es2015 as esm2015

Compiling @angular/common/http/testing : es2015 as esm2015

Compiling @angular/cdk/portal : es2015 as esm2015

Compiling @angular/cdk/overlay : es2015 as esm2015

Compiling @angular/material/form-field : es2015 as esm2015

Compiling @angular/material/autocomplete : es2015 as esm2015

Compiling @angular/material/badge : es2015 as esm2015

Compiling @angular/cdk/layout : es2015 as esm2015

Compiling @angular/material/bottom-sheet : es2015 as esm2015

Compiling @angular/material/button : es2015 as esm2015

Compiling @angular/material/button-toggle : es2015 as esm2015

Compiling @angular/material/card : es2015 as esm2015

Compiling @angular/material/checkbox : es2015 as esm2015

Compiling @angular/material/chips : es2015 as esm2015

Compiling @angular/material/dialog : es2015 as esm2015

Compiling @angular/cdk/text-field : es2015 as esm2015

Compiling @angular/material/input : es2015 as esm2015

Compiling @angular/material/datepicker : es2015 as esm2015

Compiling @angular/material/divider : es2015 as esm2015

Compiling @angular/cdk/accordion : es2015 as esm2015

Compiling @angular/material/expansion : es2015 as esm2015

Compiling @angular/material/grid-list : es2015 as esm2015

Compiling @angular/material/icon : es2015 as esm2015

Compiling @angular/material/list : es2015 as esm2015

Compiling @angular/material/menu : es2015 as esm2015

Compiling @angular/material/select : es2015 as esm2015

Compiling @angular/material/tooltip : es2015 as esm2015

Compiling @angular/material/paginator : es2015 as esm2015

Compiling @angular/material/progress-bar : es2015 as esm2015

Compiling @angular/material/progress-spinner : es2015 as esm2015

Compiling @angular/material/radio : es2015 as esm2015

Compiling @angular/material/sidenav : es2015 as esm2015

Compiling @angular/material/slide-toggle : es2015 as esm2015

Compiling @angular/material/slider : es2015 as esm2015

Compiling @angular/material/snack-bar : es2015 as esm2015

Compiling @angular/material/sort : es2015 as esm2015

Compiling @angular/cdk/stepper : es2015 as esm2015

Compiling @angular/material/stepper : es2015 as esm2015

Compiling @angular/cdk/table : es2015 as esm2015

Compiling @angular/material/table : es2015 as esm2015

Compiling @angular/material/tabs : es2015 as esm2015

Compiling @angular/material/toolbar : es2015 as esm2015

Compiling @angular/cdk/tree : es2015 as esm2015

Compiling @angular/material/tree : es2015 as esm2015

Compiling @angular/material : es2015 as esm2015

Compiling @angular/core/testing : es2015 as esm2015

Compiling @angular/platform-browser/testing : es2015 as esm2015

Compiling @angular/compiler/testing : es2015 as esm2015

Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015

Compiling @angular/platform-server : es2015 as esm2015

Compiling @angular/platform-server/testing : es2015 as esm2015

Compiling @angular/common/testing : es2015 as esm2015

Compiling @angular/router/testing : es2015 as esm2015

Compiling @ngrx/effects : es2015 as esm2015

Compiling @ngrx/effects/testing : es2015 as esm2015

Compiling @ngrx/store/testing : es2015 as esm2015

Compiling @ngrx/store-devtools : es2015 as esm2015
                                                                                              
Date: 2019-06-14T15:45:17.206Z
Hash: 6b9902ab85a9ec6f706a
Time: 89574ms
chunk {main} main.js, main.js.map (main) 1.89 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 675 bytes [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 434 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.33 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 322 kB [initial] [rendered]

WARNING in Unknown member type: "[key: string]: (data: any) => void;

WARNING in Unknown member type: "[key: string]: (data: any) => void;

WARNING in Unknown member type: "[key: string]: (data: any) => void;

WARNING in Unknown member type: "[key: string]: (data: any) => void;

WARNING in Unknown member type: "[key: string]: (data: any) => void;

WARNING in Unknown member type: "[key: string]: (data: any) => void;

WARNING in Unknown member type: "[key: string]: (data: any) => void;

ERROR in EISDIR: illegal operation on a directory, read
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Failed to compile.
ℹ ｢wdm｣: Compiling...
                                                                                              
Date: 2019-06-14T15:45:22.185Z - Hash: c5d40477487b59bbbed2 - Time: 4662ms
6 unchanged chunks

ERROR in EISDIR: illegal operation on a directory, read
ℹ ｢wdm｣: Failed to compile.
/Users/hugodes/src/core-front/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:228
                    finally { if (e_2) throw e_2.error; }
                                       ^

Error: Cannot combine @Input decorators with query decorators
    at /Users/hugodes/src/core-front/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/directive.js:350:23
    at Array.map (<anonymous>)
    at queriesFromFields (/Users/hugodes/src/core-front/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/directive.js:346:23)
    at Object.extractDirectiveMetadata (/Users/hugodes/src/core-front/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/directive.js:125:35)
    at ComponentDecoratorHandler.analyze (/Users/hugodes/src/core-front/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:133:47)
    at analyze (/Users/hugodes/src/core-front/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:172:60)
    at _loop_1 (/Users/hugodes/src/core-front/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:212:25)
    at analyzeClass (/Users/hugodes/src/core-front/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:220:25)
    at visit (/Users/hugodes/src/core-front/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:234:21)
    at visitNodes (/Users/hugodes/src/core-front/node_modules/typescript/lib/typescript.js:16514:30)

🌍 Your Environment

Angular Version:



Angular CLI: 8.0.2
Node: 10.16.0
OS: darwin x64
Angular: 8.1.0-next.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.800.2
@angular-devkit/build-angular      0.800.2
@angular-devkit/build-optimizer    0.800.2
@angular-devkit/build-webpack      0.800.2
@angular-devkit/core               8.0.2
@angular-devkit/schematics         8.0.2
@angular/cdk                       8.0.1
@angular/cli                       8.0.2
@angular/material                  8.0.1
@angular/material-moment-adapter   8.0.1
@ngtools/webpack                   8.0.2
@schematics/angular                8.0.2
@schematics/update                 0.800.2
rxjs                               6.5.2
typescript                         3.4.5
webpack                            4.30.0

Anything else relevant?

I aslo followed the guide here: https://angular.io/guide/ivy

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 1
  • Comments: 29 (13 by maintainers)

Most upvoted comments

@istiti Thank you so much !!

Also thanks @AndrewKushnir & @kara for all your help, I never had to wait more than 24h to get a response !

I’m sorry the error ended up being in my code, but other users will have better errors as a result 🙂

I created a separate issue #31327 for the case I ran into while trying to reproduce the error. (Sometimes combining input and query decorators doesn’t fail with Ivy).

Have a nice day !

EDIT:

Our app which is built of 10+ feature modules and 100+ components ended up compiling just fine and works like a charm, great work with Ivy guys !

+2
hugodes on Jun 28, 2019

Thanks for the detailed reply @istiti 👍

@hugodes as Elvis mentioned, the following code:

  @ViewChild('myHalfDonutCanvas', { static: false })
  @Input() SEInflowSum;

means that @ViewChild and @Input decorators are applied to the SEInflowSum field, thus Ivy compiler throws an error. Please try to apply a fix that Elvis proposed and let us know if everything works as expected.

Thank you.

+2
AndrewKushnir on Jun 27, 2019

Error is correct here. You really combine your Input with query decorators (here ViewChild), afaik this is not allowed.

In Before : your input SEInflowSum is part of your ViewChild because has not property and not end with “;” if you add ; to really be sure your ViewChild is not part of Input you will se another error.

In after : it isn’t ! and this should not compile too, it is mainly CLI rebuild bug, try to “ctrl+c” and rerun again your project using ng serve you will se error. (here it’s just cli bug i think), if you start with “after code” and switch to “before code” cli will compile successfully but at runtime you will see 100% error

Can you try :

@ViewChild('myHalfDonutCanvas', { static: false }) myHalfDonutCanvas;
  @Input() SEInflowSum;
  @Input() SEOutflowSum;

It should works.

BTW if you keep only your viewchild alone like you have it in your “before code” you will see another error.

+2
elvisbegovic on Jun 27, 2019

@istiti changed the issue title 😀

+1
hugodes on Jul 9, 2019

@istiti thank you very much for clarifying. I think indeed changing line 60 fixed it, since I’ve got my originial error from before 8.1.0 back 😃 https://github.com/angular/angular/issues/31160

But they are working on a fix for that one too

+1
richardsengers on Jul 1, 2019

@hugodes - that is a known regression - sorry. Here is the fix https://github.com/angular/angular/pull/31289

+1
petebacondarwin on Jun 27, 2019

@hugodes just want to let you know that 8.1.0-rc.0 is now released and available on NPM. Could you please try to reproduce original problem and see if there is additional debug information available? Thank you.

+1
AndrewKushnir on Jun 26, 2019

https://github.com/angular/angular/issues/31056#issuecomment-505861134 is fixed by https://github.com/angular/angular/pull/31289

+1
petebacondarwin on Jun 26, 2019

Hi @hugodes, this is a bit strange that you have different error message now, since the code that I’ve added should just produce better diagnostics info. Anyway, the problem that you see should be addressed by PR #31145. My proposal is to wait for the next Angular release, that will most likely include changes from the mentioned PRs, try again and see what the error message is. Thank you.

+1
AndrewKushnir on Jun 25, 2019

@hugodes, could you please try installing 8.1.0-next.3 version of Angular packages from NPM to see if the error message is the same?

Also as an option, you can look at the generated code in compiler-cli package once you’ve built Angular project (based on the PR #31123) and apply the necessary changes to the compiler-cli package in your node_modules folder.

Thank you.

+1
AndrewKushnir on Jun 21, 2019

Hi @hugodes, you can follow the steps in this instruction to build Angular locally. You can also checkout the changes from my PR and build packages with these changes included (so you don’t have to update the code manually). Once you build Angular packages, you can use them instead of the existing ones in node_modules. Thank you.

+1
AndrewKushnir on Jun 19, 2019

@hugodes I’ve created a PR to make error message more verbose (to include filename and a pointer to a specific class field) - #31123. You can try to make a local modification similar to the one from the PR I mentioned and see if that gives you more details. Thank you.

+1
AndrewKushnir on Jun 19, 2019

I built with verbose and prod and got a better error message:

ERROR in EISDIR: illegal operation on a directory, read Child mini-css-extract-plugin node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!node_modules/postcss-loader/src/index.js??extracted!node_modules/sass-loader/lib/loader.js??ref--13-3!src/styles.scss: Asset Size Chunks Chunk Names 3rdpartylicenses.txt 1 bytes Entrypoint mini-css-extract-plugin = * chunk {0} * (mini-css-extract-plugin) 78.4 KiB [entry] [rendered] [/c4r] ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??extracted!./node_modules/sass-loader/lib/loader.js??ref--13-3!./src/styles.scss 78.4 KiB {0} [built] ModuleConcatenation bailout: Module is not an ECMAScript module single entry !!C:\Users\jpleclerc\Desktop\portal\portal\Innova.Client\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\raw-css-loader.js!C:\Users\jpleclerc\Desktop\portal\portal\Innova.Client\node_modules\postcss-loader\src\index.js??extracted!C:\Users\jpleclerc\Desktop\portal\portal\Innova.Client\node_modules\sass-loader\lib\loader.js??ref--13-3!C:\Users\jpleclerc\Desktop\portal\portal\Innova.Client\src\styles.scss mini-css-extract-plugin

It doesn’t look like the same probleme as OP

+1
jpleclerc on Jun 17, 2019
Read more comments on GitHub
← angular: Ivy preview report: error TS-996002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class
angular: ivy throw [tagName] is not a known element →