feat: include style to inline style server render

Angular-RU · Sep 21, 2018 · dbb413b · dbb413b
1 parent dba5713
commit dbb413b
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 6 deletions.
diff --git a/angular.json b/angular.json
@@ -86,8 +86,6 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              "src/styles.scss",
-              "src/styles/main.scss"
             ],
             "assets": [
               "src/assets",
@@ -185,4 +183,4 @@
       "prefix": "app"
     }
   }
-}
+}
diff --git a/src/app/app.server.module.ts b/src/app/app.server.module.ts
@@ -1,5 +1,5 @@
 // angular
-import { NgModule } from '@angular/core';
+import { NgModule, ViewEncapsulation, Component } from '@angular/core';
 import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 // libs
@@ -11,17 +11,20 @@ import { TranslatesServerModule } from '@shared/translates/translates-server';
 // components
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
+import { InlineStyleComponent } from './inline-style/inline-style.component';
+import { InlineStyleModule } from './inline-style/inline-style.module';
 
 @NgModule({
   imports: [
     AppModule,
     NoopAnimationsModule,
     ServerTransferStateModule,
     ServerModule,
+    InlineStyleModule,
     ModuleMapLoaderModule,
     TranslatesServerModule
   ],
-  bootstrap: [AppComponent],
+  bootstrap: [AppComponent, InlineStyleComponent],
   providers: [
     { provide: AppStorage, useClass: UniversalStorage }
   ],

diff --git a/src/app/inline-style/inline-style.component.scss b/src/app/inline-style/inline-style.component.scss
@@ -0,0 +1 @@
+@import '../../styles/main.scss';
diff --git a/src/app/inline-style/inline-style.component.ts b/src/app/inline-style/inline-style.component.ts
@@ -0,0 +1,11 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-inline-style',
+  template: '',
+  styleUrls: ['./inline-style.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+
+export class InlineStyleComponent {
+}
diff --git a/src/app/inline-style/inline-style.module.ts b/src/app/inline-style/inline-style.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InlineStyleComponent } from './inline-style.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [InlineStyleComponent],
+  exports: [InlineStyleComponent],
+})
+export class InlineStyleModule {}
diff --git a/src/index.html b/src/index.html
@@ -12,6 +12,7 @@
 
 <body>
   <app-root></app-root>
+  <app-inline-style></app-inline-style>
 </body>
 
-</html>
+</html>