Angular 如何配置角度+；NativeScript代码共享是否正确

我正在尝试建立一个新的Angular+NativeScript代码共享项目，这样我就可以有一个在Android、iOS和web上运行的应用程序

在我的tsconfig.json（我相信是用于web的）中，我有以下内容：

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

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

在我的tsconfig.tns.json（应该只用于移动设备）中，我有以下内容：

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

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

注意，我注释掉了tsconfig.tns.json中的src/*.ts路径。使用此配置，当我执行“tns run ios”时，会出现以下错误：

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

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

在本例中，login.component是一个.ts文件，我希望在web和mobile之间共享该文件。我这样说：

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

因此，当我注释掉src/*.ts路径时，似乎无法处理.ts文件，只有tns.ts文件可以。如果我取消对它的注释，以便tsconfig.tns.json处理.ts文件，则会出现新的错误，例如：

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

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

事实上，它是在两个NgModules中声明的，app.module.ts和app.module.tns.ts。不过，我本来以为只会包括app.module.tns.ts，因为我正在为手机跑步

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 { }

那么，为什么web app.module.ts也被包括在内，从而导致一个组件错误的多个声明呢？即使我没有在app.module.tns.ts中声明这些组件，而只在app.module.ts中声明它们，我也会开始收到有关未知元素的错误：

'FlexboxLayout' is not a known element

即使我向app.module.ts添加模式：[NO_ERRORS_SCHEMA]，我仍然会得到未知元素错误

---

我现在离兔子洞太远了，这让我很沮丧，因为我所做的只是尝试运行基本的Angular+NativeScript代码共享模板，我希望一切都能开箱即用。我缺少什么配置可以让我启动并运行？还是Angular+NativeScript代码共享现在已经过时，开发人员现在正在使用其他平台，如Xamarin Forms和Flatter？

我可以通过以下配置解决这个问题

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

---

你很好！您是使用Nativescript混合模式还是手动设置的？我使用Nativescript示意图来完成Angular和Nativescript之间的代码共享。您可以在此处阅读更多信息：