CODEWITHSUNDEEP
angularangular-material2angular-universal
Anil
Anil

Reputation: 11

how to hide style tag from view source like angular material

How to hide style tag from view source. for example please visit the images have uploaded. this is what i want to achieve.

style tag in developer tool

no style tag in view source

After ng-build i am getting all internal style displayed in view source. I want to hide from view Source.

my project view source

Upvotes: 1

Views: 805

Answers (1)

gergom
gergom

Reputation: 11

In SSR mode, in app.server.module.js, add an NoRenderServerStylesHost to override the default ServerStylesHost behavior. for example:

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 {
}

Upvotes: 1

Related Questions