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 · Accepted Answer · 2021-02-07 16:18:47Z

1

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"
  ]
}

answered Feb 7, 2021 at 16:18

Justin

18.3k39 gold badges140 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sergey Mell Over a year ago

You're good! Did you use Nativescript hybrid mode or just set up all this manually?

Justin Over a year ago

I'm using nativescript-schematics to accomplish the code sharing between Angular and NativeScript. You can read more about it here: docs.nativescript.org/code-sharing/intro

Collectives™ on Stack Overflow

How to configure Angular + NativeScript code sharing correctly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related