Server render global styles about ng-universal-demo HOT 7 OPEN

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

from ng-universal-demo.

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)

from ng-universal-demo.

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

from ng-universal-demo.

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');

        ]
      }
    }`

from ng-universal-demo.

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

from ng-universal-demo.

But this is a bad practice, break the DOM Shadow

from ng-universal-demo.

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

from ng-universal-demo.