Issue encountered: Compilation error occurred following the update from Angular 11 to Angular 15, stemming from the module build failure within the sass-loader directory

I recently attempted to update angular from version 11 to 15, but encountered an error as shown in the screenshot below

./src/assets/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected "(". ╷ 90 │ $cragcity-toolbar-typography: mat.define-legacy-typography-configmat.define-legacy-typography-config( │ ^ ╵ assets\cragcity-theme.scss 90:73 @import assets\styles.scss 1:9 root stylesheet

view image description here

styles.scss

@import './material-overrides.scss';

@font-face {
    font-family: 'LuloCleanW01-OneBold';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('LuloCleanW01-OneBold Bold'), url(../assets/fonts/FontsFree-Net-Lulo-Clean-W01-One-Bold.ttf) format('truetype');
}

...

package.json

  "name": "cragcity-website",
  "version": "0.0.1",
  ...

cragcity-theme.scss


@import './cragcity-palette.scss';

// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
//  The following line adds:
//    1. Default typography styles for all components
//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
...

thanks

cssangularsassbuildmodule

Answer №1

It is advisable to upgrade your Angular version one step at a time. This way, you can easily address any module or bundle dependencies that may arise.

For additional guidance on upgrading your Angular version, I recommend checking out this link: https://update.angular.io/.

Answer №2

Although this topic may be considered dated, I faced a similar issue in the past. A solution that worked for me was to incorporate the following code snippet:

 "build": {
      "options": {
        "stylePreprocessorOptions": {
            "includePaths": ["node_modules"]
        }
      }
    }

into the angular.json configuration file.

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

Error Encountered During Angular Production Build: Plugin "proposal-numeric-separator" Not Found

After trying to build the production version, I encountered an error message stating that Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it.. Please refer to the screenshot of the error attached b ...

angularnpmangular8npm-installng-build

The arrow extends just a hair below the boundaries of the div, by approximately 1 pixel

I am facing an issue with my nav bar code. In Firefox and Chrome, everything works perfectly fine - there is a small arrow displayed below the links when hovered over. However, in Internet Explorer, the arrow appears slightly below the div, causing only pa ...

htmlcss

Displaying Empty Boxes using Font Awesome

I was able to show Font Awesome properly before, but now it's not working even though I haven't made any changes. I've attempted various solutions but nothing seems to be fixing the issue. My goal is to display it as a placeholder. Below is ...

htmlcsstwitter-bootstrapfont-awesomebootstrap-4

Creating an input field within a basic jQuery dialog box is not possible

Can anyone assist me in adding an input box to my dialog box? I am working with jquery-ui.js. Here is the code I currently have: $(document).on("click",".savebtn",function(). { var id = $(this).attr("id"); $.dialog({ ...

javascriptjqueryhtmlcssajax

Karma error `An unhandled exception occurred: Cannot locate module ‘karma’` is encountered during Jest Angular testing

Looking to implement Jest testing in my Angular project, I have followed all the setup instructions provided here. Here is an excerpt from my package.json: { "name": "jest-test", "version": "0.0.0", ... } Additionally, here ...

angularunit-testingjestjsts-jest

Retrieve JSON information from an API using Angular 2

I am facing an issue with retrieving JSON data from an API that I created. Despite using Angular code to fetch the data, it seems to be unsuccessful. Here is the code snippet: getBook(id: string){ return this._http.get(this.url + 'books/' + ...

jsonangular

Starting a fresh Angular project yields a series of NPM warnings, notably one that mentions skipping an optional dependency with the message: "npm

Upon creating a new Angular project, I encounter warning messages from NPM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="68e01b0d1e0d061c7518d7">[email protecte ...

javascriptnode.jsangulartypescriptnpm

Error Message: The Reference.update operation in Angular Firebase failed due to the presence of undefined value in the 'users.UID.email' property

Having recently started to use the Firebase database, I encountered an issue while trying to update the UID to the Realtime Database during signup. The error message displayed was: Error: Reference.update failed: First argument contains undefined in prop ...

angulartypescriptfirebasefirebase-realtime-database

Angular9 integrated with Firebase to enhance the capabilities of

I am facing an issue with displaying a specific element from the database. //component.html <section class="firee"> <figure class="snip1208"> <div *ngFor="let scholarship of scholarships" > <h3>{{scholarshi ...

angularfirebasefirebase-realtime-databaseangularfire2

The requested style from ' was denied due to its MIME type ('text/html') not being compatible with supported stylesheet MIME types, and strict MIME checking is enforced

It's strange because my style.css file in the public folder works on one page but gives me an error on another. I'm not sure why it would work on one page and not on the other. The CSS is imported in index.html so it should work on all pages of t ...

javascriptcssreactjsnode.jsreact-router

What steps can I take to fix the Error with webpack's style hot loader JavaScript?

Just starting out with native script and encountered an issue when running this code: <template> <view class="container"> <text class="text-color-primary">My Vue Native Apps</text> </view> </template> &l ...

javascriptcssvue.jsnativescriptnativescript-vue

Using POST parameters with HTTP Client in Angular 2

I have been working on converting my jQuery code into Angular2. While the jQuery code is functioning correctly, the Angular2 code seems to be producing a different output from the API. I have already compared the parameters and endpoint using firebug/cons ...

angular

What is the best way to position text at the bottom of an image using CSS?

Utilizing the jQuery Caption Plugin to showcase the image alt text when hovering over an image. Currently, the text is displaying at the top but I would like it to show at the bottom. Any suggestions on how to remedy this? Desired Outcome: Check out the ...

jqueryhtmlcssimage

Differences between Angular2 local template variables and Jade ID shortcutsIn Angular2, local

Angular2 has introduced the local template variable feature, which is created using #var. When using the Jade Template Engine, this syntax gets converted to #var="var". Is there a method to avoid this conversion? Otherwise, accessing the original local t ...

pugangular

I would like to apply my CSS styles to all the hyperlinks on my website

This is the CSS code I created: img{width:85%; height:auto;} #thumbwrap { position:relative; } .thumb img { border:1px solid #000; margin:3px; float:left; } .thumb span { position:absolute; visibility:hidden; } .thumb:hover, .thu ...

htmlcss

The Nrwl Nx administrative page located within the server instance

Hopefully my question is clear. We are working with a monorepo at nrwl that includes 2 applications, client and client-admin. I'm looking for the best way to deploy both of these applications on the same server but with different routes. Client-app ...

angularnrwl

Chrome Not Responding to Angular5 Debugging

I'm facing an issue where I used to be able to set breakpoints in my Angular code using developer tools, and it would pause correctly. However, recently the network files are not being mapped to my local files properly. For a detailed explanation, ple ...

angulargoogle-chrometypescriptsource-mapsgoogle-developer-tools

Challenge encountered when utilizing angular 2 RC router for programmatic route navigation

Currently, I am utilizing the RC router in version rc1 with two defined routes as shown below: @Routes([ {path: '/', component: HomeComponent}, {path: '/signin', component: SigninComponent}, {path: '/dashboard', c ...

angularangular2-routing

Ensure that the table is padded while keeping the cells collapsed

I am currently working on creating a table with borders between each row. However, I am facing an issue where the row borders are touching the outer border of the table. Despite my efforts, I have been unable to find a solution to this problem. I feel like ...

htmlcssbordercss-tablesspacing

Reduce the size of a container element without using jquery

In my Angular application, I have structured the header as follows: -- Header -- -- Sub header -- -- Search Box -- -- Create and Search Button -- -- Scroll Div -- HTML: <h1> Header </h1> <h3> Sub header </h3> <div class="s ...

javascripthtmlcssangulartypescript