Nativescript-angular: The Component 'xxx' is declared by more than one NgModule - code sharing errors

[plackowski]

Describe the bug
I'm working with code sharing project (angular version) and have erros like:

ERROR in src/app/start/error404/error404.component.ts:11:14 - error NG6007: The Component 'Error404Component' is declared by more than one NgModule.

11 export class Error404Component implements OnInit {
                ~~~~~~~~~~~~~~~~~

  src/app/start/start.module.tns.ts:28:34
    28   declarations: [LoginComponent, Error404Component, HomeComponent],
                                        ~~~~~~~~~~~~~~~~~
    'Error404Component' is listed in the declarations of the NgModule 'StartModule'.
  src/app/start/start.module.ts:28:34
    28   declarations: [LoginComponent, Error404Component, HomeComponent],
                                        ~~~~~~~~~~~~~~~~~
    'Error404Component' is listed in the declarations of the NgModule 'StartModule'.
src/app/start/home/home.component.tns.ts:8:14 - error NG6007: The Component 'HomeComponent' is declared by more than one NgModule.

8 export class HomeComponent {
               ~~~~~~~~~~~~~

  src/app/start/start.module.tns.ts:28:53
    28   declarations: [LoginComponent, Error404Component, HomeComponent],
                                                           ~~~~~~~~~~~~~
    'HomeComponent' is listed in the declarations of the NgModule 'StartModule'.
  src/app/start/start.module.ts:28:53
    28   declarations: [LoginComponent, Error404Component, HomeComponent],
                                                           ~~~~~~~~~~~~~
    'HomeComponent' is listed in the declarations of the NgModule 'StartModule'.
src/app/start/login/login.component.ts:19:14 - error NG6007: The Component 'LoginComponent' is declared by more than one NgModule.

19 export class LoginComponent implements OnInit, OnDestroy {
                ~~~~~~~~~~~~~~

  src/app/start/start.module.tns.ts:28:18
    28   declarations: [LoginComponent, Error404Component, HomeComponent],
                        ~~~~~~~~~~~~~~
    'LoginComponent' is listed in the declarations of the NgModule 'StartModule'.
  src/app/start/start.module.ts:28:18
    28   declarations: [LoginComponent, Error404Component, HomeComponent],
                        ~~~~~~~~~~~~~~
    'LoginComponent' is listed in the declarations of the NgModule 'StartModule'.

The errors apper:

• when I use relative import paths and app is starting.
• when I use aliases (@src/app...) and save some changes in component.ts file (not when app is starting).

StartModule- ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { SharedModule } from '../shared/shared.module';
import { Error404Component } from './error404/error404.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'login',
  },
  {
    path: 'login',
    component: LoginComponent,
  },
];

@NgModule({
  declarations: [LoginComponent, Error404Component],
  imports: [SharedModule, RouterModule.forChild(routes)],
  schemas: [NO_ERRORS_SCHEMA],
})
export class StartModule {}

StartModule - tns.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { Routes } from '@angular/router';
import { NativeScriptRouterModule } from '@nativescript/angular';

import { CommonPipesModule } from '../shared/pipes/common/common-pipes.module';
import { SharedModule } from '../shared/shared.module';
import { Error404Component } from './error404/error404.component';
import { HomeComponent } from './home/home.component.tns';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'home',
  },
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'login',
    component: LoginComponent,
  },
];

@NgModule({
  declarations: [LoginComponent, Error404Component, HomeComponent],
  imports: [SharedModule, NativeScriptRouterModule.forChild(routes), CommonPipesModule],
  schemas: [NO_ERRORS_SCHEMA],
})
export class StartModule {}

Any ideas? I'm trying to fix it since 2 days :/

Additional context
---tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
      "outDir": "./dist/out-tsc",
      "module": "ESNext",
      "target": "es2015",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "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.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"
  ]
}

--- package.json

"dependencies": {
    "@angular/animations": "~10.2.2",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "~10.2.2",
    "@angular/compiler": "~10.2.2",
    "@angular/core": "~10.2.2",
    "@angular/fire": "^6.0.4",
    "@angular/forms": "~10.2.2",
    "@angular/material": "^10.2.7",
    "@angular/platform-browser": "~10.2.2",
    "@angular/platform-browser-dynamic": "~10.2.2",
    "@angular/router": "~10.2.2",
    "@nativescript/angular": "~10.1.7",
    "@nativescript/core": "~7.0.13",
    "@nativescript/firebase": "^11.1.2",
    "@nativescript/theme": "~3.0.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "core-js": "^3.6.5",
    "firebase": "^8.0.0",
    "nativescript-gif": "^5.0.0",
    "nativescript-sound": "^1.0.4",
    "nativescript-texttospeech": "^3.0.1",
    "nativescript-toasty": "^2.0.1",
    "nativescript-toasty-ns-7": "^14.0.0",
    "nativescript-ui-chart": "^8.0.2",
    "nativescript-ui-listview": "^9.0.4",
    "nativescript-ui-sidedrawer": "9.0.3",
    "ngx-custom-validators": "^10.0.0",
    "npm-check-updates": "^9.2.4",
    "reflect-metadata": "~0.1.13",
    "rxjs": "~6.6.3",
    "tslib": "2.0.3",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.0",
    "@angular/cli": "~10.2.0",
    "@angular/compiler-cli": "~10.2.2",
    "@nativescript/android": "7.0.1",
    "@nativescript/schematics": "^10.1.0",
    "@nativescript/tslint-rules": "~0.0.5",
    "@nativescript/webpack": "~3.0.8",
    "@types/jasmine": "~3.6.1",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "^14.14.6",
    "@types/stripe-v3": "^3.1.21",
    "codelyzer": "^6.0.1",
    "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",
    "node-sass": "^4.14.1",
    "protractor": "~7.0.0",
    "ts-node": "~9.0.0",
    "tslint": "~6.1.3",
    "typescript": "~4.0.5"
  }

[miladfm]

any update?

[inlor]

@Arystosedes you should use a SharedModule to declare components only ones: solution from here

[kennethkeim]

you should use a SharedModule to declare components only ones

He is actually just declaring it in one module. This is a code sharing project and we use some-file.tns.ts and some-file.ts for the different platforms. Only one of these gets compiled.

[kennethkeim]

Anyone have any temporary fixes like telling the linter to ignore this issue until it gets fixed?? This is a super annoying bug that affects the latest and most up-to-date projects.

[kennethkeim]

Ok so I think I found a fix, but I'm not sure if it's a good long term solution.

In tsconfig.tns.json, in the paths object, remove "src/*.tns.ts" from the array.

I think you only need this if you are importing ".tns" files directly. (usually you won't have the ".tns" in your import statement)

I'm getting error-free builds.