extractCss no longer working

qdouble commented 5 years ago

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",

enten commented 5 years ago

@qdouble
Thanks for you feedbacks.

I will try to investigate this issue this week end.

enten commented 5 years ago

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

qdouble commented 5 years ago

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

qdouble commented 5 years ago

I'm still looking into it, but maybe this is the commit that changed the behavior? https://github.com/angular/angular-cli/commit/2b367be1c3a5108281cd6390917c845dee132e41

qdouble commented 5 years ago

@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

enten commented 5 years ago

@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 4365aae2, 823de2d6 and and publish udk v1.1.6.

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

qdouble commented 5 years ago

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

enten / udk

extractCss no longer working #12