An unfamiliar compiler option 'files' is being used to launch ./node_modules/.bin/ng-xi18n

I am attempting to translate my Angular 4 application by running the following command from the root directory:

./node_modules/.bin/ng-xi18n However, I encountered an issue and here is the error log:

    Error: Error Unknown compiler option 'files'.
    at UserError.Error (native)
    at new UserError (/Users/danilodughetti/Coding/creatiweapp/creatiwe/node_modules/@angular/tsc-wrapped/src/tsc.js:27:28)
    at check (/Users/danilodughetti/Coding/creatiweapp/creatiwe/node_modules/@angular/tsc-wrapped/src/tsc.js:93:15)
    at Tsc.readConfiguration (/Users/danilodughetti/Coding/creatiweapp/creatiwe/node_modules/@angular/tsc-wrapped/src/tsc.js:152:9)
    at Object.main (/Users/danilodughetti/Coding/creatiweapp/creatiwe/node_modules/@angular/tsc-wrapped/src/main.js:65:28)
    at Object.<anonymous> (/Users/danilodughetti/Coding/creatiweapp/creatiwe/node_modules/@angular/compiler-cli/src/extract_i18n.js:16:9)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
Extraction failed

My package.json file looks like this:

"name": "eheheh", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^4.4.3", "@angular/cdk": "^2.0.0-beta.12", "@angular/common": "^4.2.4", "@angular/compiler": "^4.2.4", "@angular/core": "^4.2.4", "@angular/forms": "^4.2.4", "@angular/http": "^4.2.4", "@angular/material": "^2.0.0-beta.12", "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", "angular2-uuid": "^1.1.1", "angularfire2": "^4.0.0-rc.2", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "firebase": "^4.4.0", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "ng2-markdown-to-html": "^1.3.2", "ng2wig": "^0.2.1", "ngx-loading": "^1.0.7", "rxjs": "^5.4.2", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "1.4.3", "@angular/compiler-cli": "^4.2.4", "@angular/language-service": "^4.2.4", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "~3.1.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.3.2", "typescript": "~2.3.3" } }

Thank you

angulartypescriptcommand-line-interface

Answer №1

If you come across the error message 

Error Unknown compiler option 'files'
in a TypeScript project, it is highly likely that there is an issue with your tsconfig.json file.

The incorrect configuration may look like this:

// tsconfig.json
{
  "compilerOptions": {
    ...
    "files": [ ... ]
  }
}

Instead, it should be structured like this:

/// tsconfig.json
{
  "compilerOptions": {
    ...
  },
  "files": [ ... ]
}

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

Using an Angular 2 filter pipe to search across multiple values

Currently, I am working on implementing a filter for a table of users using pipes. While I have successfully made it work for filtering based on one selection, I am now attempting to extend this functionality to accommodate multiple selections. It's i ...

angulartypescriptangular-pipe

Utilize TypeScript function types in React for enhanced functionality

I have made the decision to refactor a project that was originally created with vanilla JavaScript and now I want to transition it to TypeScript. One issue I am facing is how to pass a function as a type on an interface. Although I referred to the TypeScr ...

reactjstypescript

Utilizing the array.map method to access the key of an object within an array of arrays in TypeScript

Can I utilize array.map in TypeScript to apply a function with the parameter being the key of an object within an array? I have an array containing objects which have keys 'min' and 'max'. I am looking to use something like someArrayFun ...

arraystypescript

Learn the process of marking an option as selected within an Angular component

I have an Angular component that displays a question along with a dropdown menu (<select>) to choose from various answers. My goal is to programmatically set one of the options as selected based on certain parameters present in the application' ...

javascriptangular

How to retrieve the value of a nested checkbox in Angular using dynamic methods

I successfully developed dynamic nested checkboxes in Angular and now I am looking to retrieve the values of the selected checkboxes. However, I encountered an issue with the JSON structure needed to implement this functionality. https://i.stack.imgur.com ...

arraysjsonangular

Sonarqube coverage report is missing in Gitlab CI, but it works fine when running locally

I have encountered an issue with my Angular application deployed via GitLab CI. The deployment to the hosted Sonarqube instance is successful, but none of the code coverage reports are appearing unfortunately. Below is my GitLab yml file: stages: - te ...

angularsonarqubegitlabsonarqube-scan

Relocating to new pages as WebSocket connection terminates and then reconnects

