Use module name as component selector prefix

[jmendiara]

Bug Report or Feature Request (mark with an x)

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

Versions.

$ ng --version
@angular/cli: 1.0.0
node: 6.10.0
os: darwin x64
@angular/animations: 4.0.1
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

Repro steps.

$ ng g m babies --routing
$ ng g c babies/detail 

this generates

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
//...

The log given by the failure.

Desired functionality.

As per https://angular.io/docs/ts/latest/guide/style-guide.html#!#02-07

Do use a custom prefix for a component selector. For example, the prefix toh represents from Tour of Heroes and the prefix admin represents an admin feature area.
Do use a prefix that identifies the feature area or the app itself.

When you create a component in a feature, it's likely that feature can be exported. Having app prefix when creating a component inside a feature asumes the feature should live inside an app context, and can cause more collisions.

Therefore, setting the module prefix to their components by default will lead to better practices

The expected result would be

$ ng g m babies --routing
$ ng g c babies/detail 

could generate

@Component({
  selector: 'babies-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
//...

Mention any other details that might be useful.

Related #5794

[filipesilva]

This is part of a larger-ish discussion regarding supporting several prefixes, and how to auto-determine them. I don't think there's a good way of auto-detecting though. The best way to do this atm is to use the --prefix flag when making a component.

[SamanthaAdrichem]

Atleast it should become 'app-babies-detail' if you ask me.

[kyliau]

I think there are two components to this issue:

1. Can user provide a custom prefix when running ng generate?
2. Can CLI automatically determine the right prefix?

For (1), this is already possible with the --prefix flag.
In your example, you can run

$ ng g c babies/detail --prefix babies 

For (2) this is difficult to implement right for every user, with little benefit.

Since it's relatively low effort to achieve your intended behavior, and it's already possible to do that today, I'll close this issue for now. Please reopen if you'd like further discussion.

[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.}