After updating my Angular application from version 5 to version 9, I encountered an error when trying to run it. The error can be seen in the following link: Error Screenshot
Below are the details of my code:
app.module.ts
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
app.component.ts
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
}
}
app.component.html
<app-header>
</app-header>
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../../node_modules/jqueryui/jquery-ui.js"></script>
<div id="circle">
<div class="loader">
<div class="loader">
<div class="loader">
</div>
</div>
</div>
</div>
<div id="container">
<div id="test1" class="test1"></div>
</div>
app.header.component.ts
import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-header',
templateUrl: './header.component.html'
})
export class HeaderComponent implements OnInit {
constructor(private sanitizer: DomSanitizer) {
}
ngOnInit() {
}
}
Note :
- I have not defined any extra module for headers
- The header component is declared in the 'declaration' section of app.module.ts file.
- The application was functioning properly until the upgrade to version 8. The error started occurring after migrating to version 9.