Random error occur after first change with --watch option

[wupaz]

#🐞 Bug report

Command (mark with an x)

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

Is this a regression? yep just before upgrade all work fine.

Description

In one of our part of application after a change and rebuild when we open a specific page we got an error. Sorry I'm not able to be more specific we try to troubleshoot but we didn't find pattern.

🔬 Minimal Reproduction

It look like #16613 but not exactly.

I try to reproduce but like is a complex part of our soft, it's not easy to scope/extract bug to a simple project.

Anything I could supply could help you ?

🔥 Exception or Error

Sometime we got ...

ReferenceError: Cannot access 'ObservationsEditorComponent' before initialization

Sometime it's this ...

Can't bind to 'ngIf' since it isn't a known property of 'div'.

🌍 Your Environment

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

Angular CLI: 10.0.1
Node: 12.18.0
OS: win32 x64

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

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1000.1
@angular-devkit/build-angular      0.1000.1
@angular-devkit/build-optimizer    0.1000.1
@angular-devkit/build-webpack      0.1000.1
@angular-devkit/core               10.0.1
@angular-devkit/schematics         10.0.1
@angular/cdk                       10.0.1
@angular/cli                       10.0.1
@angular/material                  10.0.1
@angular/material-moment-adapter   10.0.1
@ngtools/webpack                   10.0.1
@schematics/angular                10.0.1
@schematics/update                 0.1000.1
rxjs                               6.5.5
typescript                         3.9.6
webpack                            4.43.0

[alan-agius4]

@wupaz, unfortunately without a reproduction it’s hard to tell what’s happening.

[wupaz]

I discover this morning after some rebuild a finally get this

WARNING in AngularCompilerPlugin: Forked Type Checker exited unexpectedly. Falling back to type checking on main thread.

after that compile code is corrupt and app didn't start. I have to stop build et restart.

[wupaz]

It's just impossible to document repro, I add a empty div anywhere in my solution and after rebuild app crash , or give error like div and ngIf, but first build all is fine ...

--watch seem corupt build code.

[alan-agius4]

Unfortunately, without a reproduction we'll be unable to track down the issue.

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[emilianodenis]

I have the same problem.

It all started yesterday when we upgraded the project to Angular10.

The prod build is fine but the build in watch mode eventually breaks, sometimes after a few minutes, somtimes after a few hours.

It's a large project (more thant 200 components, 20 directives, 15 pipes, 50 services, around 500 classes, multi-language), it relies on a webapi backend with a sql database and has authentication. We locally build on a windows 10 machine.

I found that when the build exception happens, there are 3 components that I can remove from the app and the the build resumes fine. These 3 components have a reference to MatDialog, it's the only common thing I found about them. However, there are many other components in the app with references to MatDialog but they do not seem to have any impact on the build.

Some components may have circular references to other components (one in the 3 "problematic" component has a circular reference):
cmp1 -> cmp2 -> cmp3 -> cmp1, etc.

I tried to reproduce the problem on a smaller scale without success.

Could the problem be related to exhaust memory when building?

Again, the problem started yesterday when we upgraded to Angular 10 (no other code change).

Hoping this can help to find the problem.

[emilianodenis]

Another exception we sometimes encounter at runtime is "Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec."
We have to stop the build and then restart it.

[emilianodenis]

Still not able to pinpoint the exact problem but...

The problem seems to happen only after modifying .ts files. The build just went fine for 4 hours but I was only modifying html and scss files (each build was +- 10 seconds). But as soon as I modified a .ts file (and it was a minor change, just one line of code), the build took 35 seconds and the app generated the exception "Can't bind to 'ngIf' since it isn't a known property of 'div'"

[emilianodenis]

Another thing, not all the app is broken but just some parts (parts with the 3 "problematic" components).

I know that I will hit the problem when the compilation seems to hang after 2 or 3 seconds, the output at that moment is : "50% building 0/1 modules 1 active ...s@ngtools\webpack\src\index.js!c:\dev\fusion\Fusion\src\app\startup\app.module.ts". It then stays there for about 25 seconds before resuming.

We also have a lot of "CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies" warning, mostly linked to rxjs.

Again, this only happens in watch mode, aot is fine.

[alan-agius4]

Hi @emilianodenis, I am sorry your are experiencing this issue. However, unfortunately without a reproduction even shared privately it’s almost impossible to determine the root cause of the issue you are facing.

[wupaz]

I didn't find what cause that or encapsulate a part of code ...

Today I leave recompile(watch) running ... and I got that ...

`<--- Last few GCs --->

[15812:000001AB18294A90] 98544198 ms: Mark-sweep 1992.4 (2074.7) -> 1978.9 (2075.9) MB, 491.4 / 0.1 ms (average mu = 0.269, current mu = 0.222) allocation failure scavenge might not succeed
[15812:000001AB18294A90] 98544821 ms: Mark-sweep 1995.6 (2077.9) -> 1982.0 (2079.2) MB, 491.4 / 0.1 ms (average mu = 0.241, current mu = 0.212) allocation failure scavenge might not succeed

<--- JS stacktrace --->

==== JS stack trace =========================================

0: ExitFrame [pc: 00007FF7D6A077DD]

Security context: 0x0277dc1808d1
1: SourceNode_walk [000001F5269E2951] [C:\DevOps\Fusion\fusion\node_modules\webpack-sources\node_modules\source-map\lib\source-node.js:~221] [pc=000000B63CD8B2C5](this=0x00c20a9d9a09 ,0x003f89db3019 <JSFunction (sfi = 0000036115C8AB69)>)
2: SourceNode_walk [000001F5269E2951] [C:\DevOps\Fusion\fusion\node_modules\w...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF7D5DF470F napi_wrap+113583
2: 00007FF7D5D9F7D6 v8::base::CPU::has_sse+66646
3: 00007FF7D5DA05D6 v8::base::CPU::has_sse+70230
4: 00007FF7D65B42EE v8::Isolate::ReportExternalAllocationLimitReached+94
5: 00007FF7D659C3C1 v8::SharedArrayBuffer::Externalize+833
6: 00007FF7D646890C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436
7: 00007FF7D6473B40 v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312
8: 00007FF7D6470664 v8::internal::Heap::PageFlagsAreConsistent+3204
9: 00007FF7D6465E63 v8::internal::Heap::CollectGarbage+1283
10: 00007FF7D64644D4 v8::internal::Heap::AddRetainedMap+2452
11: 00007FF7D64856DD v8::internal::Factory::NewFillerObject+61
12: 00007FF7D61EBF61 v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+1665
13: 00007FF7D6A077DD v8::internal::SetupIsolateDelegate::SetupHeap+546637
14: 000000B63CD8B2C5
npm ERR! code ELIFECYCLE
npm ERR! errno 134`

[alan-agius4]

@wupaz, your issue seems to be different from this one.

@emilianodenis and @wupaz unfortunately without a reproduction we cannot investigate this issue any further. If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.

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