Error: Angular material font missing

When attempting to integrate materialize into my project, I encountered an issue while trying to add:

"./node_modules/materialize-css/dist/js/materialize.js"

and

"./node_modules/materialize-css/sass/materialize.scss",

to webpack.config.json.

Upon building the project, I received the following error (among others):

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./~/materialize-css/sass/materialize.scss
Module not found: Error: Can't resolve '../fonts/roboto/Roboto-Thin.woff2' in 'C:\Users\Administrateur\Documents\dev\git\front-ptc-angular\node_modules\materialize-css\sass'
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./~/materialize-css/sass/materialize.scss 6:77358-77402
 @ ./~/materialize-css/sass/materialize.scss
 @ multi ./~/materialize-css/sass/materialize.scss ./src/assets/scss/main.scss

Any thoughts on how to solve this?

UPDATE:

I installed angular2-materialize and materialize-css via npm,

then included the mentioned lines in my webpack configuration.

angulartypescriptwebpackangular-climaterialize

Answer №1

After encountering the identical issue using materialize via bower, I successfully fixed it by duplicating the directory / fonts / roboto to the same level where the materialize css and js directories are located.

Answer №2

When utilizing angular2-materialize, it is important to verify that you are using materialize version 0.100.2 as it is the only compatible version.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to enhance Request using Typscript in nodejs

In my middleware, I am attempting to enhance the Request by adding a property called user. However, I encountered this error: Property 'user' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs>' I am trying to u ...

node.jstypescript

What is the process for linking to data-content?

Attempting to implement the code found at http://getbootstrap.com/javascript/#popovers-examples <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It&apo ...

angular

Exclude the bundled .d.ts files and opt for external declarations instead

I am endeavoring to implement the validate.js library, which comes with its own TypeScript declaration file. However, the provided typing for the library is not very accurate, and there is a more superior one available in DefinitelyTyped. Despite installi ...

typescript

What is causing this error to appear during the npm install process in my Angular project?

I encountered an issue in my Angular 7 project recently. When running npm install, the following error occurred: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-pro ...

angularnpm

Enhancing validation in Express with custom Typescript types for validation in Express Validator

I encountered an error while using the custom method of the express validator Issue: Argument of type '(userDoc: User | null) => Promise<never> | undefined' is not assignable to parameter of type '(value: User | null) => Promise ...

typescriptexpressexpress-validator

Can a Python script be executed asynchronously in a TypeScript fashion?

Currently, I have a Python script that sends an http request to a microservice, and the request typically takes 3 seconds to complete. Here is a summary of my Python script: def main(): response = request_to_MS(url) # This part of the process doesn& ...

pythonpython-3.xtypescriptasynchronous

Guide to navigating to a specific route based on location in a Node.js Express application

Currently, I am integrating the official i18n library to localize my Angular Universal application and utilizing a proxy to deliver the localized versions. The app is functioning properly when there is a language specified in the URL (e.g: /en/page), but e ...

node.jsangularexpresslocalizationinternationalization

Trouble encountered when implementing multiple conditions for checkboxes in an Angular 8 application

In my form, there are four checkboxes (3 for options and 1 for setting a plan) which have specific requirements: If all three options are checked, the set plan checkbox is automatically checked and the options disappear If the set plan checkbox is checke ...

cssangulartypescript

"Looking to swap out the Angular theme's CSS stylesheet for your entire application? Here's

I was initially facing an issue while trying to import CSS through index.html as I kept getting a MIME type error: enter image description here The browser refused to apply the stylesheet from 'http://localhost:4200/css/pink-bluegrey.css' because ...

cssangulartheming

What is the correct way to extract a value from a keyvalue pair?

When dealing with an object that returns boolean "issues", I specify it as a string. If the value is true, I aim to show a checkmark; if false, I want to display a cross. <ul *ngFor="let filtered of reposFiltered | keyvalue"> <li *ngIf=& ...

angulartypescriptobjectwebfrontend

Leveraging dependency injection in Angular 2+ with pre-loaded models

I desire the ability to create an instance of a model using a constructor while also providing injected services to that model. To clarify, I envision something like this: var book = new Book({ id: 5 }); // creates instance, sets id = 5 book.makeHttpCa ...

javascriptangular

Double Calling of Angular Subscription

I am currently working with a series of observables that operate in the following sequence: getStyles() --> getPrices() Whenever a config.id is present in the configs array, getStyles() retrieves a style Object for it. This style Object is then passed ...

javascriptangulartypescriptobservable

Angular 2 RC 4's ViewUtils provider offers a range of functionalities for optimizing views

Is there a way to dynamically load a child component in a parent view? this.viewAddedSubscription = viewManager.viewAdded.subscribe((view) => { let injector = ReflectiveInjector.resolveAndCreate([new Provider('view', { useValue: view })] ...

angular

Navigating the node and npm ecosystems for importing paths

I am currently working with an NPM module that utilizes another local NPM module which contains shared code. Both of these modules are not public, they are only used locally. In my package.json file, I include the shared module like this: "my-shared": " ...

node.jstypescriptnpm

Encountered an issue during the compilation of Angular 14 with Bootstrap 5 for a modal

/node_modules/@ng-bootstrap/ng-bootstrap/fesm2020/ng-bootstrap.mjs:17281:25-40 - An error occurred: The export 'createComponent' (imported as 'createComponent') was not found in '@angular/core'. Possible exports include ANALYZ ...

angularbootstrap5-modal

Angular code can sometimes trigger TS2345 and TS2339 errors for seemingly straightforward tasks

I am currently in the process of learning how to utilize D3 with angular. As a beginner, I decided to work on a simple project that was originally created by William Liu a few years back (http://bl.ocks.org/WilliamQLiu/76ae20060e19bf42d774). While I manage ...

angulard3.js

Ways to dynamically access input errors

Exploring My Implementation I have devised a function that takes an argument to access specific formik errors dynamically. This requires using bracket notation instead of dot notation as shown below: import {useFormikContext} from 'formik'; fun ...

typescriptformik

I'm diving into the world of Typescript and trying to figure out how to use tooltips for my d3 stacked bar chart. Any guidance on implementing mouseover effects in Typescript would be greatly

I am currently facing some issues with the code below and need guidance on how to proceed. I am new to this and unsure of how to call createtooltip. Any assistance would be greatly appreciated. The error message states that createtooltip is declared but n ...

angulartypescriptd3.js

Create a functioning implementation for retrieving a list of objects from a REST API

I am looking to incorporate an Angular example that retrieves a list from a REST API. Here is what I have attempted: SQL query: @Override public Iterable<Merchants> findAll() { String hql = "select e from " + Merchants.class.getName ...

springangulartypescript

Issue with Angular2-Meteor application: unable to establish connection with MySQL database through Meteor framework

Having trouble connecting to a MySQL database with Meteor using nodets:mysql and encountering the following error message: Unhandled rejection Error: No data can be retrieved from your database, please verify your permissions Here's the snippet of c ...

mysqlmeteortypescriptangular