Recently, I've been working on developing a DRF API integrated with an Angular front end for one of my ongoing projects. Specifically, I have created serializers for User and Device. However, during the process, I encountered an error related to StaticInjectorError(AppModule -> DevicePostService) after removing certain components from the HTML layout.
As someone relatively new to Angular, it appears that the issue stems from my devicepostservice not being properly served to the web page for some unknown reason.
Error displayed in console:
[Error] Error: Template parse errors:
Unexpected character "<" ("
<div class="col-sm-4">
<button (click)="login()" class="btn btn-primary">Log In</button
[ERROR ->]</div>
<div class="col-sm-12">
<span *ngFor="let error of _userService.errors.non_field_errors""): ng:///AppModule/AppComponent.html@15:2
Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
<div class="col-sm-4">
<button (click)="login()" class="btn btn-primary">Log In</button
[ERROR ->]</div>
<div class="col-sm-12">
<span *ngFor="let error of _userService.errors.non_field_errors""): ng:///AppModule/AppComponent.html@15:2
Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" <span *ngFor="let error of _userService.errors.non_field_errors">{{ error }}<br /></span>
</div>
[ERROR ->]</div>
<div class="row" *ngIf="_userService.token">
<div class="col-sm-12">You are logged in as {{ "): ng:///AppModule/AppComponent.html@19:0
(remaining error details omitted for brevity)
Snippet from App.component.html:
<h2>Log In</h2>
<div class="row" *ngIf="!_userService.token">
(HTML code snippet continued...)
Code excerpt from App.component.ts:
(TypeScript code snippet included...)