Fix file watching with file replacements

[clydin]

Fixes #11339

[filipesilva]

Nit: file name does not match export name.

[clydin]

Done.

[filipesilva]

WDYT of replacing this with a new spec large in replacements_spec_large?

This is the one I had on my branch:

it('file replacements work with watch mode', (done) => {
    const overrides = {
      fileReplacements: [
        {
          replace: normalize('/src/meaning.ts'),
          with: normalize('/src/meaning-too.ts'),
        },
      ],
      watch: true,
    };

    let buildNumber = 0;

    runTargetSpec(host, browserTargetSpec, overrides, 45000, createConsoleLogger()).pipe(
      debounceTime(1000),
      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
      tap(() => {
        const fileName = join(outputPath, 'main.js');
        buildNumber += 1;

        switch (buildNumber) {
          case 1:
            expect(virtualFs.fileBufferToString(host.scopedSync().read(fileName)))
              .toMatch(/meaning\s*=\s*42/);
            expect(virtualFs.fileBufferToString(host.scopedSync().read(fileName)))
              .not.toMatch(/meaning\s*=\s*10/);
            host.writeMultipleFiles({
              'src/meaning-too.ts': 'export var meaning = 84;',
            });
            break;

          case 2:
            expect(virtualFs.fileBufferToString(host.scopedSync().read(fileName)))
              .toMatch(/meaning\s*=\s*84/);
            expect(virtualFs.fileBufferToString(host.scopedSync().read(fileName)))
              .not.toMatch(/meaning\s*=\s*42/);
            break;
        }
      }),
      take(2),
    ).toPromise().then(done, done.fail);
  });

It should be faster than the e2e and also test the content is correct.

[clydin]

Added.

[filipesilva]

Also I think this fixes #7305

[filipesilva]

LGTM, great work!

[hansl]

I fear this doesn't cover the NativeScript case with pattern matching (matching all .html.tns files to .tns). They'd have to list all those files, and even then it doesn't work when creating new files...

[clydin]

Based on the custom host found here, code similar to the following should work:

            new AngularCompilerPlugin({
                entryModule: resolve(appPath, "app.module#AppModule"),
                tsConfigPath: join(__dirname, "tsconfig.esm.json"),
                skipCodeGeneration: !aot,
                hostReplacementPaths: path => {
                    const { dir, name, ext } = parse(path);

                    for (const platform of extensions) {
                        const platformFileName = `${name}.${platform}${ext}`;
                        const platformPath = toSystemPath(join(dir, platformFileName));
            
                        try {
                            const stat = statSync(platformPath);
                            if (stat && stat.isFile()) {
                                return platformPath;
                            }
                        } catch(_e) {
                            // continue checking the other platforms
                        }
                    }
            
                    return path;
                },
            }),

Another option with this PR is to try to use the PlatformFSPlugin which appears to be used within the non-Angular demos found in the repository.

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