Could not resolve "~material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.woff" [plugin angular-css-resource]
alaindeurveilher opened this issue · comments
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.
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.