Personalized prefix for Angular and WebStorm components

After starting a project in Angular with Visual Studio Code a few months ago, I decided to switch to WebStorm and upgraded the project to Angular 4.0 today.

Although my project is running smoothly without any errors, I encountered an issue in WebStorm:

TSLint: The selector of the component "ConnectionStatusComponent" should have prefix "app" (https://angular.io/docs/ts/latest/guide/style-guide.html#!#02-07) (component-selector)

Upon reviewing the provided link, I learned that adding a custom prefix to component selectors is a common practice to avoid naming conflicts with components from other apps or native HTML elements.

While I understand the reasoning behind using the `app` prefix, I am curious as to why it is mandatory over other prefixes. If I try to use a different prefix, WebStorm flags it as an error.

The style guide mentioned in the link suggests using a custom prefix for component selectors, such as 'toh' for Tour of Heroes or 'admin' for admin feature areas.

If I can choose any prefix I like, is there a specific rule regarding the prefix name?

angulartypescriptwebstorm

Answer №1

There are no strict rules regarding prefix names to the best of my knowledge. When working with the CLI, you can modify the prefix node within the apps section of the angular-cli.json. This adjustment will allow the CLI to generate new components using the selected prefix. For the tslint.json file, you have the option to establish regulations for both components and directives:

"directive-selector": [true, "attribute", "app", "camelCase"],
"component-selector": [true, "element", "app", "kebab-case"],

I hope this information proves useful.

UPDATE

If you wish to employ multiple prefixes, you can outline them in an array format as demonstrated in this example:

//RULES: [ENABLED, "attribute" | "element", "selectorPrefix" | ["listOfPrefixes"], "camelCase" | "kebab-case"]
  "directive-selector": [true, "attribute", ["dir-prefix1", "dir-prefix2"], "camelCase"],
  "component-selector": [true, "element", ["cmp-prefix1", "cmp-prefix2"], "kebab-case"],
  • The first argument within the array indicates whether it is enabled or not.
  • The second argument offers a choice between attribute or element.
  • The third argument allows for either a singular prefix string or an array containing multiple prefixes.
  • Lastly, the fourth argument presents options of either kebab-case or camelCase.

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

Plot the components of an array and calculate the instances that JavaScript executes

I have an array containing information about PDF files stored in a buffer. Let's imagine this array holds ten PDF files structured like this: [{ correlative: "G-22-1-06", content: <Buffer 25 50 44 46 2d 31 2e 34 0a 25 d3 eb e9 e1 0a ...

javascriptarraystypescriptindexingchunks

Experiencing an array of issues while attempting to convert my HTTP request into an

I am currently facing some difficulties in converting my HTTP requests into observables. Within my Angular App, there is a service called API Service which takes care of handling all the requests to the backend. Then, for each component, I have a separate ...

angulartypescript

I want to create a feature where a video will automatically play when a user clicks on a specific item in a list using Angular

Currently, I'm working on a project that involves displaying a list of videos and allowing users to play them in their browser upon clicking. The technology stack being used is Angular 2. Below is the HTML code snippet for achieving this functionalit ...

javascriptangularvideotypescript

One or multiple web browsers set in the Browserslist of the project

I have recently started working with the Ionic framework and encountered some warnings while setting up my application. Can anyone help me with a solution? [ng] When starting the Ionic application, I received the following warnings: [ng] One or more browse ...

javascriptangularionic-framework

Guide to creating a personalized pipe that switches out periods for commas

I currently have a number with decimal points like --> 1.33 My goal is to convert this value so that instead of a dot, a comma is displayed. Initially, I attempted this using a custom pipe but unfortunately, it did not yield the desired result. {{get ...

angulartypescriptangular-pipe

Encountering a console error in a TypeScript Express app when using MUI and Preact: "Unexpected prop `children` passed to `InnerThemeProvider`, was expecting a ReactNode."

I'm working on integrating MUI with a Preact app. In VSCode, everything seems to be set up correctly, but when I try to view it in the browser, nothing renders and I get this console error: react-jsx-runtime.development.js:87 Warning: Failed prop type ...

typescriptwebpackmaterial-uipreact

Angular2 combined with redux fails to produce any outcomes

Currently, I am implementing redux in conjunction with angular2 and attempting to make a call to Windows Azure Search. Below is the snippet of code that I have written: types.ts export interface IAppState { languageState?: LanguageState; searchState? ...

angularreduxangular-httpazure-cognitive-search

Angular: Exploring the most effective strategies for optimizing code within the ".subscribe()" method

Imagine having a component structured like this The Initial Code: import { HttpClient } from '@angular/common/http'; import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<pre>{{ ...

angulartypescriptperformancerxjsrefactoring

How can I resolve the issue of TypeScript AngularJS component modal where the function this.$modalInstance.dismiss is not working?

After converting one of my user data entry forms into a uib-modal, I encountered an issue when trying to close the modal using the "cancel" button. The error message "this.$modalInstance.dismiss is not a function" keeps popping up. The same problem occurs ...

angularjstypescriptangular-ui-bootstrap

execute a rigorous compilation during the ng build angular process

I am currently working on a project using angular-cli and I have configured my package.json with the following scripts: "scripts": { "ng": "ng", "build": "ng build --base-href /test/", "prod": "ng build --prod --base-href /test/" } According to the ...

javascriptangulartypescriptnpmangular-cli

Is there a way to see the countdown timers in Angular 7?

Is there a way for me to view my timer's countdown as it starts? I have attempted to bind it to a variable, but all I see is [object Object]: setTime(time) { if (this.settime >= 5 ) { this.currentTime = time; this.alerttime = thi ...

javascripttypescriptangular7

Display JSX using the material-ui Button component when it is clicked

When I click on a material-ui button, I'm attempting to render JSX. Despite logging to the console when clicking, none of the JSX is being displayed. interface TileProps { address?: string; } const renderDisplayer = (address: string) => { ...

reactjstypescriptmaterial-uijsxtsx

No results returned by Mongoose/MongoDB GeoJSON query

I have a Schema (Tour) which includes a GeoJSON Point type property called location. location: { type: { type: String, enum: ['Point'], required: true }, coordinates: { type: [Number], required: true ...

javascriptangulartypescriptmongodbmongoose

Typescript fails to identify the parameter type of callbacks

I am facing a challenge with the function below and its callback type: type Callbacks = { onSuccess: (a: string) => void; }; function myFunction(event: string, ...args: [...any, Callbacks]) { } The function works correctly except for one issue - ...

typescript

A guide on setting up a countdown timer in Angular 4 for a daily recurring event with the help of Rxjs Observable and the Async Pipe

I'm currently working on developing a countdown timer for a daily recurring event using Angular 4, RxJS Observables, and the Async Pipe feature. Let's take a look at my component implementation: interface Time { hours: number; minutes: numbe ...

javascriptangulartypescripttimerrxjs

The element is implicitly assigned an 'any' type due to the fact that an expression of type 'any' cannot be used to index types in nodejs and solidity

I am in need of setting networks in my contract using NodeJS and TypeScript. Below is the code I have written: let networkId: any = await global.web3.eth.net.getId(); let tetherData = await Tether.networks[networkId]; Unfortunately, I encountered ...

javascriptnode.jstypescriptsolidity

How to use TypeScript variables in React applications

In my current project, I am attempting to customize a Fabric JS component (Dropdown) using styled-components within a React component. The specific CSS class names are defined in a file located at office-ui-fabric-react/lib/components/Dropdown/Dropdown.sc ...

reactjstypescriptglobal-variables

React component not displaying any content due to ternary operator condition being met with variable equal to 0

Seeking to display a React component upon clicking another component. When clicked, I assign the eventKey of the component to a savedId in order to render the corresponding data from the array at that index. Click Action <ListGroup> {data.map((it ...

reactjstypescriptcomponentsrenderingfalsy

Learn the process of importing third-party vendor node modules along with their sub dependencies in Angular 2 using angular-cli

Looking to load a more complex node module in an Angular 2 project bootstrapped with angular-cli? The wiki has instructions for loading a single node module, but what about modules with multiple dependencies like angular2-apollo? For example, angular2-apo ...

node.jsangularnpmnode-modulesangular-cli

What are some creative ways to design the mat paginator in Angular?

Looking for tips on how to style Angular Material Paginator to match a Figma design? ...

angularangular-materialpagination