"Error: HostResourceResolver: could not resolve" when using platform specific templates/styling

[SmailHammour]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 7.0.11-2020-11-16-175731-14298
• Cross-platform modules:
• Android Runtime: 7.0.1
• iOS Runtime: 7.0.6
• Plugin(s):
• NativeScript-Angular: 11.0.0
• Angular: 11.0.2

Describe the bug
When using platform specific templates (template.component.android.html/template.component.ios.html) an error is thrown. The code compiles but I’m seeing this in the console.

/path/to/app/acme-app/node_modules/@angular/compiler-cli/src/ngtsc/core/src/compiler.js:379
                finally { if (e_2) throw e_2.error; }
                                   ^
Error: HostResourceResolver: could not resolve ./template.component.html in context of /path/to/app/acme-app/src/app/presentation/components/template/template.component.ts)
    at AdapterResourceLoader.resolve (/path/to/app/acme-app/node_modules/@angular/compiler-cli/src/ngtsc/resource/src/loader.js:59:23)
    at ComponentDecoratorHandler.analyze (/path/to/app/acme-app/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:205:59)
    at TraitCompiler.analyzeTrait (/path/to/app/acme-app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:347:40)
    at analyze (/path/to/app/acme-app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:299:58)
    at _loop_1 (/path/to/app/acme-app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:321:21)
    at TraitCompiler.analyzeClass (/path/to/app/acme-app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:327:35)
    at visit (/path/to/app/acme-app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:109:27)
    at visitNodes (/path/to/app/acme-app/node_modules/typescript/lib/typescript.js:27037:30)
    at Object.forEachChild (/path/to/app/acme-app/node_modules/typescript/lib/typescript.js:27275:24)
    at visit (/path/to/app/acme-app/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:111:20)

To Reproduce
Use platform specific templates

import {Component} from '@angular/core';
@Component({
  selector: 'template',
  templateUrl: './template.component.html',
  styleUrls: ['./template.component.scss']
})
export class TemplateComponent {}

template.component.android.html
template.component.ios.html

Expected behavior
Error should not be thrown.

[jacopo69]

Same behavior using platform specific css: HostResourceResolver error appears in console although the code compiles correctly

[jonsabogal]

Any updates on this? Same issue here:
Error: HostResourceResolver: could not resolve ./login.component.scss in context of...

This occurs in iOS only for me (ns run ios), the result is any styles in scss file above get ignored.
On Android (ns run android) the styles are applied as expected.
I am using platform specific templates: login.component.android.scss and login.component.ios.scss
The filename in the error above is what I import inside styleUrls array in login.component.ts

Inline styling works fine for either platform

Package json:
{
"name": "@nativescript/template-tab-navigation-ng",
"main": "main.js",
"displayName": "Tabs",
"templateType": "App template",
"version": "7.0.6",
"description": "NativeScript Application",
"author": "NativeScript Team oss@nativescript.org",
"license": "SEE LICENSE IN ",
"publishConfig": {
"access": "public"
},
"keywords": [
"nstudio",
"nativescript",
"mobile",
"angular",
"{N}",
"tns",
"template",
"tab",
"navigation",
"category-general"
],
"repository": "",
"homepage": "https://github.com/NativeScript/nativescript-app-templates",
"bugs": {
"url": "https://github.com/NativeScript/NativeScript/issues"
},
"scripts": {
"lint": "tslint "src/**/*.ts""
},
"dependencies": {
"@angular/animations": "~11.0.0",
"@angular/common": "~11.0.0",
"@angular/compiler": "~11.0.0",
"@angular/core": "~11.0.0",
"@angular/forms": "~11.0.0",
"@angular/platform-browser": "~11.0.0",
"@angular/platform-browser-dynamic": "~11.0.0",
"@angular/router": "~11.0.0",
"@nativescript/angular": "~11.0.0",
"@nativescript/camera": "^5.0.8",
"@nativescript/core": "~7.1.0",
"@nativescript/firebase": "^11.1.3",
"@nativescript/theme": "~2.3.0",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.6.0",
"zone.js": "~0.11.1"
},
"devDependencies": {
"@angular/compiler-cli": "~11.0.0",
"@nativescript/android": "7.0.1",
"@nativescript/ios": "7.1.1",
"@nativescript/webpack": "~4.0.0",
"@ngtools/webpack": "~11.0.0",
"codelyzer": "~6.0.0",
"node-sass": "^4.14.1",
"tslint": "~6.1.3",
"typescript": "~4.0.0"
},
"private": "true",
"readme": "NativeScript Application"
}