Re-compilation failed on external import changes

🐞 Bug report

Command (mark with an x)

• serve

Is this a regression?

✍️ Yes, the previous version in which this bug was not present was: 11.0.5

Description

✍️ Since i up to 12.x.x version, i got error on re-compile application. In angular application I use external import out of project environment and folder.

import { CupertinoPane } from '../../../cupertino-pane';

I serve angular app with ng serve and there is no error on this moment. Then, i make changes in cupertino-pane package and build it again with

$ cd cupertino-pane
$ gulp build

In this time, angular cli successfully see changes and trying to re-compile app. Then i got error below. If i re-run ng serve error will disappear. What i want is real-time compilation to have ability make changes in external packages. I use this in previous versions.

🔥 Exception or Error

Cannot find module '../../../cupertino-pane' or its corresponding type declarations.

🌍 Your Environment

Angular CLI: 12.2.4
Node: 14.17.4
Package Manager: npm 6.14.14
OS: darwin x64

Angular: 12.2.4
... cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.4
@angular-devkit/build-angular   12.2.4
@angular-devkit/core            12.2.4
@angular-devkit/schematics      12.2.4
@schematics/angular             12.2.4
rxjs                            6.6.7
typescript                      4.2.3

🔬 Minimal Reproduction

Prepare workspace

$ mkdir bug-workspace
$ cd bug-workspace
$ git clone https://github.com/roman-rr/cupertino-pane.git
$ ng new ng-project

You must have this folder structure:

- bug-workspace
   - cupertino-pane
   - ng-project

Code

Add import to angular project here /bug-workspace/ng-project/src/app/app.component.ts

import { CupertinoPane } from '../../../cupertino-pane';

Serve

$ cd /bug-workspace/ng-project/
$ ng serve

On this step you will have success compilation without errors with external package.

Catch error

Open new terminal tab and execute

$ cd /bug-workspace/cupertino-pane/
$ npm i
$ gulp build

Now look at first terminal where ng serve executed and you will have error. Re-execute ng serve and error will dissapears.

[roman-rr]

@alan-agius4 Disabled rollup-plugin-typescript2 cache for developing is enough at this moment. Probably it’s good to user Angular CLI or interesting stenciljs (which is build for many frameworks), hope to migrate in future.

Thanks!

[roman-rr]

@alan-agius4 updated main post with reproduction steps.