Ivy can only work in inline-template mode

[curdeveryday]

🐞 bug report

Description

Hi,

I add a module named core.module.ts and there is a component named core.component.ts in it. I edit HTML by templateUrl for core.component.ts Last, I import core.module.ts in app.module.ts. But I found when I modified core.component.html, the page did not render it.

Then I set the "enableIvy": true to "enableIvy": false in tsconfig.app.json and run ng s again. It works when I update core.component.html every time.

And if it is the first time to open page after ng s, it will render correctly. But if I edit the HTML file, the DOM will render fail.

Is it ivy only can run with --inline-template?

Thanks.

---

Here's my code:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ng-demo';
}

app.component.html

<div class="main">
    <h1>App</h1>
    <app-core></app-core>
</div>

core.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoreComponent } from './core.component';

@NgModule({
  declarations: [CoreComponent],
  exports: [CoreComponent],
  imports: [
    CommonModule
  ]
})
export class CoreModule { }

core.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-core',
  templateUrl: './core.component.html',
  styleUrls: ['./core.component.scss']
})
export class CoreComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

core.component.html

<p>core works!</p>

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

Project Directory

Result

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.0
@angular-devkit/build-angular     0.801.0
@angular-devkit/build-optimizer   0.801.0
@angular-devkit/build-webpack     0.801.0
@angular-devkit/core              8.1.0
@angular-devkit/schematics        8.1.0
@ngtools/webpack                  8.1.0
@schematics/angular               8.1.0
@schematics/update                0.801.0
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

[JoostK]

This looks like a duplicate of #30947 which should have been fixed with #30954 and #14753, however according to #14907 (comment) it is not working correctly yet.

[alan-agius4]

There was another report for this, and I can confirm that rebuilds are not working in 8.1

#14999

[alan-agius4]

I just looked a deeper look into this and it seems to be a bug in @ngtools/webpack and issue following path normalisation.

[curdeveryday]

@alan-agius4 Thanks very much. Since it is not bug in angluar, I close this and track in angular/angular-cli#15013.

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