Migration does not understand ~src/

[pyrophire]

While trying to migrate and Angular 10 with Angular Material 10 project, I've run into the issue below. We use ~src to prefix our @imports to avoid the ../../../ pattern in our scss files. I have been able to find a reference to this on the migration guide and am wondering if I need to rename all the ~src to fixed paths before attempting to migrate or is there a flag that needs to be set to have it understand ~src?

Error: Could not find Sass file at '~src/styles/vars'.
  ╷
1 │ @import '~src/styles/vars';
  │         ^^^^^^^^^^^^^^^^^^
  ╵

[jathak]

Where does ~src point to?

Paths starting with a ~ are a Webpack feature that we've approximated by having it checking for node_modules starting in the directory of the file and then checking parent directories until it finds one. You can pass a load path to the migrator (though for that, you'd want to remove the ~ from the front of your paths).

One unrelated note on Angular and the module system: are you referencing any variables, functions, or mixins from Angular components in your code? If so, you might want to wait to do this migration until Angular migrates, since the migrator works best when all dependencies are migrated first.

[pyrophire]

~src points to /src/, which allows us to use the ~src/styles/mixins for most of our components, no matter how deep they are nested without having to traverse up the file tree with ../../

Indeed the ~ is a webpack build feature that allows the Angular CLI to search from the root of the path and not need the absolute path.

We are not using anything from Angular/Material as an import aside from their theming which is required. I figured this one would be a problem for now, so I would exclude it from the @use conversion as it is referenced once for themes to be applied app wide.

I'll keep a look out for the AM's team announcement of migration.

[jathak]

Closing this now, since Angular has since migrated, and this issue should now be obsolete.