Angular-cli: Feature: Exclude files from 'watch' mode

[kchojhu]

I think it would be great if you can exclude files to not watch so that it doesn't recompile every time. As of now, I'm using styles.scss to override the default styles.css. Yes, I do know that component can include the scss but I rather just have 1 style file for entire application (it's very small app). Anyways, everytime I change scss files then it gets compiled twice. Thanks and definitely loving NG2.

[gelliott181]

Currently Webpack builds the entire project on any change, so excluding a file from being watched isn't going to do much yet. There are plans to allow partial building of projects for this sort of case, but based on responses from the Angular CLI team we should expect them after the new year begins.

[filipesilva]

It definitely shouldn't be compiled twice, that sounds like a bug. I tried to repro that on latest master and didn't get a double compile, so it might be fixed now.

Regarding watch exclusing... I don't think we're adding that anytime soon. The way webpack works, it watches every dependency of the app plus the stuff we tell it to watch (styles, scripts, assets). If you don't want any of those to be watched, you can just remove it from angular-cli.json.

[awerlang]

it watches every dependency of the app plus the stuff we tell it to watch (styles, scripts, assets)

The entire root folder is watched. Repro:

1. Add a new folder inside app's root directory, let's call it scss;
2. Add a new file to this folder, let's call it .gitkeep;

ng serve would trigger a recompile.

I have my scss files inside this source folder, but these are compiled externaly. So every time I save, the app is refreshed but without the latest build from sass.

I believe this is a bug, given that the scope of watched files is wider than expected.

[skulptur]

In my case it´s with pug files. I´m compiling them with gulp and expected only the generated html to trigger compilation or at least a way to exclude .pug from watch. I have them at the same folder where the html is generated.

[samartioli]

@spredemann Did you ever figure out a solution... I am using pug with Angular 4, and using a gulp task to compile pug to html.. problem is ng-build see's the pug changes and recompiles. Wasn't a big deal until I started using include pugfile.pug pug files...
I supposed I could ng eject and wire up webpack myself... I'd prefer not to.

[skulptur]

@samartoli no but you probably should avoid includes anyway. Write smaller components.

[edoloughlin]

Emacs creates a file called .#<filename> when you begin editing <filename>. This causes angular-cli to rebuild. I could set watchOptions.ignored to avoid this issue but this doesn't seem to be possible with angular-cli, forcing me to ng eject

[dmitrysteblyuk]

@filipesilva

If you don't want any of those to be watched, you can just remove it from angular-cli.json

The way I see it, everything is watched. Every time I upload a file ng rebuilds. Changing root in angular-cli.json does not help.

I guess I have to move public folder outside of root directory.

[towc]

yeah, how do I get it not to watch vim files? It's very very annoying

[filipesilva]

Reopening, I can confirm that everything in src/ is indeed watched. I don't know if there's a way to configure webpack to not rebuild when random stuff is added to the folder. PR's and suggestions are welcome.

[dmitrysteblyuk]

I believe everything in project directory is watched (where angular-cli.json is located) not only in src/. I have app root set to "src" in angular-cli.json, but still ng recompiles when any of my project files is saved.

[simpers]

Is this being worked on? I am just like @edoloughlin using Emacs and right now I get this every time I edit a scss file and saving it before it finishes compiling:

webpack: Compiling... 94% asset optimization(node:6150) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, stat '/home/simon/arbete/gor-cli/src/assets/scss/.#index.scss' (node:6150) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[jaimealsilva]

Same issue as https://github.com/angular/angular-cli/issues/4593

[redbmk]

I'm looking into a fix for this. I'm thinking it would be an option passed in, similar to poll (maybe called ignored) that lets you set an anymatch string via the command line, or an anymatch string/array of strings via an option in .angular-cli.json.

If I ng eject and add ignored: "**/*.swp" to devServer.watchOptions it will ignore writes to any *.swp file. However, if I add ignored: "**/*.swp" to watchOptions in the dev server config in angular-cli (after modifying the spec so it accepts the option) it still writes on those files.

Any ideas what could be going wrong here?

[redbmk]

I take some of it back...it is working when I do the steps recommended in npm link and run this modified code in another project, but the test I have written is not passing. Something about this triggers a rebuild when it shouldn't. Can anybody see what's wrong with this test? When I run the linked version I'm invoking it the same way (ng serve --ignored=**/*.swp). I also have a console.log showing me the configuration and it shows the same in the test as it does when using it in practice.

import {
  killAllProcesses,
  waitForAnyProcessOutputToMatch,
  execAndWaitForOutputToMatch
} from '../../utils/process';
import {writeFile, appendToFile} from '../../utils/fs';
import {expectToFail} from '../../utils/utils';

const webpackGoodRegEx = /webpack: Compiled successfully./;

export default function() {         
  const ignoreCmd = `--ignored=**/*.swp`;

  return execAndWaitForOutputToMatch('ng', ['serve', ignoreCmd], webpackGoodRegEx)
    .then(() => appendToFile('src/main.ts', 'console.log(1);')) 
    .then(() => waitForAnyProcessOutputToMatch(webpackGoodRegEx, 10000))

    .then(() => writeFile('src/.main.ts.swp', 'console.log(1);')) //FIXME: this still triggers a rebuild
    .then(() => expectToFail(() => waitForAnyProcessOutputToMatch(webpackGoodRegEx, 10000)))

    .then(() => appendToFile('src/main.ts', 'console.log(1);'))
    .then(() => waitForAnyProcessOutputToMatch(webpackGoodRegEx, 10000))
    .then(() => killAllProcesses(), (err: any) => {
      killAllProcesses();
      throw err;
    });
}   

[filipesilva]

Closed via https://github.com/angular/angular-cli/pull/7310, src/ is no longer watched unconditionally.

[jbojcic1]

For library generated with cli it seems to be watching entire library folder. @filipesilva I assume that currently it's not possible to add exception for library?

[Robert-Baindourov]

I don't have this anular-cli.json file that has been mentioned. Using angular 7.
Is it serve.json now?
Can You link to an example of how to setup exclusion?

robert@pop-os:~/bose_project/Raphael-App-Framework$ sudo find / -iname angular-cli.json
find: ‘/run/user/1000/gvfs’: Permission denied
robert@pop-os:~/bose_project/Raphael-App-Framework$ sudo find / -iname serve.json
find: ‘/run/user/1000/gvfs’: Permission denied
/home/robert/bose_project/Raphael-App-Framework/node_modules/@angular/cli/commands/serve.json
/home/robert/bose_project/angular-electron/node_modules/@angular/cli/commands/serve.json
/home/robert/.nvm/versions/node/v12.4.0/lib/node_modules/@angular/cli/commands/serve.json
/home/robert/Raphael-App-Framework/node_modules/@angular/cli/commands/serve.json
/home/robert/.cache/yarn/v4/[email protected]/node_modules/@angular/cli/commands/serve.json
/var/backups/backintime/pop-os/robert/1/new_snapshot/backup/home/robert/.nvm/versions/node/v12.4.0/lib/node_modules/@angular/cli/commands/serve.json

[angular-automatic-lock-bot[bot]]

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._}