Error: path ... is a file when running ng update @angular/material

[Juarrow]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

I don't know

Description

After updating Angular 11 -> 12

When running the command ng update @angular/material it fails while encountering a reference of a css file in the styleUrls-property of a @component annotation.

🔬 Minimal Reproduction

🔥 Exception or Error

[error] Error: Path "/node_modules/@baklavajs/plugin-renderer-vue/dist/styles.css" is a file.
    at HostTree.getDir (C:\projects\subproject-core\subproject-frontend\node_modules\@angular-devkit\schematics\src\tree\host-tree.js:227:19)
    at HostTree.getDir (C:\projects\subproject-core\subproject-frontend\node_modules\@angular-devkit\schematics\src\tree\host-tree.js:235:58)
    at HostTree.getDir (C:\projects\subproject-core\subproject-frontend\node_modules\@angular-devkit\schematics\src\tree\host-tree.js:235:58)
    at DevkitFileSystem._isExistingDirectory (C:\projects\subproject-core\subproject-frontend\node_modules\@angular\cdk\schematics\ng-update\devkit-file-system.js:82:32)
    at DevkitFileSystem.exists (C:\projects\subproject-core\subproject-frontend\node_modules\@angular\cdk\schematics\ng-update\devkit-file-system.js:50:57)
    at Object.host.directoryExists (C:\projects\subproject-core\subproject-frontend\node_modules\@angular\cdk\schematics\update-tool\utils\virtual-host.js:62:52)
    at Object.directoryProbablyExists (C:\projects\subproject-core\subproject-frontend\node_modules\typescript\lib\typescript.js:18294:46)
    at loadNodeModuleFromDirectoryWorker (C:\projects\subproject-core\subproject-frontend\node_modules\typescript\lib\typescript.js:40029:66)
    at loader (C:\projects\subproject-core\subproject-frontend\node_modules\typescript\lib\typescript.js:40131:17)
    at loadModuleFromSpecificNodeModulesDirectory (C:\projects\subproject-core\subproject-frontend\node_modules\typescript\lib\typescript.js:40150:16)
    at loadModuleFromImmediateNodeModulesDirectory (C:\projects\subproject-core\subproject-frontend\node_modules\typescript\lib\typescript.js:40101:58)
    at C:\projects\subproject-core\subproject-frontend\node_modules\typescript\lib\typescript.js:40091:39
    at Object.forEachAncestorDirectory (C:\projects\subproject-core\subproject-frontend\node_modules\typescript\lib\typescript.js:6390:26)
    at loadModuleFromNearestNodeModulesDirectoryWorker (C:\projects\subproject-core\subproject-frontend\node_modules\typescript\lib\typescript.js:40085:19)
    at loadModuleFromNearestNodeModulesDirectory (C:\projects\subproject-core\subproject-frontend\node_modules\typescript\lib\typescript.js:40077:16)
    at tryResolve (C:\projects\subproject-core\subproject-frontend\node_modules\typescript\lib\typescript.js:39796:34)

🌍 Your Environment

Angular CLI: 11.2.6
Node: 14.15.4
OS: win32 x64

Angular: 
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.6 (cli-only)
@angular-devkit/build-angular   < error >
@angular-devkit/core            11.2.6 (cli-only)
@angular-devkit/schematics      11.2.6 (cli-only)
@angular/cli                    11.2.6 (cli-only)
@schematics/angular             11.2.6 (cli-only)
@schematics/update              0.1102.6 (cli-only)
rxjs                            6.6.3 (cli-only)
typescript                      4.2.3 (cli-only)

[crisbeto]

@devversion it looks like our schematic code is trying to process something inside the node_modules. Do you what might be causing it?

[devversion]

Do you have a snippet showing how the external style is referenced in the styleUrls? Is it just the path as written out in the error, or is the URL different there?

[devversion]

I've looked more into it. This seems related to b8b3923.

The Angular devkit calls getDir recursively (to walk up the path) if there are no cache entries, and the getDir call will break if it discovers a file and folder named equally. We tried to guard against this for the first parent by calling this._tree.exists(), but this does not capture cases where getDir walks up multiple levels. This can happen if TS tries to guess paths.

Something I find surprising though: Why does TypeScript try to resolve your stylesheet path in styleUrls. Are you using a dynamic import statement or something around that? (e.g. import(<..>, or require)