Giters

enten / udk

Universal Development Kit: Webpack extension which improves universal application development. - THE UDK PROJECT SUPPORT IS CURRENTLY SUSPENDED.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

extractCss no longer working

qdouble opened this issue · comments

commented

If I build the browser and server separately, the css gets extracted just fine, but when I build with udk, while it seems to work fine with the dev server, the css doesn't get put into the head tag when doing a regular build.

Using:

    "@angular-devkit/build-angular": "~0.801.0",
    "@angular/cli": "~8.1.0",
    "udk": "^1.1.4",
commented

@qdouble
Thanks for you feedbacks.

I will try to investigate this issue this week end.

commented

@qdouble
I used angular-universal as base project.
I updated angular dependencies to v8.1.0 (v0.801.0 for the devkit and v8.1.1 for nguniversal dependencies).
I add styles in src/app/welcome/welcome.component.scss and src/styles.scss.

When I run ng build app (udk-builder) or ng run app:browser && ng run app:server (angular devkit builders only): styles on browser side aren't extracted (src/styles.scss is in dist/app/browser/styles*.js and src/app/welcome/welcome.component.scss is in dist/app/browser/welcome-welcome-module*.js).

I didn't succeed to extract styles even with angular devkit browser builder.

Dev server builder hasn't the same behavior than browser builder (it doesn't support differential loading because it's useless for dev purposes): I think we can't used its output as correct reference.

After that I tried to create a fresh angular project with angular cli v8.1.0 to compare.

npm install -g @angular/cli@8.1.0
ng new app --routing --style scss
cd app
echo "html, body { background: cyan }" >> src/styles.scss
echo ":host { display: block; background: yellow }" >> src/app/app.component.scss
ng build app
ls dist/app

I saw that my styles are in dist/app/styles*.js and dist/app/main*.js files.

In conclusion: I think this "issue" isn't related to udk. May it's the expect behavior/output since angular introduce differential loading? May there is an option to enable css extract? We need to investigate more about angular 8 devkit features. Something had changed.

Additional information: when you use angular in universal way, components styles server-rendered has there styles rendered in HTML like below (but none global styles):

<head>

<style ng-transition="ng-app">
[_nghost-sc0] {
  display: block;
  background: cyan;
}
</style>

</head>
commented

@enten if you run ng run app:browser --extractCss it extracts the css, so I don't think devkit is broken

commented

I'm still looking into it, but maybe this is the commit that changed the behavior? angular/angular-cli@2b367be

commented

@enten to fix it, you need to change

result.browserFiles = result.browserES6EmittedFiles.filter(x => x.extension === '.css');

to

result.browserFiles = result.browserES5EmittedFiles.filter(x => x.extension === '.css');

https://github.com/enten/udk/blob/master/angular/lib/ng-devkit.ts#L446

commented

@qdouble
Thanks for your feedbacks.

Yesterday, when I answered I totally forget that browser builder has option extractCss.

I set extractCss to true (to avoid production build to test extractCss) and you're right: extractCss don't works as expected.

5 days ago a commit in devkit has inverted browser config order:

  if (differentialLoading) {
-   scriptTargets.unshift(ts.ScriptTarget.ES5);
+   scriptTargets.push(ts.ScriptTarget.ES5);
  }

I handle this change in 4365aae, 823de2d and and publish udk v1.1.6.

Can you try to update to udk@1.1.6 and check if this issue is resolved?

commented

@enten just tried out 1.1.6, seems to work fine now... thanks!