Root Component prefix and other Component prefixes should be consistent and pass ng lint

[johnpapa]

We need to think how this should work. Consistency is key, IMO

When I generate a new app and create components, the prefixes are not consistent and therefore ng lint barks that we have inconsistent prefixes.

ng new force
cd force
ng g c foo
ng g c bar

We now have

• ForceAppComponent with a selector of force-app
• FooComponent with a selector of app-foo
• BarComponent with a selector of app-bar

Then we add an ng lint rule in tslint.json like this (so we can follow the guide)

    "component-selector-prefix": [
      true,
      "app"
    ],

If we run ng lint we hear

$ ng lint
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.

> force@0.0.0 lint /Users/john/_play/tmp/force
> tslint "src/**/*.ts"

src/app/bar/bar.component.spec.ts[38, 13]: The selector of the component "BarComponentTestController" should have prefix "app", however its value is "test".
src/app/foo/foo.component.spec.ts[38, 13]: The selector of the component "FooComponentTestController" should have prefix "app", however its value is "test".
src/app/force.component.ts[5, 13]: The selector of the component "ForceAppComponent" should have prefix "app", however its value is "force-app".

cc @mgechev @Brocco @wardbell

[0x-r4bbit]

cc @cburgdorf

[Brocco]

This conversation has already been started and the current solutions being proposed are:

1. Change the app component's selector to use a prefix of app instead of a suffix. So the root/app component would end up being app-force in based upon the above example
2. Slight variation of prefixing a discrete value of app would be to use the optional --prefix argument's value to prepend to the root component's selector
3. Leave the suffix of app as is and also prefix with the configured --prefix value (app by default). The resulting app component's selector could end up being app-force-app.
4. Modify codelyzer to ignore/not check the root component's selector. In this case the selector for the app component could remain force-app
5. Create a rule in codelyzer to allow for multiple selector prefixes which would include the configured prefix (default or specified) and the name of the application (force in the example above) which would allow both prefixes to work upon application generation. Modifying the lint configuration is being tracked in Include the configured custom prefix in the tslint.json #825

[filipesilva]

Obsolete issue, implemented in 901bad0.

[mgechev]

FYI codelyzer now supports multiple prefixes mgechev/codelyzer@91c9522.

[filipesilva]

@mgechev sweet! Could you make a PR adding the prefix rule?

[mgechev]

@filipesilva I'll do that as soon as I get a chance.

[angular-automatic-lock-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.}