question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItΒ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

optimization: true breaks transitiveCompileScopes for jit compiled components

See original GitHub issue

🐞 bug report

Affected Package

I believe This issue is caused by @angular/compiler

Is this a regression?

This was working on Angular version 6.1.10

Description

I am trying to compile a simple component

  <form>
        <input type="text"
           name="value"
        [(ngModel)]="value"> {{value}}
  </form>

with some logic


ngOnInit() { setInterval(() => this.value++, 1000);

inside of a module


{
   imports: [CommonModule, FormsModule],
   declarations: [RuntimeComponent],
}

on the client with JIT compiler with the help of compiler.compileModuleAndAllComponentsSync.

with optimization: false set in angular.json everything works perfectly fine: both input and interpolation are updated with every tick of setInterval and typing inside of an input also updates the value.

with optimization: true ngModel directive is just lost. i.e. interpolated value updates every second, but input neither shows values nor causes updates when you type in it.

I’ve tried to compare the compiled components and modules in optimized vs unoptimized code and here are the differenced that I’ve found:

  • RuntimeComponentModule.Ι΅mod.transitiveCompileScopes.compilation contains only my RuntimeComponent in optimized version versus 33 directives and 13 pipes in unoptimized one.
  • RuntimeComponent.Ι΅cmp.tView contains significantly more items in unoptimized version

In our app far more complex components are compiled, this is just a simpler example with a reproducable issue. At the moment any workarounds would be useful.

Note: you can notice


import { publishFacade } from '@angular/compiler';
publishFacade(window);

in the code. Without this piece compiler is eliminated from the bundle, but this bothers us much less as it could be workarounded

πŸ”¬ Minimal Reproduction

it is impossible to reproduce on a stackblitz. Here is a repository with minimal reproduction example described above https://github.com/AndreyAusianik/ivy-dynamic-problem/

πŸ”₯ Exception or Error

error can be generated if you add something specific to directives to the template. for example #model=β€œngModel” then it won’t be rendered at all, as the compiler finds nothing exported as ngModel.

🌍 Your Environment

Angular Version:


Angular CLI: 9.1.5
Node: 13.1.0
OS: win32 x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.5
@angular-devkit/build-angular     0.901.5
@angular-devkit/build-optimizer   0.901.5
@angular-devkit/build-webpack     0.901.5
@angular-devkit/core              9.1.5
@angular-devkit/schematics        9.1.5
@angular/cli                      9.1.5
@ngtools/webpack                  9.1.5
@schematics/angular               9.1.5
@schematics/update                0.901.5
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:6
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

5reactions
AndreyAusianikcommented, May 28, 2020

Thanks @alxhub ! is JIT-compatible omptimization mode planned to be implemented?

1reaction
Delagencommented, May 25, 2020

Seems Terser drop moduleMetadata defined by ngtsc marked as pure

var SomeModule= /** @class */ (function() {
	function SomeModule() {
	}

	SomeModule.Ι΅mod = Ι΅ngcc0.Ι΅Ι΅defineNgModule({type: SomeModule});
	SomeModule.Ι΅inj = Ι΅ngcc0.Ι΅Ι΅defineInjector({
																  factory: function SomeModule_Factory(t) {
																	  return new (t || SomeModule)();
																  }
															  });
	(function() {
		(typeof ngJitMode === "undefined" || ngJitMode) && Ι΅ngcc0.Ι΅Ι΅setNgModuleScope(SomeModule, {
			declarations: function() {
				return [...];
			}, exports: function() {
				return [...];
			}
		});
	})();
	/*@__PURE__*/
	(function() {
		Ι΅ngcc0.Ι΅setClassMetadata(SomeModule, [
			{
				type: NgModule,
				args: [
					{
						declarations: [
							...
						],
						exports: [
							...
						]
					}
				]
			}
		], function() {
			return [];
		}, null);
	})();
	return SomeModule;
}());
export {SomeModule};

become after Terser with side_effects

var SomeModule= /** @class */ (function() {
	function SomeModule() {
	}

	SomeModule.Ι΅mod = Ι΅ngcc0.Ι΅Ι΅defineNgModule({type: SomeModule});
	SomeModule.Ι΅inj = Ι΅ngcc0.Ι΅Ι΅defineInjector({
																  factory: function SomeModule_Factory(t) {
																	  return new (t || SomeModule)();
																  }
															  });
		return SomeModule;
}());
export {SomeModule};
Read more comments on GitHub >

github_iconTop Results From Across the Web

The JIT compiler - IBM
The Just-In-Time (JIT) compiler is a component of the runtime environment that improves the performance of Java applications by compiling bytecodes toΒ ...
Read more >
Will C# compiler and optimization break this code?
No, neither the compiler, nor JIT, will optimize your method call away. There is a list of what the JIT compiler does. It...
Read more >
Tracing just-in-time compilation - Wikipedia
Tracing just-in-time compilation is a technique used by virtual machines to optimize the execution of a program at runtime. This is done by...
Read more >
DRLVM Jitrino Just-in-time Compiler - Apache Harmony
The document assumes that readers understand the concepts of just-in-time compilation and optimization algorithms.
Read more >
JIT Analyzer: On-the-fly Analysis of just-in-time Compiled ...
During compilation, the JIT compiler applies different optimizations to produce faster machine code. One of those optimizations is inling.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found