As a newcomer to Angular, I recently completed the tutorial and am now working on my first app.
While trying to add an OTF file, everything went smoothly. However, when I made a change to my app.component.css file and included this code snippet:
@font-face { font-family: bookman; src: url('../../../BOOKOS.TTF'); }
An error popped up in my browser:
Failed to compile.
../BOOKOS.TTF
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./src/app/app.component.css 7:186-216
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
I turned to some online resources, such as this page here:
Why does module parse failed: /xxx/MyFont.ttf Unexpected character ''
They recommended adding the following code snippet:
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
}
to the rules array of my webpack configuration.
The issue is, I have no understanding of what that entails. It seems like webpack might be a JavaScript library operating under Angular's hood, but I don't see any webpack configuration files in my directory structure.