FormGroup causes an error in compile that makes no sense

So, I have a form that works great. But, I'm building another one and the VERY SAME BASE code is throwing this error:

Compiled with problems:X

ERROR in ./src/app/components/form-21a/form-21a.component.ts 3:0-57

Module not found: Error: Resolving to directories is not possible with the exports field (request was ./)

This ONLY occurs when I do this...

    this.form21a = new FormGroup({
      firstname: new FormControl('')
    }, { updateOn: "blur" });

this.form21a is declared like so

  // Form Group Initalization
  vaform21!: FormGroup;

This is crazy as I'm doing the exact same thing with form21 in another component. The Code is SOUND.

When I remove

    this.form21a = new FormGroup({
      firstname: new FormControl('')
    }, { updateOn: "blur" });

The above error goes away.

here's my HTML

                      <div class="row">
                        <div class="col-md-3 colNameOffset">
                          <label for="lastname" class="labels labelOverride">{{enumProps.LASTNAME}}</label>
                          <input #lastName type="text" id="lastname" class="form-control" name="lastname"
                            data-title="Last Name" required formControlName="lastname" placeholder="Last Name"
                            maxlength="75" (blur)="blurEventMethod($event)"
                            [ngClass]="{ 'is-invalid': ontabout && f['lastname'].errors }" />
                          <div *ngIf="submitted || f['lastname'].errors" class="required requiredAdjustA">
                            <span class="text-danger required">{{getErrorMessage('lastname', 'Last Name ')}}</span>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <label for="firstname" class="labels labelOverride">{{enumProps.FIRSTNAME}}</label>
                        <input #firstname type="text" id="firstname" class="form-control" name="firstname"
                          data-title="First Name" required formControlName="firstname" placeholder="First Name"
                          maxlength="35" (blur)="blurEventMethod($event)"
                          [ngClass]="{ 'is-invalid': ontabout && f['firstname'].errors }" />
                        <div *ngIf="submitted || f['firstname'].errors" class="required requiredAdjustA">
                          <span class="text-danger required">{{getErrorMessage('firstname', 'First Name ')}}</span>
                        </div>
                      </div>

Here's how I declare the form

<form id="form21a" ngForm #Form21a [formGroup]="form21a (ngSubmit)="submitForm(form21a, $event)">

This is the EXACT same set up for form21.

in the DEV console I'm getting this...

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

      Example:

      
  <div [formGroup]="myGroup">
    <input formControlName="firstName">
  </div>

  In your class:

  this.myGroup = new FormGroup({
      firstName: new FormControl()
  });

What is NOT happening is that form21a is UNDEFINED. For some reason, this is working great in form21. It's the same exact code. this.form21a is undefined when I put my mouse over it in the debug console but yet, form21a: FormGroup; is at the VERY TOP under the export line in the code.

NOTE: Even doing this:

  // Form Group Initalization
  Form21A: FormGroup = new FormGroup({
    firstname: new FormControl(''),
    lastname: new FormControl('')
  });

Changing the cases of the form21a to Form21A still causes the above error...

Removing FORMGROUP, it compiles fine.

What is the problem?

UPDATE: Component File Imports

import { HttpHeaders } from '@angular/common/http';
import { AfterViewInit, Component, ElementRef, EventEmitter, Inject, Input, NgZone, OnInit, Output, Renderer2, ViewChild } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, NgForm, Validators } from '@angular/forms/';
import { Router } from '@angular/router';
import { Form21elementService } from 'src/app/services/Form21.element.service';
import { DischargeTypes, ServiceBranch, Suffixes, VaForm21FieldsInstLabels } from '../form-21/Form21.enum';
import { Form21aFieldsInstLabels } from './Form21a.enum';
import * as data from 'src/assets/json/disclaimers.json';
import * as orgs from 'src/assets/json/orgs.json';
import * as agnt from 'src/assets/json/agents.json';
import * as epts from 'src/assets/json/dept.json';
import { DOCUMENT } from '@angular/common';
import { of } from 'rxjs';
import { CrudService } from 'src/app/service/crud.service';
import { Regx } from 'src/app/enums-interfaces/regx';
import _ from 'lodash';
import { SignaturePad } from 'angular2-signaturepad';
import { PhoneNumberInputFormatService } from 'src/app/services/phone-number-import-format.service';
import { APIS } from 'src/environments/env-service.service';
import { CommonSvcsService } from 'src/app/services/common-svcs.service';
import { SessionStorageService } from 'angular-web-storage';
import { ModalService } from 'src/app/services/modal.service';
import { Form21Fields, Form21Section2 } from 'src/app/components/form-21/Form21.interface';

I'm sharing common stuff between form21a and form21.

OMG I think I just found it! import { VaForm21aFieldsInstLabels } from './Form21a.enum';

Has that ./ Darn, let me fix and give it another try

That didn't fix it but the only thing let is:

@Component({
  selector: 'app-form-21a',
  templateUrl: './form-21a.component.html',
  styleUrls: ['./form-21a.component.scss']
})

You can't fully qualify those as it errors out and says, can't find template or scss