Could not resolve "~material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.woff" [plugin angular-css-resource]

[alaindeurveilher]

Hi,

I am transforming a legacy big application into MFE. My application is already migrated to Angular 17.2.4, and angular Material 17.2.2 (recently updated from Angular v14 to v17 for the purpose of MFE).

When I configure the application to be a host:

ng g @angular-architects/native-federation:init --project name-in-angular-dot-json --port 4200 --type dynamic-host

and when I start the application after I get a lot of errors such as:

X [ERROR] Could not resolve "~material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.woff" [plugin angular-css-resource]

    src/app/modules/.../some-component.component.scss:382:120:
      382 │   src: local("☺"), url("~material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.woff2") format("woff2"), url("~material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.woff") format("woff"), url("~material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.ttf") format("truetype");
          ╵                                                                                                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can remove the tilde and use a relative path to reference it, which should remove this error.
  Preprocessor stylesheets may not show the exact file location of the error.

Or:

  ╷
2 │ @import 'src/styles/variables';
  │         ^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\app\modules\...\some-component.component.scss 2:9  root stylesheet
error: Can't find stylesheet to import.

In one of the scss imported in the style.scss I have this lines:

$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';
@import 'material-design-icons-iconfont/src/material-design-icons';

Unfortunately, I cannot share the code because it is proprietary to my company, but the application was running perfectly fine just before transforming it into a shell MFE.

I would like some guidance to help me investigate and possibly fix the problem.

Thank you.

[alaindeurveilher]

Update: Somehow some of the errors are gone.

I removed as suggested the tild sign in the scss file, and I updated the imports in the different scss files:

from: @import 'src/styles/variables'; to: @import 'variables';

(I have indeed some path resolutions in the angular.json file:

{
    "styles": [
        "src/styles/styles.scss"
    ],
    "stylePreprocessorOptions": {
        "includePaths": [
            "src/styles",
            "..."
        ]
    },
}

But I don't really understand "why" it is working now and not before, I don't like to do things blindly without understanding what I am doing. So if someone could help me understand what was the cause of the error, it would be very much appreciated.

But now I get the following error, a bit similar to the 1st error gone after removing the tild sign: "No loader is configued for eot files"

How to configure such loader? It didn't need to be configured before.

X [ERROR] No loader is configured for ".eot" files: node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.eot

    node_modules/material-design-icons-iconfont/dist/material-design-icons.css:7:11:
      7 │   src: url("./fonts/MaterialIcons-Regular.eot");
        ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1 of 7 errors shown (disable the message limit with --log-limit=0)
 ERR!  Error bundling shared npm package 
 ERR!  Build failed with 7 errors:
 ERR!  node_modules/@angular/flex-layout/fesm2020/angular-flex-layout-server.mjs:4:38: ERROR: Could not resolve "@angular/platform-server"
 ERR!  node_modules/material-design-icons-iconfont/dist/material-design-icons.css:7:11: ERROR: No loader is configured for ".eot" files: node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.eot
 ERR!  node_modules/material-design-icons-iconfont/dist/material-design-icons.css:9:25: ERROR: No loader is configured for ".woff2" files: node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.woff2
 ERR!  node_modules/material-design-icons-iconfont/dist/material-design-icons.css:9:85: ERROR: No loader is configured for ".woff" files: node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.woff
 ERR!  node_modules/material-design-icons-iconfont/dist/material-design-icons.css:9:143: ERROR: No loader is configured for ".ttf" files: node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.ttf

Thank you.