How to configure Angular + NativeScript code sharing correctly

Question

I'm trying to set up a new Angular + NativeScript code sharing project, so that I can have one app that runs on Android, iOS, and web.

In my tsconfig.json (which I believe is meant to be used for web) I have the following:

"paths": {
          "@src/*": [
              "src/*.web.ts",
              "src/*.ts",
          ]
      }

In my tsconfig.tns.json (which should only be used for mobile) I have the following:

"paths": {
      "@src/*": [
        "src/*.android.ts",
        "src/*.ios.ts",
        "src/*.tns.ts",
        //"src/*.ts",
      ],

Note that I commented out the src/*.ts path in tsconfig.tns.json. With this configuration, when I execute "tns run ios" I get errors such as:

Cannot find module '@src/app/components/login/login.component' or its corresponding type declarations.

In this case, login.component is a .ts file that I want to be shared between web and mobile. I reference it like so:

import { LoginComponent } from '@src/app/components/login/login.component';

So it looks like .ts files can't be handled, only tns.ts files can, when I comment out the src/*.ts path. If I uncomment it so that tsconfig.tns.json is handling .ts files, then I get new errors such as:

The Component 'LoginComponent' is declared by more than one NgModule.

And indeed it is declared in two NgModules, app.module.ts and app.module.tns.ts. However, I was expecting that only app.module.tns.ts would be included, as I'm running for mobile.

app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    ...components
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  //schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

app.module.tns.ts:

@NgModule({
  declarations: [
    AppComponent,
    ...components
  ],
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpClientModule,
    NativeScriptUIListViewModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

So why is the web app.module.ts being included too, resulting in this multiple declarations of a component error? Even if I don't declare these components in app.module.tns.ts and only declare them in app.module.ts, then I start getting errors about unknown elements:

'FlexboxLayout' is not a known element

Even if I add schemas: [NO_ERRORS_SCHEMA] to app.module.ts then I still get the unknown elements errors.

I'm quite far down this rabbit hole now, which is discouraging because all I've done is try to run the basic Angular + NativeScript code sharing template and I expected things to work out of the box. What configuration am I missing that will get me up and running? Or is Angular + NativeScript code sharing obsolete these days and devs are using other platforms like Xamarin Forms and Flutter now?

Justin Justin · Accepted Answer · 2021-02-07T16:18:47

I was able to resolve this with the following configs...

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
      "outDir": "./dist/out-tsc",
      "module": "esnext",
      "target": "es2017",
      "moduleResolution": "node",
      "sourceMap": true,
      //"declaration": false,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      //"noEmitHelpers": false,
      "noEmitOnError": true,
      "skipLibCheck": true,
      "lib": [
          "es2017",
          "dom",
          "es6"
      ],
      "baseUrl": ".",
      "paths": {
          "@src/*": [
              "src/*.android.ts",
              "src/*.ios.ts",
              "src/*.tns.ts",
              "src/*.web.ts",
              "src/*.ts"
          ]
      }
  }
}

tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "module": "esnext",
    "types": [],
    "paths": {
      "@src/*": [
        "src/*.web",
        "src/*"
      ]
    }
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ]
}

tsconfig.tns.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@src/*": [
        "src/*.tns.ts",
        "src/*.ts"
      ]
    }
  },
  "files": [
    "src/main.tns.ts"
  ]
}

How to configure Angular + NativeScript code sharing correctly

1 Answers