如何从视角源隐藏样式标记，如角度材质

Question

如何从视图源隐藏样式标记。例如，请访问已上传的图片。这就是我想要实现的目标。

style tag in developer tool

no style tag in view source

在ng-build之后，我将在视图源中显示所有内部样式。我想隐藏视图来源。

my project view source

Answer 1

在SSR模式下，在app.server.module.js中，添加NoRenderServerStylesHost以覆盖默认的ServerStylesHost行为。例如：

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { ɵangular_packages_platform_server_platform_server_c as ServerStylesHost } from '@angular/platform-server';

export class NoRenderServerStylesHost extends ServerStylesHost {

    onStylesAdded(additions: Set<string>): void {
        // super.onStylesAdded(additions);
        // additions.forEach((s) => console.log(s));
        // ignore styles added
    }
}

@NgModule({
    imports: [
        // The AppServerModule should import your AppModule followed
        // by the ServerModule from @angular/platform-server.
        AppModule,
        ServerModule,
        ModuleMapLoaderModule,
        ServerTransferStateModule,
    ],
    // Since the bootstrapped component is not inherited from your
    // imported AppModule, it needs to be repeated here.
    bootstrap: [AppComponent],
    providers: [{
        provide: ServerStylesHost,
        useClass: NoRenderServerStylesHost
    }]
})
export class AppServerModule {
}