Reports

What about bundling the styles to the separated css file and then linking it in the head?

<head>
   ...
   <link rel="stylesheet" href="styles.css" />
</head>

Then we just have to link all the styles to the main file.

// styles.scss
@import './app/app.component';

// app.component.scss
@import './app/component1.component';
@import './app/component2.component';
@import './app/component3.component';

... and so on to the deepest level.

Also it seems that we have to remove all the styleUrls.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})

Other way style tag still will be added to the DOM head, which will break unsafe-inline CSP policy.

For me it seems the only way now to get rid of 'unsafe-inline' from Angular apps now.

79118384