Unexpected issue occurred in Angular 16 when utilizing less compiler. Error message displayed: "URL token should be closed with a ')'."

I'm having trouble locating the missing parenthesis. It seems like the issue may not be in this file. Any suggestions on how to troubleshoot this?

I've already disabled optimization

 "optimization": false


./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
C:/Users/xxxxx/Desktop/xxxx/xxxxxx/src/app/Components/home/home.component.less:508:38: ERROR: Expected ")" to end URL token

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
C:/Users/xxxxx/Desktop/xxxx/xxxxx/src/app/Components/home/home.component.less:508:38: ERROR: Expected ")" to end URL token

The File in Question

@import "../../../styles.less";
@import "../../../assets/StyleSheets/Tag.less";
@import "../../../assets/StyleSheets/Buttons.less";

@import "../../../assets/StyleSheets/Tabs.less";
@import "../../../assets/StyleSheets/Modal.less";

@import '../../../assets/StyleSheets/Colors.less';
@import '../../../assets/StyleSheets/Inputs.less';
@import '../../../assets/StyleSheets/Alerts.less';

angular version

Angular CLI: 16.2.0
Node: 20.5.1 (Unsupported)
Package Manager: npm 9.8.1
OS: win32 x64

Angular: 16.2.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.0
@angular-devkit/build-angular   16.2.0
@angular-devkit/core            16.2.0
@angular-devkit/schematics      16.2.0
@angular/cli                    16.2.0
@angular/http                   7.2.16
@schematics/angular             16.2.0
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.1
angulartypescript

Answer №1

My experience led me to encountering an issue with the ng build command, resulting in a failure due to an unexpected token error related to a closing parenthesis. I managed to resolve this error by creating a variable and redeclaring it, enclosing the value of the url function in double quotes.

Below is the solution that successfully worked for me.

 // --bs-btn-close-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e);
    --bs-btn-close-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");

Answer №2

Something unexpected occurred when a module was not compatible with the IVY engine. One of our developers took the bold step of using npm update --force to update everything. To troubleshoot, I systematically commented out each .less file until the culprit was identified. After removing the problematic package, I slowly reintroduced the .less files one by one, testing with ng server to ensure successful builds. With all .less files restored, the project finally compiled successfully!

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

Forwarding routes with Angular Router

My server has specific mappings for different URLs: / serves an Angular application with routing capabilities /admin serves a Django control panel for staff database updates /api and /api/... serve REST endpoints to handle queries and return JSON data I ...

angularangular-routing

When Typescript Encounters Compilation Errors, Treat Them as Warnings Instead

After using npx create-react-app my-app --typescript to create my app, I want to set it up in a way that allows me to compile it even when there are typescript errors, so I can address them later. I couldn't find any compilerOptions for this. Is ther ...

reactjstypescriptcreate-react-app

Adding a local image to Firebase Storage in Angular5 / Ionic3

Uploading images is a breeze using the following method (select input file): import { AngularFireStorage } from 'angularfire2/storage'; @Component({ selector: 'app-root', template: '<div>' + '<input c ...

javascriptangularfirebaseionic3firebase-storage

Tips for dynamically updating the Header name based on backend data

I am currently utilizing ag-grid within my Angular application. Within the columnDefs array, I have defined headers for my grid. One of the headers is for a column labeled Amount. My goal is to make this header dynamic, so that if the currency value coming ...

angularag-grid

Is it secure to use ES6 in Typescript with nodejs/koa?

As I transition to using TypeScript in a Node.js/koa project, I came across the need to modify the .tsconfig file to target ES6. Otherwise, an error message will appear stating: Generators are only available when targeting ECMAScript 6 or higher. // index ...

javascriptnode.jstypescript

What is the process of substituting types in typescript?

Imagine I have the following: type Person = { name: string hobbies: Array<string> } and then this: const people: Array<Person> = [{name: "rich", age: 28}] How can I add an age AND replace hobbies with a different type (Array< ...

javascriptreactjstypescripttypes

Using the input type 'number' will result in null values instead of characters

My goal is to validate a number input field using Angular2: <input type="number" class="form-control" name="foo" id="foo" [min]="0" [max]="42" [(ngModel)]="foo" formControlName="foo"> In Chrome, everything works perfectly because it ignores ...

javascriptvalidationangulartypescript

Choosing between running a single unit test or multiple tests using Karma toggle switch

Currently, I am working on writing unit tests using the Karma/Jasmine combination and I'm curious if there's a way to target a specific spec file for testing instead of running all the spec files in the files array defined in the karma.conf.js fi ...

angularkarma-jasmine

The parameter type 'typeof LogoAvatar' cannot be assigned to the argument type 'ComponentType<LogoProps & Partial<WithTheme>'

Why is the argument of type typeof LogoAvatar not assignable to a parameter of type ComponentType<LogoProps & Partial<WithTheme>? Here is the code snippet: import * as React from "react"; import { withStyles } from "@material-ui/core/style ...

reactjstypescript

Encountering an error when utilizing Angular Animation with Bootstrap -> Issue arises from attempting to read properties of undefined (specifically 'box-sizing')

To access the source code of Git, visit https://github.com/codezj/exampleAppAnimation. I recently developed a method to extract Bootstrap CSS and utilize it as CSS in Angular. However, I encountered an error while running the Angular project: Uncaught Typ ...

cssangularanimationbootstrap-4

Ways to resolve the issue: ""@angular/fire"' does not contain the exported member 'AngularFireModule'.ts(2305) in an ionic, firebase, and

I am facing an issue while attempting to establish a connection between my app and a firebase database. The problem arises as I receive 4 error messages in the app.module.ts file: '"@angular/fire"' has no exported member 'AngularFi ...

angulartypescriptfirebaseionic-framework

Utilize personalized Bootstrap variables within your Angular application

I am attempting to customize the default colors of Bootstrap within my Angular project. I have established a _variables.scss file in the src directory. Within this file, I have included the following code: $primary: purple; Next, I imported my _variables ...

angularsassbootstrap-4

What modifications have been made to package import scope in Angular 9?

During the migration process of a large V8 application to V9, I encountered errors related to components using Material components. Specifically, I received the following error message: error NG8001: 'mat-icon' is not a known element. To resolve ...

angularangular9angular-ivy

Having trouble getting errors to display on the Input onChange event with Antd

When using Antd, I am having trouble getting errors in the onChange event. Even when there is an error in a field, I cannot see the errors while typing in that particular field. For example; https://stackblitz.com/edit/react-qurm1n?file=demo.tsx Here are ...

reactjsangularreact-nativenext.jsantd

Tips for maintaining the selected state of a row using Typescript and the option tag

Here is the code for a dropdown: <div class="col-md-6"> <label for="inertiaStart" style="float: left; width: 17%;">Inertia Start</label> <select ng-model="selectedShiftChannel" style="float: left; width: 70%;height: 26 ...

htmlangulartypescript

Using ngFor to iterate over a list of items in Angular and displaying them conditionally using ng

In the process of creating a template, I am faced with this challenge: <ul> <li *ngFor='let link of links'> <ng-container *ngIf="link.type == 'complex'; then complexLink else simpleLink"></ng-container& ...

angularangular-templateng-template

Display a loading indicator in Angular during app initialization with APP_INITIALIZER

Is there a way to display a waiting indicator while the Angular app is running the app_initializer code? Currently, I can display a waiting indicator until the app is fully loaded. However, once the page loads, it remains empty until the app_initializer c ...

angular

`Angular Image Upload: A Comprehensive Guide`

I'm currently facing a challenge while attempting to upload an image using Angular to a Google storage bucket. Interestingly, everything works perfectly with Postman, but I've hit a roadblock with Angular Typescript. Does anyone have any suggesti ...

javascriptangulartypescripttwitter-bootstrapgoogle-cloud-storage

Exploring Query Parameters in Angular 4

Is it possible to generate a custom URL in Angular 4? For instance: http://localhost:4200/#/page/page2/6/abc/1234 Currently, I am utilizing query parameters like this: this.router.navigate(['page/page2/' + row.id],{ queryParams: {'name&a ...

angularangular4-router

Explain the concept of a static async create method having identical parameters as the constructor

I have a lot of existing classes that require refactoring to utilize an async constructor. Here's an example: class ClassA { constructor(a: number, b: string, c: string) { //... } //... } I've included an async create method ...

typescript