Error: Can't resolve '@nativescript/angular/http-client/http-utils'

[pradumnk-mahanta]

It is actually very confusing at the moment. I have been stuck on this for the past 2 days. After a lot of search I couldn't reach a conclusion and hence this post.

I upgraded my project to NS 7 + Angular 10. I had to fix a lot of private declarations and imports and once everything was complete. I did ns build ios But then I got the following error error

ERROR in src/app/shared/ssl-pinning-module/xhr.backend.ts:11:10 - error TS2305: Module '"../../../../node_modules/@nativescript/angular/nativescript-angular"' has no exported member 'isLocalRequest'.

11 import { isLocalRequest, processLocalFileRequest } from '@nativescript/angular';
            ~~~~~~~~~~~~~~
src/app/shared/ssl-pinning-module/xhr.backend.ts:11:26 - error TS2305: Module '"../../../../node_modules/@nativescript/angular/nativescript-angular"' has no exported member 'processLocalFileRequest'.

11 import { isLocalRequest, processLocalFileRequest } from '@nativescript/angular';

So, instead of the flattened import I used the full import,

import { isLocalRequest, processLocalFileRequest } from '@nativescript/angular/http-client/http-utils';

Once I did this, I started receiving the following errors,

ERROR in ./app/shared/ssl-pinning-module/xhr.backend.ts
Module not found: Error: Can't resolve '@nativescript/angular/http-client/http-utils' 
in '<Project Path>/src/app/shared/ssl-pinning-module'
 @ ./app/shared/ssl-pinning-module/xhr.backend.ts 5:0-103 23:12-26 60:15-38
 @ ./app/shared/ssl-pinning-module/ssl-pinning.module.ts
 @ ./app/shared/ssl-pinning-module/index.ts
 @ ./app/app.module.ts
 @ ./main.ts

ERROR in ./app/shared/data-services/login.service.ts
Module not found: Error: Can't resolve '@nstudio/root-detection' 
in '<Project Path>/src/app/shared/data-services'
 @ ./app/shared/data-services/login.service.ts 7:0-56 22:35-48
 @ ./app/app.module.ts
 @ ./main.ts

ERROR in ./app/home/tabhome/details/details.component.ts
Module not found: Error: Can't resolve 'nativescript-modal-datetimepicker' 
in '<Project Path>src/app/home/tabhome/details'
 @ ./app/home/tabhome/details/details.component.ts 13:0-65 361:27-58
 @ ./app/home/tabhome/details/details.module.ts
 @ ./app/app-routing.module.ts
 @ ./app/app.module.ts
 @ ./main.ts

I can understand that something might be wrong with my implementation of import of @nativescript/angular but @nstudio/root-detection and nativescript-modal-datetimepicker should have been working as they are both NS7 Compatible.

When I checked the node modules folder of these plugin I found out that the *.platform.js and *.platform.d.ts files were missing.

Once I do, ns plugin remove nativescript-modal-datetimepicker and then ns plugin add nativescript-modal-datetimepicker

The error for nativescript-modal-datetimepicker would go away as the js files were loaded this time.

But once I do ns clean and then build again, I am back to square one.

Any feedback on what I might be doing wrong with the angular imports and the plugins install would be helpful. Thank you for your support.

Following are my configurations,

NS CLI: 7.0.11 NS IOS: 7.0.4 NODE: 10.22.0 NPM: 6.14.6

Package JSON,

"dependencies": {
        "@angular/animations": "~10.1.0",
        "@angular/common": "~10.1.0",
        "@angular/compiler": "~10.1.0",
        "@angular/core": "~10.1.0",
        "@angular/forms": "~10.1.0",
        "@angular/platform-browser": "~10.1.0",
        "@angular/platform-browser-dynamic": "~10.1.0",
        "@angular/router": "~10.1.0",
        "@nativescript/angular": "~10.1.0",
        "@nativescript/core": "~7.0.0",
        "@nativescript/email": "^2.0.0",
        "@nativescript/fingerprint-auth": "^7.0.0",
        "@nativescript/firebase": "^11.0.0",
        "@nativescript/geolocation": "^7.0.0",
        "@nativescript/iqkeyboardmanager": "^2.0.0",
        "@nativescript/secure-storage": "^3.0.0",
        "@nativescript/theme": "~3.0.0",
        "@nstudio/nativescript-https": "^3.0.1",
        "@nstudio/nativescript-loading-indicator": "^4.0.0",
        "@nstudio/root-detection": "^2.0.1",
        "nativescript-carousel": "^7.0.1",
        "nativescript-fancyalert": "^3.0.9",
        "nativescript-modal-datetimepicker": "^2.0.1",
        "nativescript-phone": "^2.0.0",
        "nativescript-ripple": "^4.0.1",
        "nativescript-ui-listview": "^9.0.4",
        "reflect-metadata": "~0.1.12",
        "rxjs": "^6.6.0",
        "zone.js": "~0.11.1"
    },
    "devDependencies": {
        "@angular/compiler-cli": "~10.1.0",
        "@nativescript/ios": "7.0.4",
        "@nativescript/types": "~7.0.0",
        "@nativescript/webpack": "~3.0.0",
        "@ngtools/webpack": "~10.1.0",
        "codelyzer": "~6.0.0",
        "node-sass": "^4.14.1",
        "tslint": "~6.1.3",
        "typescript": "~4.0.0"
    },