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.

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

Already on GitHub? Sign in to your account

ng serve fails to correctly watch git changes (need to `touch` files to trigger correct builds) #19176

Open
hilnius opened this issue Oct 22, 2020 · 0 comments

Comments

@hilnius
Copy link

@hilnius hilnius commented Oct 22, 2020

🐞 Bug report

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc

Is this a regression?

I think yes, it was working for us I believe in version 7, but a project from scratch shows the error now.

Description

When files are changed by git (for example), the rebuild doesn't happen correctly. There is an error "Module build failed" which seems to come from some virtual file cache that is (I suppose) not correctly invalidated.

🔬 Minimal Reproduction

# Create a new Angular Project
npm install -g @angular/cli@~10.0.0 # the @~10.0.0 is optional at this moment of course
ng new project
# I select the following options but I'm not sure it changes anything
# ? Would you like to add Angular routing? No
# ? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]

cd project

# create a new branch
git checkout -b rename-component

# start the server
ng serve --port=4201

#  move a component
mv src/app/app.component.ts src/app/app2.component.ts

# the ng serve commands shows an error, which is expected

# open app.module.ts and change the line 
# import { AppComponent } from './app.component'; 
# to 
# import { AppComponent } from './app2.component';
vim app.module.ts 

# save the file with that change. the app compiles again (expected).

# add the changes to the branch 
git add src

# Output is expected :  
# On branch rename-component
# Changes to be committed:
#   (use "git restore --staged <file>..." to unstage)
# 	modified:   src/app/app.module.ts
# 	renamed:    src/app/app.component.ts -> src/app/app2.component.ts

# commit 
git commit -m "rename component"

# go back to master, the app rebuilds correctly ` Compiled successfully. `
git checkout master

# go back to our branch
git checkout rename-component

# We have a compilation error !!!! Which is not expected
# 4 unchanged chunks
# chunk {main} main.js, main.js.map (main) 8.35 kB [initial] [rendered]
# Time: 314ms
# 
# ERROR in ./src/app/app2.component.ts
# Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
# Error: /.../project/src/app/app2.component.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
#     at AngularCompilerPlugin.getCompiledFile (/.../project/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:938:23)
#     at /.../project/node_modules/@ngtools/webpack/src/loader.js:42:31
#     at processTicksAndRejections (internal/process/task_queues.js:97:5)

# touch the module file
touch src/app/app.module.ts

# now it compiles again ! 

It's not expected to have to save (or touch) module.ts files (or any file, really) when changing from a branch to the other. Files are modified and it should retrigger a compilation, here it seems that the file rename is taken into account but not the module change (because a "touch" on the module makes the compilation work again).
This is a minimal reproduction on a very simple app but on a bigger production app where many engineers collaborate, we have to restart ng serve everytime we switch from a branch to another which is a very big pain.

🔥 Exception or Error


ERROR in ./src/app/app2.component.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: /.../project/src/app/app2.component.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (/.../project/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:938:23)
    at /.../project/node_modules/@ngtools/webpack/src/loader.js:42:31
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

🌍 Your Environment


Angular CLI: 10.0.8
Node: 12.19.0
OS: linux x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cli                      10.0.8
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Anything else relevant?
Reproduced from on an Ubuntu 20.04.1 LTS laptop with 64-bit (pretty standard).
Note: to fix the compilation, sometimes I have to touch all files that were changed during the git branch change. (I also have to touch src/app/app2.component.ts in my example above to rebuild correctly)

@hilnius hilnius changed the title ng serve fails to correctly watch git changes (need to `touch` modules to trigger correct builds) ng serve fails to correctly watch git changes (need to `touch` files to trigger correct builds) Oct 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.