Watching doesn't work for file paths remapped by the provided FS host

[sis0k0]

Bug Report or Feature Request (mark with an x)

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

Area

- [X] devkit - @ngtools/webpack
- [ ] schematics

Versions

node v9.5.0
npm 5.7.1
Linux Fedora 25

Repro steps

Create a new ng cli project. Build it in production mode. As specified by the angular.json file, the requests to the environment.ts file are remapped to environment.prod.ts. However, if you change the environment.prod.ts file, that webpack won't rebuild the project. Also, if you change the originally requested file - environment.ts, webpack will detect the change and trigger a build.

Desired functionality

The app should be rebuild when a remapped file is changed.

Mention any other details that might be useful

It looks like the original paths (and not the remapped ones) are added as dependencies for the webpack compilation in the @ngtools/webpack loader - here. The same thing happens for the original component templates and styles (html, css, scss files).

[filipesilva]

I looked a bit into this today.

The current behaviour is due to us using Webpack's watcher to watch files in

angular-cli/packages/ngtools/webpack/src/virtual_file_system_decorator.ts

Lines 107 to 142 in 6449a75

	export class VirtualWatchFileSystemDecorator extends NodeWatchFileSystem {
	constructor(private _virtualInputFileSystem: VirtualFileSystemDecorator) {
	super(_virtualInputFileSystem);
	}
	watch(
	files: any, // tslint:disable-line:no-any
	dirs: any, // tslint:disable-line:no-any
	missing: any, // tslint:disable-line:no-any
	startTime: any, // tslint:disable-line:no-any
	options: any, // tslint:disable-line:no-any
	callback: any, // tslint:disable-line:no-any
	callbackUndelayed: any, // tslint:disable-line:no-any
	) {
	const newCallback = (
	err: any, // tslint:disable-line:no-any
	filesModified: any, // tslint:disable-line:no-any
	contextModified: any, // tslint:disable-line:no-any
	missingModified: any, // tslint:disable-line:no-any
	fileTimestamps: { [k: string]: number },
	contextTimestamps: { [k: string]: number },
	) => {
	// Update fileTimestamps with timestamps from virtual files.
	const virtualFilesStats = this._virtualInputFileSystem.getVirtualFilesPaths()
	.map((fileName) => ({
	path: fileName,
	mtime: +this._virtualInputFileSystem.statSync(fileName).mtime,
	}));
	virtualFilesStats.forEach(stats => fileTimestamps[stats.path] = +stats.mtime);
	callback(err, filesModified, contextModified, missingModified, fileTimestamps,
	contextTimestamps);
	};
	return super.watch(files, dirs, missing, startTime, options, newCallback, callbackUndelayed);
	}
	}

Instead, we should be using our own watcher implementation, that uses host.watch(path). This way the host can properly resolve the alias when trying to watch a file.

I am unsure how much work this is since there might not be a one-to-one correspondence in functionality between the webpack watcher and the host watch functionality.

[angular-automatic-lock-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.}