Ionic-cli: CLI4: Generate Page generates the page component with improper selector.

[ayush987goyal]

Description:

The page generated by the new CLI contains a selector which does not follow the Angular Style Guide. Hence it also fails the linting.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'random', // <== This
  templateUrl: './random.page.html',
  styleUrls: ['./random.page.scss'],
})
export class RandomPage implements OnInit {



  constructor() { }

  ngOnInit() {

  }

}

Steps to Reproduce:

Generate a new page with CLI

Output:

In the above example the selector should have been something like app-page-random

My ionic info:

Ionic:
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.0

System:

   NodeJS : v10.4.0
   npm    : 6.2.0
   OS     : Windows 10

Other Information:

Though its a small point, but the spacing is a bit off as well.

[imhoffd]

@ayush987goyal The selector generation should behave like Angular's now. It will use the project prefix (app in the starters). It won't be app-page-random, it will be app-random.

Also fixed the spacing! This will be in the next version of the CLI.

Thanks so much for the issue!

[ayush987goyal]

On the same note, the tabs starter template has the selectors of the form app-page-tabs. You might wanna look into that as well.

[imhoffd]

I noticed that as I was making changes. Will fix in https://github.com/ionic-team/starters/pull/342