ng serve in Ivy mode is dropping directives list when editing a template

[vikerman]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

Yes. 8.0.0

Description

ng serve(watch mode) seems to be outputting invalid generated code for a simple component when the template is edited.

🔬 Minimal Reproduction

git clone git@github.com:vikerman/ivy-proj.git
cd ivy-proj

yarn installl

ng serve

<Edit src/app/app.component.html and add more !!! to Hello World>

The browser is refreshed but with the MatButton directive not applied.

🌍 Your Environment

Angular CLI: 8.2.0-next.0
Node: 10.15.3
OS: linux x64
Angular: 8.2.0-next.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.802.0-next.0
@angular-devkit/build-angular     0.802.0-next.0
@angular-devkit/build-optimizer   0.802.0-next.0
@angular-devkit/build-webpack     0.802.0-next.0
@angular-devkit/core              8.2.0-next.0
@angular-devkit/schematics        8.2.0-next.0
@angular/cdk                      8.1.1
@angular/cli                      8.2.0-next.0
@angular/material                 8.1.1
@ngtools/webpack                  8.2.0-next.0
@schematics/angular               8.2.0-next.0
@schematics/update                0.802.0-next.0
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.35.3

[petebacondarwin]

After initial compile:

const _c0 = ["mat-raised-button", "", "color", "primary"];
class AppComponent {
    constructor() {
        this.title = 'ivy-proj!!';
    }
}
AppComponent.ngComponentDef = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: AppComponent, selectors: [["app-root"]], factory: function AppComponent_Factory(t) { return new (t || AppComponent)(); }, consts: 3, vars: 0, template: function AppComponent_Template(rf, ctx) { if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "button", _c0);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](1, "Hello World");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](2, "router-outlet");
    } }, directives: [_angular_material__WEBPACK_IMPORTED_MODULE_1__["MatButton"], _angular_router__WEBPACK_IMPORTED_MODULE_2__["RouterOutlet"]], styles: ["\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL2FwcC5jb21wb25lbnQuc2NzcyJ9 */"] });
/*@__PURE__*/ _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵsetClassMetadata"](AppComponent, [{
        type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"],
        args: [{
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss']
            }]
    }], null, null);

After incremental compile:

const _c0 = ["mat-raised-button", "", "color", "primary"];
class AppComponent {
    constructor() {
        this.title = 'ivy-proj!!';
    }
}
AppComponent.ngComponentDef = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: AppComponent, selectors: [["app-root"]], factory: function AppComponent_Factory(t) { return new (t || AppComponent)(); }, consts: 3, vars: 0, template: function AppComponent_Template(rf, ctx) { if (rf & 1) {
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "button", _c0);
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](1, "Hello World");
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
        _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelement"](2, "router-outlet");
    } }, styles: ["\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL2FwcC5jb21wb25lbnQuc2NzcyJ9 */"] });
/*@__PURE__*/ _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵsetClassMetadata"](AppComponent, [{
        type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"],
        args: [{
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.scss']
            }]
    }], null, null);

You can see that directives: [_angular_material__WEBPACK_IMPORTED_MODULE_1__["MatButton"], _angular_router__WEBPACK_IMPORTED_MODULE_2__["RouterOutlet"]] is missing from the incremental compile output.

[petebacondarwin]

OK, so I think I know what is going on...

In the incremental compilation case we are not re-compiling the app.module.ts, which has the NgModule that owns the AppComponent. This leads to missing metadata in the compilation scope of the component and so the missing directives.

We need to tweak the dependency analysis in ngtsc to ensure that app.module.ts is marked as changed if a resource of one of its source dependencies changes.