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

Unable to alter the background color of the text box

I am currently struggling with my code where I am trying to overlay a text box on an image. Even after setting the background color to white, it still shows up as transparent. I have successfully done this in the past, but for some reason, it is not work ...

htmlcssbackground-color

The error was thrown at line 883 in the cjs/loader.js file of the

I'm encountering an error when trying to run npm start (I've included a screenshot of the error below) in my Angular project. However, everything works fine when I use ng serve. I've attempted multiple solutions to resolve this issue with ...

angularnpmangular-clinpm-install

What is the best way to include additional text in a dropdown menu?

I'm trying to add the text "Choose Country" in a drop-down list before the user selects their country. example1 Here is the line of code I used: <option data-hidden="true"> Choose Country </option> However, the phrase does ...

javascripthtmlangularbootstrap-5

Continue scrolling once you reach the fixed-positioned div

live demo html <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> css .container{ margin: 0; padding: 0; ...

jqueryhtmlcss

Identifying when floats exceed their limits

Is there a way to identify overflow on floating elements? It's important to note the difference between setting overflow to visible or hidden. overflow: visible; overflow: hidden; Do all floated elements inherently contain overflow? Why is it chal ...

csscss-floatoverflow

The Framework of Storing Data in Angular 2

Embarking on a new project for a corporate client, I find myself in the initial stages of making fundamental architectural decisions. While my background lies with .NET applications, WPF and Flash, this new venture requires web delivery, leading me to cons ...

databaseangulararchitecture

Fading Out with JQuery

My page contains about 30 same-sized divs with different classes, such as: .mosaic-block, .events, .exhibitions, .gallery, .sponsors, .hospitality, .workshops, .lectures { background:rgba(0, 0, 0, .30); float:left; position:relative; overf ...

javascriptjqueryhtmlcssfade

How to show a tooltip inline by utilizing CSS styling

Working on a sticky side bar menu with a tooltip feature. While it appears correctly in Chrome and Safari, the tooltip is off-center in IE. This snippet seems to be causing the issue: /* Vertically center tooltip content for left/right tooltips */ .tool ...

htmlcssinternet-explorer

After pressing the login button, my intention is to transition to a different page

I am relatively new to web development and working with angular. I have a login component that, upon hitting the LOGIN button, should redirect to another component on a different page. However, currently, when I click the button, it loads the data of the o ...

htmlcssangulartypescript

Applying hover effect to material-ui IconButton component

As stated in the React Material-UI documentation, I have access to a prop called hoveredStyle: http://www.material-ui.com/#/components/icon-button I intend to utilize the IconButton for two specific purposes: Make use of its tooltip prop for improved ac ...

javascriptcssreactjsmaterial-ui

The footer row in jqgrid is experiencing issues with functionality

I am trying to create a jqgrid table with three footer rows to display a total at the end of each grid. Following the guidance in this helpful post from Oleg on How to create two footer rows in jqgrid, I was able to modify the code provided to show three t ...

jqueryhtmlcssjqgridsalesforce

clicking a table row will activate the *ngFor directive

Incorporating data from an API into a table, I have enabled the functionality for users to click on table rows in order to change the displayed data using background code: <tr [ngClass]="tablerowClass" *ngFor="let dataObject of data$ | async" (click)=" ...

htmlangulartypescript

Redirect to the homepage if the requested page is not found in IIS

Within my IIS Website, there are three applications being hosted. The main website is an Angular App, alongside an API application housing all APIs and another application that is a pure javascript project hosted under the application alias /vmenu/. Any r ...

angulariis

How to manage the three states (InProgress, Success, Error) of a dropdown dynamically in AngularJS with ng-show/hide?

Currently, I have implemented a bootstrap dropdown that loads a list of countries by making an external API call. My goal is to display three different states of behavior (progress, success, error) in the dropdown using ng-show/hide. However, I am unsure h ...

javascriptjquerycssangularjstwitter-bootstrap

Create a placeholder class for the Form Builder group component within an Angular application

Currently, I am in the process of creating numerous new forms. For instance: constructor(private formBuilder: FormBuilder) { this.userForm = this.formBuilder.group({ 'name': ['', Validators.required], 'email&apo ...

angulartypescriptformbuilder

Setting options using the form group in dropdowns in Angular can greatly enhance the user experience

I have created a FormGroup called holidayform and set it up as follows: holidayform: FormGroup; this.holidayform = this.fb.group({ title: ['', [Validators.required]], entryDate: ['',], }) this.holidayform.patchValue ...

angulartypescript

creating an animated loop within an Angular template

How can we display a dynamic loop in Angular template using an array of object data? [ { "name": "name", "text": "text", "replies": [{ "name": "Reply1", "t ...

javascripthtmlangular

I ran into a SyntaxError: The usage of 'import.meta' outside of a module is not allowed - Nx Monorepo

In setting up an angular nx monorepo, two applications were created. However, when attempting to start either of them, the following error message appears: https://i.stack.imgur.com/YwYzu.png There have been suggestions on stackoverflow advising to add " ...

angularmonoreponrwl

The seamless fusion of Express with Typescript

Hello and thank you for taking the time to assist me. I recently completed a Cron app using Node.JS. I wanted to add a website hosted by the Node.js server with Express. I developed this TypeScript website in a separate folder, but encountered errors when ...

node.jsexpresstypescriptangular

I am looking for an HTML solution that allows me to neatly stack photos of different sizes in two columns, always prioritizing the column with more empty space

Is there an easy method to populate two columns, each with a width of 50%, with photos in a way that the next photo is always added to the column with more available space? The photos come in different sizes but should be able to fit within the width of t ...

htmlcssstackalignment