Open rimlin opened 7 years ago
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' }
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)
@nourissam you need to add BrowserAnimationsModule
in browser-app.module.ts
instead of app.module.ts
, which is used in server.
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');
]
}
}`
@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 {}
But this is a bad practice, break the DOM Shadow
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
I meet the problem with rendering global styles in server. In example, i use SASS and this my webpack config for this:
In
app.component.ts
i require global style:require('./app.component.global.scss');
Error:
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 usingextract-text-webpack-plugin
? Otherwise user will download styles separately, what is not good.