Components Without Selectors

TL;DR

Note

Removing selector on component which are directly used by angular router Angular will render a component without selector like this ....

Project Structure

const routes: Routes = [
  {
    path: '',
    component : HomeComponent
  },
  {
    path: 'about',
    component : AboutComponent
  },
  {
    path: 'contacts',
    component : ContactsComponent
  },
  {
    path: 'join-us',
    component : JoinUsComponent
  }
];

Before We Begin

Note

To follow along,

Clone the project from GitHub git clone https://github.com/jdansomon/angular-Components-Without-Selectors.git
Run npm install
Switch to the composent-with-selectors branch using git checkout composent-with-selectors.

Results

- Components with Selectors

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

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

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

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

Webpack Build Size:

Webpack Build Size

Note

The build size is 241.61 KB.
when navigate to home page, the home component is loaded with the selector in the DOM.

- Components Without Selectors

@Component({
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

@Component({
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
})

@Component({
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.scss']
})

@Component({
  templateUrl: './join-us.component.html',
  styleUrls: ['./join-us.component.scss']
})

Webpack Build Size Results

Note

The build size is 222.54 KB.
when navigate to home page, the home component is loaded without the selector in the DOM but it loaded with <ng-component></ng-component>.

Angular 17+ ( esbuild )

Note

Esbuild is the next generation compilation and rendering pipeline.

### Components with Selectors

Esbuild Size Src Size Features Size

Components without Selectors

Esbuild Size Src Size Features Size

Sommaire

Angular 16

Note

The build size is 241.61 KB with selectors and 222.54 KB without selectors
The build size is 19.07 KB less without selectors.

Angular 17 Esbuild

Note

The build size is 524 bytes with selectors and 436 bytes without selectors
The build size is 88 bytes less without selectors.

Angular 18 Esbuild

Note

The build size is XXX bytes with selectors and 436 bytes without selectors
The build size is XX bytes less without selectors.
The build size is XX.XX% less without selectors.

Angular-CookBook