Nativescript 'Image' is not a known element

Question

I'm updating my nativescript app into Nativescript 7 and the latest version of Angular (11). And after changing a lot of imports, I am getting some weird errors that I can't seem to figure out.

src/app/app.component.html:70:29 - error NG8001: 'Image' is not a known element:
1. If 'Image' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

I have already added NO_ERRORS_SCHEMA into my NgModule.schemas section in my app.module.ts, but still no avail. Any suggestions or help would be much appreciated.

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
...
@NgModule({
declarations: [...],
imports: [...],
providers: [...],
bootstrap: [AppComponent],
schemas: [NO_ERRORS_SCHEMA]
})

package.json

"dependencies": {
        "@angular/animations": "~11.0.2",
        "@angular/cdk": "^11.0.1",
        "@angular/common": "~11.0.2",
        "@angular/compiler": "~11.0.2",
        "@angular/core": "~11.0.2",
        "@angular/forms": "~11.0.2",
        "@angular/material": "^11.0.1",
        "@angular/platform-browser": "~11.0.2",
        "@angular/platform-browser-dynamic": "~11.0.2",
        "@angular/router": "~11.0.2",
        "@nativescript-community/ble": "^3.0.12",
        "@nativescript/core": "7.0.13",
        "@nativescript/angular": "11.0.0",
        "@sentry/node": "^5.27.6",
        "bluebird": "3.7.2",
        "core-js": "^3.8.0",
        "crypto-js": "^4.0.0",
        "hammerjs": "^2.0.8",
        "nativescript-angular-cli": "^0.1.9",
        "nativescript-camera": "^4.5.0",
        "nativescript-imagepicker": "^7.1.0",
        "nativescript-insomnia": "^2.0.0",
        "nativescript-purchase": "^2.0.14",
        "nativescript-sentry": "^2.0.0",
        "nativescript-theme-core": "~2.0.24",
        "nativescript-toasty": "^3.0.0-alpha.2",
        "nativescript-ui-chart": "8.0.2",
        "nativescript-ui-gauge": "7.0.2",
        "nativescript-ui-sidedrawer": "9.0.3",
        "nativescript-urlhandler": "^1.3.0",
        "reflect-metadata": "~0.1.13",
        "rxjs": "~6.6.3",
        "tslib": "^2.0.3",
        "zone.js": "~0.11.3",
        "@nativescript/webpack": "3.0.8"
    },
"devDependencies": {
        "@angular-devkit/build-angular": "^0.1100.2",
        "@angular/cli": "~11.0.2",
        "@angular/compiler-cli": "^11.0.2",
        "@angular/language-service": "~11.0.2",
        "@nativescript/ios": "7.0.6",
        "@nativescript/schematics": "~10.1.0",
        "@ngtools/webpack": "^11.0.2",
        "@types/jasmine": "~3.6.2",
        "@types/jasminewd2": "~2.0.8",
        "@types/node": "~14.14.10",
        "codelyzer": "^6.0.1",
        "extract-text-webpack-plugin": "~3.0.2",
        "jasmine-core": "~3.6.0",
        "jasmine-spec-reporter": "~6.0.0",
        "karma": "~5.2.3",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~3.0.3",
        "karma-jasmine": "~4.0.1",
        "karma-jasmine-html-reporter": "^1.5.4",
        "nativescript-dev-typescript": "^0.10.0",
        "ng-packagr": "^11.0.3",
        "node-sass": "^5.0.0",
        "protractor": "~7.0.0",
        "tns-android": "6.5.3",
        "ts-node": "~9.0.0",
        "tslint": "~5.20.1",
        "typescript": "~4.0.2",
        "uglifyjs-webpack-plugin": "^2.2.0"
}

Here is my app.module.ts NgModule in more detail but with specific names of component hidden due to privacy.

@NgModule({
    declarations: [
        AppComponent,
        LoginComponent,
        ...Component,
        ...Component,
        LoadingComponent,
        ...Component,
        ImageUploaderComponent,
        AdminsComponent,
        UserProfileComponent,
        PasswordResetComponent,
        ForgotPasswordComponent
    ],
    imports: [
        BrowserModule,
        WebMaterialModule,
        MatGridListModule,
        MatSlideToggleModule,
        ComponentsModule,
        HttpClientModule,
        FormsModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        ErrorHandlerModule
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: HttpLoadingInterceptor, multi: true },
        HttpService,
        AppUserStorageService,
        WorkoutDetailService,
        WorkoutHeaderService,
        DocumentService,
        UserService,
        AuthGuardService,
        SentryConfigService,
        LoadingScreenService
    ],
    bootstrap: [AppComponent],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

This is what my app.module.tns.ts looks like

...

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        SentryModule.forRoot({ dsn: environment.sentryDSN }),
        NativeScriptModule,
        NativeScriptUIChartModule,
        NativeScriptUISideDrawerModule,
        NativeScriptUIGaugeModule,
        AppSharedComponentsModule,
        ComponentsModule, // This has an import to CommonModule
        HttpClientModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        DatePickerComponent,
        DialogComponent,
        AndroidRedirectComponent
    ],
    entryComponents: [
        DialogComponent,
        DatePickerComponent,
        AndroidRedirectComponent,
        ...Component,
        ...Component,
        ...Component,
        ...Component,
        ...Component,
        ...Component,
        ...Component
    ],
    providers: [
        HttpService,
        AppUserStorageService,
        DocumentService,
        UserService,
        ...Provider,
        SentryConfigService,
        NotificationApiService,
        NotificationService,
        VPPViewModelService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }