I've looked at dozens of posts here and elsewhere with the same error message, plus the entire modules FAQ, but still haven't found a solution that works in my case. (E.g., questions 35543028, 35939950, 40426432, 40828068, 44898901, 45436552, 47660922, 50200329, 59212318...) They pointed out these things to check:
So I don't know what else might be doing this. My best guess at the moment is that the service maybe needs to provide CommonModule somehow. I tried creating a feature module for that but I took it back out when it didn't seem to help.
Problem.dialog.html:
...
<div *ngIf="data.technicalDetails">
<h2>Technical details</h2>
<p>{{data.technicalDetails}}</p>
</div>
...
Problem.service.ts:
export interface Result
{
...
technicalDetails: string;
};
@Component({
selector: 'problem-dialog',
templateUrl: 'problem.dialog.html'
})
export class ProblemDialog
{
constructor(
public dialogRef: MatDialogRef<ProblemDialog>,
@Inject(MAT_DIALOG_DATA) public data: Result) { }
}
@Injectable()
export class ProblemService implements NextObserver<Result>, ErrorObserver<Result>, OnDestroy
{
...
public next(result: Result): void
{
...
this.dialog.open(ProblemDialog, { data: result });
}
}
new-db.component.ts:
...
@Component({
selector: 'app-new-db',
templateUrl: './new-db.component.html',
styleUrls: ['./new-db.component.scss']
})
export class NewDbComponent
{
constructor(
private fb: FormBuilder,
private http: HttpClient,
private problemService: ProblemService,
@Inject('BASE_URL') private baseUrl: string)
{ }
...
onSubmit()
{
...
this.http.post<Result>(this.baseUrl + 'api/databases/create', proto)
.subscribe(this.problemService);
}
}
app.module.ts:
...
import { CommonModule } from "@angular/common";
import { BrowserModule } from '@angular/platform-browser';
import { ProblemService } from './problem/problem.service';
@NgModule({
declarations: [
...
NewDbComponent
],
imports: [
...
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
CommonModule,
],
providers: [
ProblemService
],
bootstrap: [AppComponent]
})
export class AppModule
...
Angular CLI 9.1.4, Node 12.14.0, OS win32 x64, Angular 9.1.4. The project builds and runs fine otherwise.
You also have ProblemDialog component in your code and you have not declared in app module, You can declare it like this:
...
import { CommonModule } from "@angular/common";
import { BrowserModule } from '@angular/platform-browser';
import { ProblemService } from './problem/problem.service';
@NgModule({
declarations: [
...
NewDbComponent,
ProblemDialog //add this
],
imports: [
...
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
CommonModule,
],
providers: [
ProblemService
],
entryComponents: [
...
ProblemDialog //add this
]
bootstrap: [AppComponent]
})
export class AppModule
...