Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Imported Sass/Scss files do not trigger a refresh when using ng serve in aot mode #16569

Closed
1 of 15 tasks
Kyhel opened this issue Jan 7, 2020 · 3 comments 路 Fixed by #16743
Closed
1 of 15 tasks

Imported Sass/Scss files do not trigger a refresh when using ng serve in aot mode #16569

Kyhel opened this issue Jan 7, 2020 · 3 comments 路 Fixed by #16743
Assignees
@filipesilva
Labels
area: devkit/build-angular freq2: medium severity3: broken type: bug/fix workaround2: non-obvious
Milestone
v9-candidates

Comments

@Kyhel
Copy link

Kyhel commented Jan 7, 2020 •
edited

馃悶 Bug report

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • xi18n
  • run
  • config
  • help
  • version
  • doc

Is this a regression?

It doesn't seem to be a regression as I have the exact same problem with both angular 8 and 9

For the sake of helping figure out the problem, I created a fresh project, did some tests, then upgraded to angular 9 and did some tests again.

Description

Angular 8 :

When using "ng serve --aot", modifying an imported scss file does not trigger a refresh. It does however when using only "ng serve"

Angular 9

When using "ng serve" (aot is enabled by default when upgrading from 8 to 9), modifying an imported scss file does not trigger a refresh. If you disable aot in angular.json, then it works.

馃敩 Minimal Reproduction

Angular 8

  1. Create a new angular project : "ng new test-css". Chose no routing, and scss style format

  2. Modify app.component.html to contain only that :

<div class="my-class">
	Text
</div>
  1. Modify app.component.scss to contain only that :
@import '../custom.scss';

.my-class {
	color: $color;
}
  1. Create a file named custom.scss in the src folder that contains this :
// $color: green;
$color: red;

  1. run "ng serve --aot" => the text is red

  2. comment the red color line and uncomment the green one, then save => nothing happens

  3. save app.component.scss => a refresh is done but the color is still red, save again, the color is green.

馃敟 Exception or Error

Not applicable.

馃實 Your Environment

Using visual studio code insiders 1.42.0


Angular CLI: 8.3.21
Node: 12.13.1
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.21
@angular-devkit/build-angular     0.803.21
@angular-devkit/build-optimizer   0.803.21
@angular-devkit/build-webpack     0.803.21
@angular-devkit/core              8.3.21
@angular-devkit/schematics        8.3.21
@angular/cli                      8.3.21
@ngtools/webpack                  8.3.21
@schematics/angular               8.3.21
@schematics/update                0.803.21
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2   0.803.21
rxjs                         6.4.0


Angular CLI: 9.0.0-rc.7
Node: 12.13.1
OS: win32 x64

Angular: 9.0.0-rc.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.7
@angular-devkit/build-angular     0.900.0-rc.7
@angular-devkit/build-optimizer   0.900.0-rc.7
@angular-devkit/build-webpack     0.900.0-rc.7
@angular-devkit/core              9.0.0-rc.7
@angular-devkit/schematics        9.0.0-rc.7
@ngtools/webpack                  9.0.0-rc.7
@schematics/angular               9.0.0-rc.7
@schematics/update                0.900.0-rc.7
rxjs                              6.5.4
typescript                        3.6.4
webpack                           4.41.2

Anything else relevant?
@ngbot ngbot bot modified the milestone: Backlog Jan 7, 2020
@clydin clydin modified the milestones: Backlog, v9-candidates Jan 7, 2020
@filipesilva
Copy link
Contributor

Heya, thanks for the super detailed repro!

In regards to this step:

  1. save app.component.scss => a refresh is done but the color is still red, save again, the color is green.

I think we had a bug at some point that made it so you needed the double saves. But I don't see it anymore with a new project with rc.9.

I can definitely confirm that changes to src/custom.scss don't trigger a rebuild, but they should. Will dig into it.

@filipesilva
Copy link
Contributor

Also of note, this only affects Ivy projects (at least as of rc.9).

filipesilva added a commit to filipesilva/angular-cli that referenced this issue Jan 23, 2020
@filipesilva
fix(@ngtools/webpack): correctly determine resource dependencies
acbc5a3 
Fix angular#16569
@filipesilva filipesilva mentioned this issue Jan 23, 2020
Merged
filipesilva added a commit to filipesilva/angular-cli that referenced this issue Jan 23, 2020
@filipesilva
fix(@ngtools/webpack): correctly determine resource dependencies
794c3df 
Fix angular#16569
kyliau pushed a commit that referenced this issue Jan 24, 2020
@filipesilva @kyliau
fix(@ngtools/webpack): correctly determine resource dependencies
0587153 
Fix #16569
kyliau pushed a commit that referenced this issue Jan 24, 2020
@filipesilva @kyliau
fix(@ngtools/webpack): correctly determine resource dependencies
d463166 
Fix #16569
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 24, 2020
ikjelle pushed a commit to ikjelle/angular-cli that referenced this issue Mar 26, 2024
@filipesilva @kyliau
fix(@ngtools/webpack): correctly determine resource dependencies
edc35ed 
Fix angular#16569
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@filipesilva filipesilva

Labels
area: devkit/build-angular freq2: medium severity3: broken type: bug/fix workaround2: non-obvious
Projects
None yet
Milestone
v9-candidates
Development

Successfully merging a pull request may close this issue.

fix(@ngtools/webpack): correctly determine resource dependencies filipesilva/angular-cli
3 participants
@filipesilva @Kyhel @clydin