question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Angular-cli doesn't watch for ALL files correctly.

See original GitHub issue

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.4.2 node: 7.5.0 os: win32 x64 @angular/common: 4.4.4 @angular/compiler: 4.4.4 @angular/core: 4.4.4 @angular/forms: 4.4.4 @angular/http: 4.4.4 @angular/platform-browser: 4.4.4 @angular/platform-browser-dynamic: 4.4.4 @angular/router: 4.4.4 @angular/cli: 1.4.2 @angular/compiler-cli: 4.4.4 typescript: 2.2.2

Repro steps.

watch bug.zip

  1. npm install
  2. ng serve
  3. change anything in src/app/store/application-state.ts (it is linked in component, which is used in app.module.ts) and SAVE = NO REBUILD
  4. Change (example) from storeData: string; to storeData: boolean; and RE-SAVE anything else where the watch is correctly watching = application successfully built, but it SHOULD NOT, because there is assignment: store.subscribe(x=> x.storeData = “pepa”) but type of storeData has been changed to boolean…

Desired functionality.

It should watch for all files correctly

Mention any other details that might be useful.

  • I have tried to change typescript to 2.4.0+ (because of breaking change in CHANGELOG) = NOT WORKING

  • i have tried to update globally angular-cli(1.4.5) and create new APP via ng new = with latest dependencies = NOT WORKING

BTW even with latest Angular-cli, typescript version in dev-dependencies is “~2.3.3” despite your required version in CHANGELOG

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:21 (11 by maintainers)

github_iconTop GitHub Comments

3reactions
hanslcommented, Oct 10, 2017

After investigating, you’re correct in your assumption that it’s not the same issue.

The problem is 3 fold:

  1. TypeScript discards type information, and since you’re only importing types that file will be discarded from the compilation output;
  2. Since it’s discarded from the output, Webpack does not know about the dependency between your file and the TypeScript that includes the type.
  3. We rely on Webpack’s dependency graph to actually know if something needs rebuilding.

The only point where we actually have control is point 3 and we should look at dependencies inside TypeScript and tell webpack about TS’s dependency graph. I’ll come up with a fix soon.

1reaction
filipesilvacommented, Oct 12, 2017

Ok so I’m looking at the file online in https://unpkg.com/@ngtools/webpack@1.7.3/src/loader.js. You’re right, it’s quite different. We published stable (1.7.3) but also the beta (1.8.0-beta.4), and a lot of code in that PR is only for the beta.

What you want to change is:

// from
            _getImports(refactor, compilerOptions, plugin.compilerHost, plugin.moduleResolutionCache)
                .forEach((importString) => this.addDependency(importString));
// to
            _getImports(refactor, compilerOptions, plugin.compilerHost, plugin.moduleResolutionCache)
                .forEach((dep) => this.addDependency(dep.replace(/\//g, path.sep)));

This should be enough to test.

Read more comments on GitHub >

github_iconTop Results From Across the Web

angular-cli build with --watch doesn't watch - Stack Overflow
I faced a problem, on Ubuntu 17.04 @angular/cli@1.3.2 command ng build --watch exits after it builds app (successfully) and doesn't start to ...
Read more >
Use Angular Schematics to Simplify Your Life | Okta Developer
Angular CLI is a command-line tool that generates a basic Angular project for you. In its 7.0 release, it started asking you questions...
Read more >
Total Guide To Custom Angular Schematics | by Tomas Trajan
This article will teach you how to create tailor made schematics specific to the needs of your project or organization! It will empower...
Read more >
Identify and Fix Build and Deployment Errors in Your Angular ...
In this guide, you will learn how to spot some of the most common build and deployment errors and how to resolve them...
Read more >
Building an Angular Library with multiple entry points | Articles
The CLI will use the source root path (configured in angular.json) and will append lib/ to the path. This lib prefix is hard-coded...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found