mdc-migration gives "character is out of bounds" without any context

[farshadhemmati]

Command

generate

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When I run:
ng generate @angular/material:mdc-migration

It asks me which directory and which components. No matter what I select, it shows the following right after:

Migrating components:
Migrating project: my-app
Character is out of bounds

No files get migrated. Nothing else happens. I don't know where I can look for the logs to see what exactly was out of bounds.

Minimal Reproduction

ng generate @angular/material:mdc-migration

leave blank for default

press enter for just 'button'

Exception or Error

Character is out of bounds

Your Environment

Angular CLI: 16.0.0
Node: 16.15.0
Package Manager: npm 8.5.5
OS: darwin arm64

Angular: 16.0.0
... animations, cdk, cdk-experimental, cli, common, compiler
... compiler-cli, core, forms, language-service, localize
... material, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.0
@angular-devkit/build-angular   16.0.0
@angular-devkit/core            16.0.0
@angular-devkit/schematics      16.0.0
@nguniversal/builders           16.0.0
@nguniversal/common             16.0.0
@nguniversal/express-engine     16.0.0
@schematics/angular             16.0.0
rxjs                            7.8.1
typescript                      4.9.5
webpack                         4.46.0

Anything else relevant?

No response

[amakhrov]

Migrating components:

Looks like no components have been selected for the migration.
Any chance you hit <enter> without selecting component(s) with a <space> first?

[chpoit]

It's not related to no components being selected, I've boiled it down to it being caused by files using the "UTF8 with BOM" or "Windows 1252" encoding causing the "magic-string" library to fail.

 at MagicString.remove (<base_path>\node_modules\magic-string\dist\magic-string.cjs.js:792:54)
    at UpdateBuffer.remove (<base_path>\node_modules\@angular-devkit\schematics\src\utility\update-buffer.js:89:32)
    at UpdateRecorderBom.remove (<base_path>\node_modules\@angular-devkit\schematics\src\tree\recorder.js:48:23)
    at UpdateRecorderBom.remove (<base_path>\node_modules\@angular-devkit\schematics\src\tree\recorder.js:71:22)
    at TemplateMigration.visitTemplate (<base_path>\node_modules\@angular\material\schematics\ng-generate\mdc-migration\index_bundled.js:25599:50)
    at <base_path>\node_modules\@angular\cdk\schematics\update-tool\index.js:113:47
    at Array.forEach (<anonymous>)
    at <base_path>\node_modules\@angular\cdk\schematics\update-tool\index.js:113:32
    at Array.forEach (<anonymous>)
    at UpdateProject.migrate (<base_path>\node_modules\@angular\cdk\schematics\update-tool\index.js:108:45)

I found it by changing the file <base_path>\node_modules\@angular\cdk\schematics\update-tool\index.js to have a try/catch around the "migration runner" around lines ~102-110

For those coming across this wanting to find their utf-8 with bom files easily, remove the "e" from the console log and "crash" the migration on purpose, it should list all your failing files. It is also possible for the resolvedStylesheets section to fail for the same reason

It would be helpful if the cdk could tell you that a file failed instead of forcing us to "hack" the library and find the issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}