Ngx-bootstrap: Angular v9 & ngx-bootstrap v6.0.0: Failed to load

[MiguelCh24]

Bug description:

When I upgrade to v6.0.0 version with Angular v9.1.9 Library project, I've been thrown with the below error:

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: v6.0.0

Angular: v9.1.9

Bootstrap: 4.4.1

Build system: Angular CLI, System.js, webpack, starter seed: Angular CLI

Expected behavior

Build should happen without problems

NOTE: I followed some examples of implementation of version 6 (with version 5.5 this did not happen), do you have any idea what is happening and how to solve it?

[daniloff200]

Well, I've never seen such issues before.
Also, never tried to use 9.1.9, so, maybe, that's the case
Can you share some repro, on Stackblitz, or, it's better to share some repo, because, it can be a complex app problem, not only for some special module?

[jziggas]

I am seeing a similar error when running our unit tests with Angular 10.0.2, ngx-bootstrap 6.0.0, Bootstrap 3.4.1:

Chrome Headless 83.0.4103.61 (Linux x86_64): Executed 166 of 1346 SUCCESS (0 secs / 2.937 secs)
ERROR: 'Unhandled Promise rejection:', 'Failed to load popover-container.component.html', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', 'Failed to load popover-container.component.html', undefined
29 07 2020 16:27:59.064:WARN [web-server]: 404: /popover-container.component.html
29 07 2020 16:27:59.073:WARN [web-server]: 404: /popover-container.component.html
Chrome Headless 83.0.4103.61 (Linux x86_64) RedactedComponent should create FAILED
    Error: This test module uses the component PopoverContainerComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test.
        at TestBedViewEngine._initIfNeeded (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/testing.js:2363:1)
        at TestBedViewEngine.createComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/testing.js:2524:1)
        at Function.createComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/testing.js:2254:1)
        at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/redacted.ts:60:27)
        at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
        at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:292:1)
        at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:363:1)
        at Zone.run (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:123:1)
        at runInTestZone (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:545:1)
        at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:560:1)/dist/zone-evergreen.js:123:1)

Unfortunately I think our app is too big and complex to come up with some sort of StackBlitz at this time.

Might be worth noting we use ng-bullet for most of our test suite, but I get errors without it too.

I tried wrapping with fakeAsync, from:

configureTestSuite(() => {
            TestBed.configureTestingModule({

to:

configureTestSuite(
        fakeAsync(() =>
            TestBed.configureTestingModule({

and got a new error:
Failed: Cannot make XHRs from within a fake async test. Request URL: popover-container.component.html

[MiguelCh24]

Can you share some repro, on Stackblitz, or, it's better to share some repo, because, it can be a complex app problem, not only for some special module?

I have the same problem that @jziggas! The project that I'm working is too complex and private.

[DerZyklop]

I get something like @jziggas in my Storybook with
Angular @ 9.1.12
ngx-bootstrap @ 6.0.0
Storybook @ 5.3.19

Unhandled Promise rejection: Failed to load popover-container.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load popover-container.component.html undefined |
  | api.onUnhandledError | @ | zone.js:690
  | handleUnhandledRejection | @ | zone.js:713
  | _loop_1 | @ | zone.js:704
  | api.microtaskDrainDone | @ | zone.js:708
  | drainMicroTaskQueue | @ | zone.js:608
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:507
  | ZoneTask.invoke | @ | zone.js:492
  | timer | @ | zone.js:3034
  | setTimeout (async)

[DerZyklop]

The browser was looking for popover-container.component.html here:
GET http://localhost:6006/popover-container.component.html 404 (Not Found)

which is obviously wrong.

[DerZyklop]

It works with the exact same setup and ngx-bootstrap @ 5.6.1

[Sirius-A]

I have the same errors in the test of an Angular 10 (ivy disabled). If I enable ivy, everything runs fine :smile: :tada:

Here my setup, if that helps.

• Angular: 10.0.5
• ngx-bootstrap: 6.0.0

With Angular 10 I have to ensure all the component templates are compiled before using them in the tests (See line 4 below). It seems that loading the modules like this fails:

  beforeEach(async(() => TestBed.configureTestingModule({
      imports: [BsDatepickerModule.forRoot(), ReactiveFormsModule],
      declarations: [TestComponent, TranslatePipeMock]
    }).compileComponents()
  ));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    component.ngOnChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

Karma / Jasmine error:

Failed: Uncaught (in promise): Failed to load bs-datepicker-view.html

error properties: Object({ rejection: 'Failed to load bs-datepicker-view.html', promise: [object Promise], zone: Zone({ _parent: Zone({ _parent: null, _name: '<root>', _properties: Object({  }), _zoneDelegate: ZoneDelegate({ _taskCounts: Object({ microTask: 0, macroTask: 0, eventTask: 0 }), zone: <circular reference: Object>, _parentDelegate: null, _forkZS: null, _forkDlgt: null, _forkCurrZone: null, _interceptZS: null, _interceptDlgt: null, _interceptCurrZone: null, _invokeZS: null, _invokeDlgt: null, _invokeCurrZone: null, _handleErrorZS: null, _handleErrorDlgt: null, _handleErrorCurrZone: null, _scheduleTaskZS: null, _scheduleTaskDlgt: null, _scheduleTaskCurrZone: null, _invokeTaskZS: null, _invokeTaskDlgt: null, _invokeTaskCurrZone: null, _cancelTaskZS: null, _cancelTaskDlgt: null, _cancelTaskCurrZone: null, _hasTaskZS: null, _hasTaskDlgt: null, _hasTaskDlgtOwner: null, _hasTaskCurrZone: null }) }), _name: 'ProxyZone', _properties: Object({ ProxyZoneSpec: ProxyZoneSpec({ defaultSpecDelegate: null,  ...
Error: Uncaught (in promise): Failed to load bs-datepicker-view.html

[HakamFostok]

I think this should be urgent, It really prevents a lot of projects to be updated to Angular 10,
Becuase Angular 10 requires ngx-boostrap 6 and it appears that this bug is related to ngx-bootstrap 6

[dr-itz]

So the reason is that the library is shipped as Ivy-compiled. The root cause is not a change in ngx-bootstrap but a change in defaults either in ng-packagr or Angular compiler. The referenced PR fixes thing for me in library builds and also I no longer have to enable Ivy for the tests

[jziggas]

Awesome, thanks for the insight @dr-itz !

[Sirius-A]

v6.1.0 works great for us now :beers:

[valorkin]

is available in npm, but not marked as latest yet