[IVY][9.0.0] Adding additional inputs in directive built by ng-packagr is not recognized by consuming app in watch mode

[JonWallsten]

🐞 Bug report

Command (mark with an x)

• build

Description

We are building a library with ng-packagr and then consuming it in our Angular 9 application.
When I added a new input in my directive it wasn't recognized until after I stopped my build completely and started from scratch.

After the first initial build, when in watch mode, I added the input resizeElement

@Directive({
    selector: '[resizable]'
})
export class ResizableDirective implements OnInit, OnDestroy {
    @Input('resizable') containerSelector: string;
    @Input('resizeElement') resizeElementSelector: string;
    ...
}

After the library was rebuilt by the watcher, and then the app was rebuilt, also by a watcher, the input was not recognized by the Angular compiler.

🔬 Minimal Reproduction

As usual I can provide an example but it takes time. Let me know if it's needed.

🔥 Exception or Error

 | ERROR in packages\web-app-edit\src\app\components\common\condition-editor\condition-editor.component.html:1:33 - error NG8002: Can't bind to 'resizeElement' since it isn't a known property of 'div'. |
 | 1 

 |                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 |
 |   packages\web-app-edit\src\app\components\common\condition-editor\condition-editor.component.ts:6:18
 |     6     templateUrl: 'condition-editor.component.html',
 |                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 |     Error occurs in the template of component ConditionEditorComponent.
 |

🌍 Your Environment

Angular CLI: 9.0.1
Node: 12.14.0
OS: win32 x64

Angular: 9.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.1
@angular-devkit/build-optimizer   0.900.1
@angular-devkit/core              9.0.1
@angular-devkit/schematics        9.0.1
@angular/cli                      9.0.1
@angular/http                     8.0.0-beta.10
@ngtools/webpack                  9.0.1
@schematics/angular               9.0.1
@schematics/update                0.900.1
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.5

Anything else relevant?

[petebacondarwin]

Possibly an issue with the Angular compiler's incremental mode. It would be good to see if the CLI is triggering the Angular compiler correctly when this change occurs, which could help to narrow it down...

[JonWallsten]

I can provide a reproduction case in our example app (Webpack+Angular Compiler Plugin), but I don't have the knowledge to setup the same example with Angular CLI unfortunately.

[alan-agius4]

Hi I got a couple of question;

1. Can you please elaborate more on your setup if your are not using Angular CLI?
2. How are you consuming a library in watch mode in another application?
3. Are you using TS Path mappings or NPM link?
4. Is you library built using Ivy or VE? (Can you share tsconfig you are passing to ng-packagr)?

[JonWallsten]

Hi I got a couple of question;

1. Can you please elaborate more on your setup if your are not using Angular CLI?

We're using Webpack and AngularCompilerPlugin

new AngularCompilerPlugin({
    tsConfigPath: helpers.rootPath('tsconfig.build.json'),
    mainPath: helpers.rootPath('src/main.ts'),
    sourceMap: true
}),

//main.ts

platformBrowserDynamic().bootstrapModule(AppModule)
    .then(module => {
        if (!environment.production) {
            const applicationRef = module.injector.get(ApplicationRef);
            const appComponent = applicationRef.components[0];
            enableDebugTools(appComponent);
        }
    })
    .catch(err => console.error(err));

2. How are you consuming a library in watch mode in another application?

We're using Webpack Dev Server in watch mode. It detects when library's files has changed.

3. Are you using TS Path mappings or NPM link?

We're using path mappings for TS and Webpack's Resolve Alias for JS/CSS/etc

4. Is you library built using Ivy or VE? (Can you share tsconfig you are passing to ng-packagr)?

Library is built using IVY.

// tsconfig.json in monorepo root
{
  "compilerOptions": {
    "rootDir": ".",
    "baseUrl": ".",
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noEmitHelpers": true,
    "noEmitOnError": true,
    "importHelpers": true,
    "noImplicitAny": false,
    "strictNullChecks": false,
    "strictPropertyInitialization": false,
    "pretty": true,
    "sourceMap": true,
    "declaration": false,
    "preserveConstEnums": true,
    "downlevelIteration": true,
    "lib": [
        "dom",
        "es2015",
        "es2017.object",
        "es2017.string"
    ],
    "typeRoots": [
        "./typings/",
        "./node_modules/@types"
    ],
    "paths": {
      "@oas/web-lib-core": ["./packages/web-lib-core/dist"],
      "@oas/web-lib-common": ["./packages/web-lib-common/dist"],
      "@oas/web-lib-angular-js": ["./packages/web-lib-angular-js/dist"],
      "@oas/web-lib-angular": ["./packages/web-lib-angular/dist"],
      "@oas/internal-lib-e2e": ["./packages/internal-lib-e2e/dist"]
    }
  },
  "compileOnSave": false,
  "buildOnSave": false
}

// tsconfig.build.json in the lib
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "strictNullChecks": true,
    "noImplicitReturns": true,
    "inlineSourceMap": true,
    "inlineSources": true,
    "skipLibCheck": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "typeRoots": [
      "node_modules/@types",
      "../../node_modules/@types",
      "./typings/",
      "../../typings/"
    ]
  },
  "files": [
    "src/index.ts",
    "./typings/global.d.ts",
    "../../typings/global.d.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "enableResourceInlining": true
  }
}

ng-packagr is building with the following code:

import * as ngPackage from 'ng-packagr';
import yargs from 'yargs';

const argv = yargs.argv;

ngPackage
  .ngPackagr()
  .forProject('ng-package.json')
  .withTsConfig('tsconfig.build.json')
  .withOptions({ watch: (argv.watch as boolean) })
  .build()
  .catch(error => {
      console.error(error);
      process.exit(1);
  });

// ng-package.json
{
    "$schema": "../../node_modules/ng-packagr/package.schema.json",
    "lib": {
        "entryFile": "src/index.ts"
    },
    "assets": [
        "./src/styles/**/*.scss"
    ],
    "whitelistedNonPeerDependencies": [
        "@oas/web-lib-core"
    ]
  }

[alan-agius4]

Hi @JonWallsten, I tried this on a CLI project and I am unable to replicate this issue. Can you please share a repro? Thanks

Edit: I actually just managed to replicate it.

[JonWallsten]

@alan-agius4 Yes! I'll do it tomorrow and send you an invite to the repo and write some instructions here.

[alan-agius4]

@JonWallsten, No need I managed to replicate it, thanks.

[JonWallsten]

@alan-agius4 : Great! Let me know if you need more info. It's probably related to this as well: https://github.com/angular/angular-cli/issues/16914

[alan-agius4]

it seems that we are not watching all the dts files, which in turn causes certain files not to be removed from cached when they are changed.