Angular-cli: ng lint claims on custom component prefix

[zd333]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.0-rc.2
node: 7.6.0
os: linux x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0-rc.2
@angular/compiler-cli: 2.4.10

Repro steps.

1. Create new project with ng new someproject
2. Replace default "app" prefix property value with any custom prefix (e.g. "myprj") in .angular-cli.json
3. Replace default app-root selector in root component with myprj-root
4. optionally generate new component with ng generate component testprefix
5. run ng lint

The log given by the failure.

src/app/second/second.component.ts[4, 13]: The selector of the component "SecondComponent" should have prefix "app" (https://goo.gl/cix8BY)
src/app/app.component.ts[4, 13]: The selector of the component "AppComponent" should have prefix "app" (https://goo.gl/cix8BY)

Desired functionality.

Component selector with correctly set up custom prefix is not claimed by ng lint

Thanks!

[delasteve]

You will need to change the tslint.json file as well.

[delasteve]

Specifically, https://github.com/angular/angular-cli/blob/master/packages/@angular/cli/blueprints/ng/files/tslint.json#L102

This is unable to be done with the current CLI via a command. You will need to edit this yourself.

[zd333]

@delasteve Thanks a lot!
This worked perfectly!

[lvidal1]

@delasteve, could you provide a new link? That is broken.

[delasteve]

https://github.com/angular/devkit/blob/7fce9ccece3de26de0e8f06667aefbcf8080f97d/packages/schematics/angular/application/files/tslint.json#L126

If you want directives as well, you will need to change the directive-selector rule as well. If you want more than one selector prefix, you will need to make it an array, e.g. ["app", "custom"].

[rvalimaki]

EDIT: thanks @cornem That sneaky little src/tslint.json extending base tslint.json evaded my eyes.

I'm really frustrated as I simply cannot get this working. I'm using latest angular-cli, and I have tried following tslint.json rules:

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

and also alternative:

"component-selector": [
true,
"element",
["foo", "bar", "baz" ], <--- I would prefer this as we have a large app with multiple modules
"kebab-case"
]

Yet "ng lint" keeps telling us that we need to use "app" as selector.

I can't even disable the "component-selector" check at all.

[cornem]

@rvalimaki I ran into the same issue, but then I realized there are two tslint.json files. One at the root, and one in the ./src folder. In my case (project generated with Angular 6) the component and directive rules were in the ./src/tslint.json file.

[rvalimaki]

@cornem Thanks a lot! Man I was frustrated with this and couldn't find that myself.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}