Make sure to name your Typescript component selector correctly, as it should not

As I work on my Angular project, I encountered a situation where one component needed to be referenced in the HTML of another component. To make this connection, I used kebab case for the selector like so:

@Component({
  selector: 'swiftlog-navbar',
  templateUrl: './swiftlog-navbar.component.html',
  styleUrls: ['./swiftlog-navbar.component.css']
})
export class SwiftlogNavbarComponent {

Upon running yarn start, an error message appeared:

WARNING in ./src/main/webapp/app/swiftlog-navbar/swiftlog-navbar.component.ts [4, 13]: The selector of the component "SwiftlogNavbarComponent" should be named undefined (https://angular.io/styleguide#style-05-02)'

I am puzzled by the phrase "should be named undefined" and unsure which rule from the tslint file is triggering this issue. If anyone has insights or suggestions on how to address this, I would greatly appreciate it. I have looked through the style guide provided but couldn't find any clear answers.

Thank you, Mart

angulartypescriptyarnpkgtslint

Answer №1

To customize the prefix in angular-cli, make changes to the angular-cli.json file:

apps: [
  {  ..., "prefix": "swiftlog"}
]

Update your tslint configuration as well:

"component-selector": [true, "element", "swiftlog", "kebab-case"],

For more information on this configuration property, check here.

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

An issue arose while trying to create a React application, as the Git commit was not successfully created. The error message displayed was: "Command failed: git commit -m 'Initialize project using

As a Windows user with yarn, node js, git, npm installed, I encountered an error while creating a React application using the command npx create-react-app my-app. The process started but failed at the end with the following error: PS C:\React> npx ...

node.jsreactjswindowsgityarnpkg

Zendesk API integration with Angular is experiencing issues with retrieving data as a result of a CORS restriction

I have been working with the Zendesk API and have encountered a problem. Despite being able to successfully send POST requests (even though the response indicates an error), I am unable to make GET requests using my Angular 4 application along with HttpCli ...

angularcorszendeskzendesk-api

Utilize Typescript Functions to Interact with GeoJSON Data in Palantir Foundry

Working on a map application within Palantir utilizing the workshop module. My goal is to have transport routes showcased along roads depending on user inputs. I am familiar with displaying a route using GeoJSON data, but I'm wondering if there is a w ...

typescriptgeospatialpalantir-foundry

Leveraging Angular modules within web workers

Currently, I am attempting to leverage the Angular 8 JIT compiler within a WEB WORKER. Unfortunately, when trying to import the Compiler module or any other Angular module in the web-worker.ts file, I encounter an error. /// <reference lib="webworker ...

angularweb-worker

Is it possible to retrieve the second computed type in an overloaded method using TypeScript?

Looking for a solution to receive the second calculated type in an overload method using TypeScript type V1 = 'v1'; type V2 = 'v2'; type Versions = V1 | V2; async analyze(test: 'v1', data: number): Promise<void> ...

typescripttypescript-typings

Angular app experiences a breakdown due to a JitCompiler issue

After being given the responsibility of enhancing a project, I diligently added new modules and components. However, upon running the application, it crashes. Uncaught Error: Component EnquiryComponent is not part of any NgModule or the module has not bee ...

angularangular8

Unable to load class; unsure of origin for class labeled as 'cached'

Working on an Angular 10 project in visual studio code, I've encountered a strange issue. In the /app/_model/ folder, I have classes 'a', 'b', and 'c'. When running the application in MS Edge, I noticed that only classes ...

angulartypescriptdebuggingvisual-studio-code

Having issues with Bootstrap customization in an Angular 7 project

I am currently working on customizing a Bootstrap 4 theme within an Angular 7 project. After installing Bootstrap, I updated my angular .json file to include the following: "styles": [ "./node_modules/@angular/material/prebuilt-themes/de ...

angularbootstrap-4

The problem with URL encoding causing issues with Angular 2 navigation

I've encountered an issue with my Angular 2 website. When I input optional parameters in Chrome, such as this URL gets converted to and fails to locate the page in Chrome. Strangely, it works perfectly when pasted in incognito mode. As a newcomer to ...

angularurl-encoding

Refresh an array prior to subscribing in Angular 2

When attempting to apply multiple filters in a quick session, I am encountering an issue where the previous data persists in the array alongside the new data. How can I effectively remove the previous data? component.ts ngOnInit() { this.vehicleAttribu ...

angulartypescriptangular2-routingangular2-template

Hovering over a table cell triggers a popup in Angular

Inserted a class into <td><span class="only-show-on-hover"></span></td> CSS code for the class td span.only-show-on-hover { visibility: hidden; } td:hover span.only-show-on-hover { visibility: visible; } Code for dialog box < ...

javascriptangulartypescriptbootstrap-4

Sending JSON RPC post requests in Angular 4

Attempting to retrieve JSON RPC data from the server using Angular 4 HttpClient. The error message received is {code: -32600, message: "INVALID_JSON_REQUEST: The JSON sent is not a valid JSON-RPC Request object"}. The command used is: curl -i -X POST -d ...

angularhttpclientjson-rpc

The W3C Validator has found a discrepancy in the index.html file, specifically at the app-root location

While attempting to validate my HTML page, I encountered the following error: Error: Element app-root not allowed as child of element body in this context. (Suppressing further errors from this subtree.) From line 4347, column 7; to line 4347, column 16 ...

javascripthtmlangulartypescript

You are unable to declare an Angular component as an abstract class within a module

In my coding project, there is a fundamental component class known as BaseComponent with its unique markup referred to as <base-component-fun>. The structure of this component's markup looks like this: <div> ..Base markup </div> Thi ...

angularangular-components

Determining the parameter type of an overloaded callback: A comprehensive guide

I am currently working on creating a type-safe callback function in TypeScript with a Node.js style. My goal is to define the err parameter as an Error if it exists, or the data parameter as T if not. When I utilize the following code: export interface S ...

typescriptcallbacktype-safety

Angular - CSS Grid - Positioning columns based on their index values

My goal is to create a CSS grid with 4 columns and infinite rows. Specifically, I want the text-align property on the first column to be 'start', the middle two columns to be 'center', and the last column to be 'end'. The cont ...

htmlcssangular

When an Angular service is created, its properties are not immediately configured

My current task involves testing an Angular (4.1) service that looks like this: @Injectable() export class JobService { private answerSource = new Subject<AnswerWrapper>(); answer$ = this.answerSource.asObservable(); answer(answer: AnswerWra ...

angularunit-testingtypescriptjasmine

Learn how to mock asynchronous calls in JavaScript unit testing using Jest

I recently transitioned from Java to TypeScript and am trying to find the equivalent of java junit(Mockito) in TypeScript. In junit, we can define the behavior of dependencies and return responses based on test case demands. Is there a similar way to do t ...

javascriptunit-testingtypescriptjestjs

Angular - Automatically populate nested form with provided data

Here is the link to my StackBlitz project: https://stackblitz.com/edit/create-eez7wi?file=app/app.component.ts I am facing an issue where when I load the resources, it fills all fields except for the skill if more than 1 is entered. setResourceDTOS() { ...

angular

Embedding content within various ng-template elements

I'm currently working on developing a button component (app-button) that can utilize multiple templates based on the parent component using it. <div class="ds-u-margin-left--1 ds-u-float--left"> <ng-container *ngTemplateOutlet="icon">< ...

htmlangular