Tips for concealing .js and .map files in WebStorm during your work on an Angular 2 TypeScript project

After attempting to include the extensions in the .gitignore file, the outcome is shown in the following image:

https://i.sstatic.net/0K6x5.png

Unfortunately, the files are still not fully concealed.

Answer №1

If you find yourself using WebStorm without the built-in TypeScript Compiler, such as when working on an Angular2 project with the npm start script handling the compilation, and the usual methods are not effective, you have the option to set up a customized "Project" panel in WebStorm:

  1. Go to the Project Files section in the side panel (as the Project section does not provide the necessary configuration menu).
  2. Click on the gear icon to access the configuration options.
  3. Choose "Edit Scopes" from the menu.
  4. Create a new Scope.
  5. Define the Pattern to filter out the *.js and *.js.map files (for example:
    !file[my-root-folder]:app//*.js&&!file[my-root-folder]:app//*.js.map
    ).
  6. You can then display this custom scope in the side panel under the name you assigned to it, instead of using the default Project or Project Files sections.

Answer №3

My experience led me to discover that utilizing the Project panel instead of the Project Files panel was the solution to collapsing the *.js and .js.map files, hiding them under their corresponding *.ts file.

https://i.sstatic.net/BIGVS.png

Important to note that this method works only if WebStorm's TypeScript Compiler is enabled. (see A_Singh's answer)

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

Out-of-order calling of React hooks detected

It's puzzling that the useMemo hook appears to be running before the useEffect hook directly above it. The reason for my suspicion is the error message I'm encountering: TypeError: Cannot read property 'timestamp' of undefined This ...

Having trouble uploading a file in PDF format (*.pdf)

I'm attempting to use Node's readFile method to read a file and then send it as a response so that the user can download it. This is the code snippet I have: async function(req, res, next) { const query = { id: req.params.id }; // @ts-ignore co ...

Class with an undefined function call

Currently, I am working with angular2 and TypeScript where I have defined a class. export class Example{ //.../ const self: all = this; functionToCall(){ //.. Do somerthing } mainFunctionCall(){ somepromise.then(x => self.fu ...

Utilizing variables for Protractor command line parameters

I am struggling to make variables work when passing parameters as a string in my code. Conf.ts params: { testEnvironment: TestEnvironment.Prod, }, env.ts export enum TestEnvironment { Dev = 'dev', QA = 'qa', Prod ...

Angularfire2 combined with Bootstrap Modal will enhance the user experience of

Hello everyone, I am currently facing an issue while trying to integrate Bootstrap modal with AngularFire2 in Angular. The problem lies in the fact that the data retrieved from the database is not being recognized. <button *ngFor="let utilfaq of (uti ...

What is the process for downloading a .docx file encoded in Base64?

Trying to download a .docx file received from the backend. The object being received is shown below: https://i.sstatic.net/nHKpn.png Download attempt using the following code: const blob = new Blob([fileSource.FileData], { type: fileSource.FileType }); ...

Encountering a Problem with Angular 2 Directive *ng-for

Recently started experimenting with the beta version of Angular 2.0 and encountered an error stating "angular is not defined" while trying to add directive: [angular.ngFor]. If you want to take a look, here is the Plunker URL: http://plnkr.co/edit/ULHddLR ...

Using Angular to populate textboxes with SQL data

I am encountering an issue with a mat-table that retrieves its data from a database. One of the columns needs to be editable by the user so that they can update the content and reflect changes in the database. The problem lies in loading the data into the ...

Reloading the current route in Angular 4 using routerLink

Is it possible to refresh the current page by clicking on a link using routerLink? An example of the menu structure I have is: <ul> <li><a routerLink="home">Home</a></li> <li><a routerLink="users">Users</a& ...

The inline style in Angular 2 is not functioning as expected when set dynamically

Having a small dilemma... I'm trying to apply an inline style within a div like this: div style="background: url(..{{config.general.image}})"></div Oddly enough, it was functioning in beta 16 but ever since the RC1 upgrade, it's no longer ...

Encountering challenges with the search and filtering features

I'm having some trouble with the search and filter features I'm creating. They work fine initially, but once I enter a search query in the input field, the results show up as expected. However, if I delete the query or enter a different one, the ...

Verifying the outcomes of a spied function with the callThrough method

Is there a way to validate the outcomes of a spied function in nestjs using jasmine? I have set up a jasmine spy on a method to monitor its arguments and response/exception, but I'm unable to access the return value of the spied method. For example, ...

Mapping angular URLs with routes for the initial loading process

I recently encountered an issue with my Angular project that has multiple routes, such as /category/fruit/apple. When I try to access the full URL directly like http://myserver/category/fruit/apple, it returns a 404 error. This is because there is no confi ...

Need at least one of two methods, or both, in an abstract class

Consider the following scenario: export abstract class AbstractButton { // Must always provide this method abstract someRequiredMethod(): void; // The successor must implement one of these (or both) abstract setInnerText?(): void; abst ...

Tips for improving the performance of your Ionic 2 app

Recently, I've been working on enhancing the performance of my Ionic 2 App, particularly focusing on optimizing page loading speed. After closely analyzing the timeline of page transitions using Chrome Dev Tools, it became evident that the bottleneck ...

Tips for displaying personalized data with MUI DatePicker

I need to create a React TypeScript component that displays a MUI DatePicker. When a new date is selected, I want a custom component (called <Badge>) to appear in the value field. Previously, I was able to achieve this with MUI Select: return ( ...

Angular 7 running slowly when refreshing or changing routes

Operating System: Ubuntu 16.04 Node Version: v10.15.1 NPM Version: 6.4.1 I have recently developed a web application with two pages using less and HTML without any AJAX calls. Below is the content of my package.json file: { "name": "frontend", "vers ...

Utilizing the `in` operator for type narrowing is yielding unexpected results

Attempting to narrow down a type in TypeScript: const result = await fetch('example.com') if (typeof result === "object" && "errors" in result) { console.error(result.errors); } To clarify, the type of result before the if condition should be ...

Issues have been reported with Angular 10's router and anchorScrolling feature when used within a div that is positioned absolutely and has overflow set

I feel like I may be doing something incorrectly, but I can't quite pinpoint the issue. Any help or pointers would be greatly appreciated. My current setup involves Angular 10 and I have activated anchorScrolling in the app-routing.module file. const ...

Required Ionic form field alert

Currently, I am developing a new app using ionic 3 and I am facing an issue with making inputs mandatory in my ionic-alert controller. Despite going through the ionic-component documentation and api documentation, I couldn't find a solution on how to ...