Skip to content

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

New issue
New issue
Closed
Closed
ng serve in Ivy mode is dropping directives list when editing a template#31654
Assignees
petebacondarwin
Labels
area: compilerIssues related to `ngc`, Angular's template compilerfreq1: lowtype: bug/fix
Milestone
Backlog

Description

@vikerman
vikerman
opened on Jul 18, 2019

🐞 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

Activity

  1. petebacondarwin commented on Jul 19, 2019

    @petebacondarwin
    petebacondarwin
    on Jul 19, 2019
    Contributor

    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.

  2. petebacondarwin commented on Jul 19, 2019

    @petebacondarwin
    petebacondarwin
    on Jul 19, 2019
    Contributor

    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.

  3. alan-agius4
    transferred this issue fromangular/angular-clion Jul 19, 2019
  4. alan-agius4
    added
    area: compilerIssues related to `ngc`, Angular's template compiler
    comp: ivy
    on Jul 19, 2019
  5. ngbot
    added this to the needsTriage milestone on Jul 19, 2019
  6. alan-agius4
    assigned
    petebacondarwin
    on Jul 19, 2019
  7. alxhub
    added
    freq1: low
    severity3: broken
    type: bug/fix
    on Jul 23, 2019
  8. ngbot
    modified the milestones: needsTriage, Backlog on Jul 23, 2019

  9. kolkov commented on Jul 24, 2019

    @kolkov
    kolkov
    on Jul 24, 2019
    • loses code changes on reload (not only in templates)

  10. 33 remaining items

  11. Ploppy3 commented on Jul 31, 2019

    @Ploppy3
    Ploppy3
    on Jul 31, 2019

    Also the ng version report by the OP @vikerman had the same problem, mismatched versions.

  12. kolkov commented on Jul 31, 2019

    @kolkov
    kolkov
    on Jul 31, 2019

    @Ploppy3 yes caused by "@angular-devkit/build-angular": "0.802.0-next.1", this fixed in latest "@angular-devkit/build-angular": "0.802.0-rc.0",

  13. petebacondarwin commented on Jul 31, 2019

    @petebacondarwin
    petebacondarwin
    on Jul 31, 2019
    Contributor

    The problem with the IVY incremental builds is still broken... we are working on a fix - see #31655, which fixes it but not the correct way.

    @kolkov's problem was not IVY related and was fixed in @angular-devkit/build-angular@0.802.0-rc.0 as he reports by this commit: angular/angular-cli@6649483

  14. Ploppy3 commented on Jul 31, 2019

    @Ploppy3
    Ploppy3
    on Jul 31, 2019

    @petebacondarwin Ok thanks for the explanation. Please keep in mind that the 3 of us got mismatched versions as there is no warning whatsoever when you use ng update on the beta branch. Do you feel like I should open an issue or is it OK since it is only related to the beta?

  15. kolkov commented on Jul 31, 2019

    @kolkov
    kolkov
    on Jul 31, 2019

    Thanks!

  16. petebacondarwin commented on Jul 31, 2019

    @petebacondarwin
    petebacondarwin
    on Jul 31, 2019
    Contributor

    @Ploppy3 - yes please open an issue on the CLI repo. I think there should at least be peerDependency warnings...

  17. kara
    closed this as completedin eb5412don Aug 9, 2019
  18. sabeersulaiman
    added a commit that references this issue on Sep 6, 2019

    fix(ivy): reuse compilation scope for incremental template changes. (a…

    ffffa03

  19. angular-automatic-lock-bot commented on Sep 15, 2019

    @angular-automatic-lock-bot
    angular-automatic-lock-botBot
    on Sep 15, 2019

    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.

  20. angular-automatic-lock-bot
    locked and limited conversation to collaborators on Sep 15, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

area: compilerIssues related to `ngc`, Angular's template compilerfreq1: lowtype: bug/fix

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions