Angular testing: Failed to load html component

I caught this error when testing a component with templateUrl. I don't know how to fix it.

After reading a post I added TestBed.resetTestEnvironment() and TestBed.initTestEnvironment() in the test file, but it doesn't solve the problem. It seems like something is missing in the config file and the html file cannot be loaded.

Here are the karma logs:

Here is my karma.config.js file:

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'karma-typescript'],

files: [
  // Zone:
  './node_modules/zone.js/dist/zone.js', // 'Uncaught ReferenceError: Zone is not defined'
  './node_modules/zone.js/dist/proxy.js', // 'TypeError: Cannot read property 'assertPresent' of undefined'
  './node_modules/zone.js/dist/sync-test.js',
  './node_modules/zone.js/dist/async-test.js', // 'TypeError: Cannot read property 'assertPresent' of undefined'
  './node_modules/zone.js/dist/fake-async-test.js',
  './node_modules/zone.js/dist/jasmine-patch.js', // 'TypeError: Cannot read property 'assertPresent' of undefined'

  // Angular:
  './node_modules/angular/angular.js',
  './node_modules/@uirouter/angularjs/release/angular-ui-router.js',
  './node_modules/angular-mocks/angular-mocks.js',

  // ANY OTHER FILES TO LOAD FOR YOUR TESTS

  // App:
  './assets/app/app.component.ts',
  './assets/app/app.component.html',
  './assets/app/app.component.spec.ts',
],

exclude: [
  './assets/app/main.aot.ts'
],

preprocessors: {
  "**/*.ts": "karma-typescript"
},

reporters: ['spec', 'karma-typescript'],

port: 9876,

colors: true,

logLevel: config.LOG_INFO,

autoWatch: true,

browsers: ['Chrome'],

singleRun: false,

concurrency: Infinity,

mime: {
  'text/x-typescript': ['ts', 'tsx']
}})}

In the following you can find the app.component.ts file:

import { Component } from '@angular/core';
import { Constants } from './utils/constants';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styles:[
    `
        #status {
            background:#f8f9fa;
            bottom:0;
            left:0;
            margin:0;
            padding:0;
            position:fixed;
            width:100%;

          }

          #status div {
            margin:0;
            padding:5px;
            text-align:center;
            color:#c8c9ca;
          }
    `
]})
export class AppComponent {
appTitle = "App Title";
demoMode=(Constants.DEMO_MODE)?"Demo":"DefaultMode";
}

Finally, I attach the app.component.spec.ts file:

import { AppComponent } from "./app.component";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { BrowserDynamicTestingModule,
platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { Constants } from "./utils/constants";
describe('AppComponent', () => {

let component: AppComponent;
let fixture: ComponentFixture<AppComponent>;
let h1: HTMLElement;



beforeEach(() => {

    TestBed.resetTestEnvironment();
    TestBed.initTestEnvironment(BrowserDynamicTestingModule,
       platformBrowserDynamicTesting());


    TestBed.configureTestingModule({
        declarations: [AppComponent],
    })
    .compileComponents().then(()=>{
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
        h1 = fixture.nativeElement.querySelector('h1');
    }).catch((error)=>{
        console.log(error);
    });

});

it('should display original title', () => {
    expect(h1.textContent).toContain("App Title");
});

it('status bar text should correspond to the working mode', () =>{
    let text=(Constants.DEMO_MODE)?"Demo":"DefaultMode";
    expect(document.getElementById("status-text").textContent).toEqual(text);
});
});

Thanks in advance!