Currently working on a React project with Vite, encountering an issue where the websocket connection closes and re-establishes when navigating to another page using the sidebar. Main.tsx :- import ReactDOM from 'react-dom/client'; import App fro ...

javascriptreactjstypescriptvite

Stop modal from closing in the presence of an error

My approach involves using a generic method where, upon adding a food item, a modal window with a form opens for the user to input their details. However, since backend validation for duplicate items can only be retrieved after the API call completes. I w ...

javascript.netangulartypescriptbootstrap-4

The combination of [(ngModel)] and name is not compatible with angular's ng-autocomplete feature, causing it to malfunction

I'm currently integrating ng-autocomplete with Angular 8, and encountering an issue. Here is the code snippet: HTML: <div class="field"> <label class="label">Nombre del condominio:</label> <div class="control"> ...

angularautocompletedropdownngmodel

The attempted upgrade to Highcharts 11 within the Angular App was unsuccessful due to a lack of loader capable of handling the

An issue has been detected in the highcharts.js file located in ./node_modules/highcharts/ at line 8:5207. The module parsing failed due to an unexpected token found at this position. To resolve this error, you may need to set up a suitable loader to proce ...

javascriptangularhighcharts

How to properly cast interfaces when using Angular 4's HttpClient to fetch items

Here is the layout of my interface interface IPlacesResult { summary: { queryTime: number; // ... }; results: { id: string; // ... address: { streetNumber: number; // ... }; }[]; } To populate this interface, I ...

javascriptangulartypescript

The object literal can only define existing properties, and the property 'allAwsRegions' is not found in the 'IResolvable' type

Currently, I am working with the AWS-CDK and attempting to set up a Config Aggregator to combine the storage of configuration logs from all regions. Instead of using an account as the source, I have opted for a region due to restrictions on configuring org ...

typescriptaws-cdkaws-config

I have been utilizing ESBuild to compile JavaScript code for browser usage. However, I encountered an issue when trying to import CSS as I received an error message stating "Unexpected '.'". Can anyone provide guidance on how to resolve this issue?

I am currently developing a JavaScript notebook that operates within the browser environment. To compile my code, I have chosen to utilize ESBuild. My primary objective is to enable the handling of CSS imports such as <import 'bulma/css/bulma.css&a ...

javascripttypescriptcompilationesbuild

Tips for importing a module such as 'MyPersonalLibrary/data'

Currently, I am developing a project with two packages using Typescript and React-Native: The first package, PackageA (which is considered the leaf package), includes a REST client and mocks: MyOwnLibrary - src - tests - mocks - restClientMoc ...

node.jstypescriptreact-nativenpm

What could be the reason for a property going unnoticed during the iteration of a list?

The Scenario There is a class named myClass: export class myClass { name: string; age: number; city: string; } and another class called people: export class people { name: string; age: number; } In the component.ts, a variable list ...

angulartypescript

Angular-CLI and ThreeJS working together

I've been struggling to include the necessary npm dependencies to integrate THREE into my Angular-CLI project. Given the constant changes within CLI over the last few months, I've had difficulty finding a reliable solution. Consider the followin ...

angularthree.jsangular-cli

Having trouble locating the asset at /home/runner/CDK_Test/frontend/frontendapp/build while executing CDK deploy with GitHub Action

When attempting to execute `cdk deploy` on GitHub Actions, I encountered an issue with finding the build from frontendapp. I double-checked the build path for any errors but found none. Interestingly, running `cdk deploy --all` locally successfully display ...

typescriptamazon-s3github-actionsamazon-cloudfrontaws-cdk

angular-cli: Select templates based on the current environment

Currently, I am utilizing @angular/cli: 1.0.0 and aiming to utilize component templates based on the environment. The code implementation is as follows: import {Component} from '@angular/core'; import {environment} from '../environments/env ...

angularjsangularangular-cli

"Enhance Your Angular 6 Project with a Stunning jQuery Lightbox

Looking to incorporate jquery simple lightbox into my app, however I am encountering an issue. When I hardcode the image links, everything works fine - images are displayed from both external links and local folder. But when I try to use *ngFor directive t ...

jqueryangularhtml

Modal component not displaying properly in ng-bootstrap framework

I'm having trouble getting a modal and its background to display when activated. The elements are being created and destroyed correctly in the developer tools, but they are not visible on the page. I'm trying to replicate the example from this li ...

angularbootstrap-modaltwitter-bootstrap-4