Carlos Cifuentes
AngularJS → Angular reference

ng-cloak in modern Angular

ng-cloak is not needed. Angular templates are compiled to JavaScript and never sit in the page as raw {{ }} text, so there is nothing to hide.

Before · AngularJS
<style>
  [ng-cloak], .ng-cloak { display: none !important; }
</style>

<body ng-app="app">
  <div ng-cloak>Hello {{ vm.user.name }}</div>
</body>
After · Angular
<!-- index.html -->
<body>
  <app-root>Loading…</app-root>
</body>

<!-- any component template: nothing to hide -->
<div>Hello {{ user().name }}</div>

What changes

  • Remove the ng-cloak attributes and the CSS rule that came with them.
  • Whatever you put inside the root element in index.html shows until the app bootstraps, which works as a loading indicator.
  • For a faster first paint, the tools are server-side rendering or prerendering.

Migration tip. Keep ng-cloak while legacy templates are still rendered by AngularJS in the hybrid app. Delete it together with the last legacy screen.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn