NS8+Angular12+Nativescript/Webpack5环境下，如何为Angular与Nativescript/Angular配置tsconfig.app.json和tsconfig.tns.json？

I’ve run into this exact headache when upgrading the NativeScript Webpack plugin—let’s break down how to get your project recognizing tsconfig.tns.json and loading main.tns.ts correctly without breaking the Web build.

Root Cause #

Your current config only sets up the TsconfigPathsPlugin to use tsconfig.tns.json, but the TypeScript compilation process (handled by ts-loader under the hood) is still stuck on the default tsconfig.app.json. The path plugin only resolves module aliases—it doesn’t control which tsconfig the compiler actually uses for building.

Step 1: Update Webpack Config to Override ts-loader’s tsconfig #

Modify your webpack config to explicitly tell ts-loader to use tsconfig.tns.json, alongside your existing path plugin setup:

const webpack = require('@nativescript/webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = env => {
  webpack.init(env);
  webpack.useConfig('angular');

  webpack.chainWebpack(config => {
    // Force ts-loader to use tsconfig.tns.json for compilation
    config.module.rules.get('ts').use('ts-loader').tap(options => {
      options.configFile = './tsconfig.tns.json';
      return options;
    });

    // Keep your existing path plugin config
    config.resolve.plugin('TsconfigPathsPlugin').use(
      new TsconfigPathsPlugin({
        configFile: './tsconfig.tns.json',
        logLevel: "info",
      })
    );

    // Optional: Explicitly set the entry point to main.tns.ts
    config.entry('main').clear().add('./src/main.tns.ts');
  });

  return webpack.resolveConfig();
}

Step 2: Ensure tsconfig.tns.json Includes main.tns.ts #

Double-check your tsconfig.tns.json to make sure main.tns.ts is included, and Web-specific files are excluded to avoid conflicts:

{
  "compilerOptions": {
    // Your existing NativeScript/Angular compiler options here
  },
  "files": [
    "./src/main.tns.ts",
    "./src/polyfills.tns.ts"
  ],
  "include": [
    "src/**/*.tns.ts",
    "src/**/*.tns.html",
    "src/**/*.tns.scss"
  ],
  "exclude": [
    "node_modules",
    "src/**/*.ts",
    "src/**/*.html",
    "src/**/*.scss"
  ]
}

The exclude block ensures Web-only files aren’t picked up during the NativeScript build, while include targets all your NativeScript-specific files.

Step 3: Clean Caches #

After making these changes, clear cached build artifacts to ensure the new config takes effect:

• Run ns clean to clear NativeScript’s build cache
• Delete node_modules/.cache if it exists
• Rebuild your NativeScript app with ns run android or ns run ios

This should resolve the issue where Angular was still using tsconfig.app.json for the NativeScript build, and your main.tns.ts will be properly recognized without breaking the Web build.

内容的提问来源于stack exchange，提问作者pandabuilt