Server render global styles

[rimlin]

I meet the problem with rendering global styles in server. In example, i use SASS and this my webpack config for this:

      {
        test: /\.scss$/,
        exclude: [/\.global\.scss$/],
        loaders: ['raw-loader', 'sass-loader']
      },
      {   
        test: /\.global\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      }

In app.component.ts i require global style: require('./app.component.global.scss');

Error:

                return window && document && document.all && !window.atob;
                       ^
ReferenceError: window is not defined

As i understand, the problem is in style-loader, which work only in client. There may be some approaches to resolve this problem and render style in server and inject it on page, without using extract-text-webpack-plugin? Otherwise user will download styles separately, what is not good.

[DmitriyKhirniy]

I had the same problem. U resolve it with this style load configuration. { loader: 'css-loader', options: { minimize: true } }, { loader: 'resolve-url-loader' }, { loader: 'sass-loader?sourceMap' }

[nourissam]

hello I find a problem when i install the animation module .the give me an error in the browser ReferenceError: document is not defined at DefaultDomRenderer2.selectRootElement (C:\Users\nour\Projet\nodeValueSeo\dist\server.js:23817:72) at createElement (C:\Users\nour\Projet\nodeValueSeo\dist\server.js:10189:23) at createViewNodes (C:\Users\nour\Projet\nodeValueSeo\dist\server.js:12867:44) at createRootView (C:\Users\nour\Projet\nodeValueSeo\dist\server.js:12814:5) at Object.createProdRootView [as createRootView] (C:\Users\nour\Projet\nodeValueSeo\dist\server.js:13475:12) at ComponentFactory_.create (C:\Users\nour\Projet\nodeValueSeo\dist\server.js:10735:46) at ComponentFactoryBoundToModule.create (C:\Users\nour\Projet\nodeValueSeo\dist\server.js:4272:29) at ApplicationRef_.bootstrap (C:\Users\nour\Projet\nodeValueSeo\dist\server.js:5855:57) at C:\Users\nour\Projet\nodeValueSeo\dist\server.js:5644:79 at Array.forEach (native)

[rimlin]

@nourissam you need to add BrowserAnimationsModule in browser-app.module.ts instead of app.module.ts, which is used in server.

[ysus]

can anybody resolve the issue, i can resolve it but i dont know why take a long time to build i used this configuration `{ test: /.scss$/, use: [{ loader: "to-string-loader" }, { loader: "css-loader" }, { loader: "resolve-url-loader" }, { loader: "sass-loader", options: { sourceMap: true, data: '@import "styles";', includePaths: [ DIR //const DIR = join(process.cwd(), 'src', 'styles');

        ]
      }
    }`

[rimlin]

@ysus i resolve this problem by creating separate component, where i include my global style and set flag None to encapsulation, then i declare this component at my app module file and add selector to app component file.

Example of my component which provide global styles:

@Component({
  moduleId: module.id,
  selector: 'global-css',
  encapsulation: ViewEncapsulation.None,
  template: ``,
  styleUrls: [
    // global styles here
  ]
})
export class GlobalCssComponent {}

[ysus]

But this is a bad practice, break the DOM Shadow

[Maden-maxi]

I have a solution. I copy some webpack configs from eject version angular-cli-project. Main changes in webpack/webpack.{commont,client}.js. Also you will need update dependencies. My project has angular-cli, so you can use create commands such as ng generate [name] but ng serve and ng build not work. See my repo