Angular 升级到NS 7和NS 10后发现@import循环生成失败

我有下面的配置

• CLI:7.0.10
• 跨平台模块：7.0.11
• Android运行时：7.0.0
• iOS运行时：7.0.1
• NativeScript角度：10.0.3
• 角度：10.1.6

---

我已通过tns迁移从NS 6.5升级到NS 7

我已经通过ng更新从角度8升级到角度9再升级到角度10

升级后，生成失败，出现以下错误

ERROR in Module build failed (from ../node_modules/sass-loader/dist/cjs.js):
SassError: An @import loop has been found:
           src/app/+setup/init/init.component.scss imports src/app/+setup/init/init.component.scss
        on line 1 of src/app/+setup/init/init.component.scss
>> @import "../../../assets/styles/variables";

   ^

Executing webpack failed with exit code 2.

在对问题进行故障排除之后，我发现这个问题是由特定于平台的样式造成的

我有

• init.component.scss

• init.component.android.scss

  （导入init.component.scss）

• init.component.ios.scss

  （导入init.component.scss）

在我的组件中，我有

styleURL:['./init.component.scss']

从两个特定于平台的scss文件中删除导入的

init.component.scss

后，生成过程通过

下面是由cli生成的webpack.config.js

webpack.config.js

const {join, relative, resolve, sep, dirname} = require('path');
const fs = require('fs');

const webpack = require('webpack');
const nsWebpack = require('@nativescript/webpack');
const nativescriptTarget = require('@nativescript/webpack/nativescript-target');
const {
  nsSupportHmrNg
} = require('@nativescript/webpack/transformers/ns-support-hmr-ng');
const {nsTransformNativeClassesNg} = require("@nativescript/webpack/transformers/ns-transform-native-classes-ng");
const {
  getMainModulePath
} = require('@nativescript/webpack/utils/ast-utils');
const {getNoEmitOnErrorFromTSConfig, getCompilerOptionsFromTSConfig} = require("@nativescript/webpack/utils/tsconfig-utils");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
const {
  NativeScriptWorkerPlugin
} = require('nativescript-worker-loader/NativeScriptWorkerPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const {
  getAngularCompilerPlugin
} = require('@nativescript/webpack/plugins/NativeScriptAngularCompilerPlugin');
const hashSalt = Date.now().toString();

module.exports = env => {
  // Add your custom Activities, Services and other Android app components here.
  const appComponents = [
    "@nativescript/core/ui/frame", "@nativescript/core/ui/frame/activity"
  ];

  const platform = env && ((env.android && 'android') || (env.ios && 'ios'));
  if (!platform) {
    throw new Error('You need to provide a target platform!');
  }

  const targetEnv = env && (env.prod && "prod" || env.stg && "stg");

  const AngularCompilerPlugin = getAngularCompilerPlugin(platform);
  const projectRoot = __dirname;

  // Default destination inside platforms/<platform>/...
  const dist = resolve(
      projectRoot,
      nsWebpack.getAppPath(platform, projectRoot)
  );

  const {
    // The 'appPath' and 'appResourcesPath' values are fetched from
    // the nsconfig.json configuration file
    // when bundling with `tns run android|ios --bundle`.
    appPath = 'src',
    appResourcesPath = 'App_Resources',

    // You can provide the following flags when running 'tns run android|ios'
    snapshot, // --env.snapshot,
    production, // --env.production
    uglify, // --env.uglify
    report, // --env.report
    sourceMap, // --env.sourceMap
    hiddenSourceMap, // --env.hiddenSourceMap
    hmr, // --env.hmr,
    unitTesting, // --env.unitTesting
    testing, // --env.testing
    verbose, // --env.verbose
    ci, // --env.ci
    snapshotInDocker, // --env.snapshotInDocker
    skipSnapshotTools, // --env.skipSnapshotTools
    compileSnapshot // --env.compileSnapshot
  } = env;

  const useLibs = compileSnapshot;
  const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
  const externals = nsWebpack.getConvertedExternals(env.externals);
  const appFullPath = resolve(projectRoot, appPath);
  const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
  let tsConfigName = 'tsconfig.json';
  let tsConfigTnsName = 'tsconfig.tns.json';
  let tsConfigPath = resolve(projectRoot, tsConfigName);
  const tsConfigTnsPath = resolve(projectRoot, tsConfigTnsName);
  if (fs.existsSync(tsConfigTnsPath)) {
    // still support shared angular app configurations 
    tsConfigName = tsConfigTnsName;
    tsConfigPath = tsConfigTnsPath;
  }
  const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`;
  const entryPath = `.${sep}${entryModule}`;
  const entries = {bundle: entryPath};
  const areCoreModulesExternal =
      Array.isArray(env.externals) &&
      env.externals.some(e => e.indexOf('@nativescript') > -1);
  if (platform === 'ios' && !areCoreModulesExternal && !testing) {
    entries['tns_modules/@nativescript/core/inspector_modules'] =
        'inspector_modules';
  }

  const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath);
  nsWebpack.processTsPathsForScopedModules({compilerOptions});
  nsWebpack.processTsPathsForScopedAngular({compilerOptions});

  const ngCompilerTransformers = [nsTransformNativeClassesNg];
  const additionalLazyModuleResources = [];

  const copyIgnore = {ignore: [`${relative(appPath, appResourcesFullPath)}/**`]};
  const copyTargets = [
    {from: 'assets/**', noErrorOnMissing: true, globOptions: {dot: false, ...copyIgnore}},
    {from: 'fonts/**', noErrorOnMissing: true, globOptions: {dot: false, ...copyIgnore}},
  ];

  if (!production) {
    // for development purposes only
    // for example, include mock json folder
    // copyTargets.push({ from: 'tools/mockdata', to: 'assets/mockdata' });

    if (hmr) {
      ngCompilerTransformers.push(nsSupportHmrNg);
    }
  }

  // when "@angular/core" is external, it's not included in the bundles. In this way, it will be used
  // directly from node_modules and the Angular modules loader won't be able to resolve the lazy routes
  // fixes https://github.com/NativeScript/nativescript-cli/issues/4024
  if (env.externals && env.externals.indexOf('@angular/core') > -1) {
    const appModuleRelativePath = getMainModulePath(
        resolve(appFullPath, entryModule),
        tsConfigName
    );
    if (appModuleRelativePath) {
      const appModuleFolderPath = dirname(
          resolve(appFullPath, appModuleRelativePath)
      );
      // include the new lazy loader path in the allowed ones
      additionalLazyModuleResources.push(appModuleFolderPath);
    }
  }

  const ngCompilerPlugin = new AngularCompilerPlugin({
    hostReplacementPaths: nsWebpack.getResolver([platform, 'tns']),
    platformTransformers: ngCompilerTransformers.map(t =>
        t(() => ngCompilerPlugin, resolve(appFullPath, entryModule), projectRoot)
    ),
    mainPath: join(appFullPath, entryModule),
    tsConfigPath,
    skipCodeGeneration: false,
    sourceMap: !!isAnySourceMapEnabled,
    additionalLazyModuleResources: additionalLazyModuleResources,
    compilerOptions: {paths: compilerOptions.paths}
  });

  let sourceMapFilename = nsWebpack.getSourceMapFilename(
      hiddenSourceMap,
      __dirname,
      dist
  );

  const itemsToClean = [`${dist}/**/*`];
  if (platform === 'android') {
    itemsToClean.push(
        `${join(
            projectRoot,
            'platforms',
            'android',
            'app',
            'src',
            'main',
            'assets',
            'snapshots'
        )}`
    );
    itemsToClean.push(
        `${join(
            projectRoot,
            'platforms',
            'android',
            'app',
            'build',
            'configurations',
            'nativescript-android-snapshot'
        )}`
    );
  }

  const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(tsConfigName);

  nsWebpack.processAppComponents(appComponents, platform);
  const config = {
    mode: production ? 'production' : 'development',
    context: appFullPath,
    externals,
    watchOptions: {
      ignored: [
        appResourcesFullPath,
        // Don't watch hidden files
        '**/.*'
      ]
    },
    target: nativescriptTarget,
    entry: entries,
    output: {
      pathinfo: false,
      path: dist,
      sourceMapFilename,
      libraryTarget: 'commonjs2',
      filename: '[name].js',
      globalObject: 'global',
      hashSalt
    },
    resolve: {
      extensions: ['.ts', '.js', '.scss', '.css'],
      // Resolve {N} system modules from @nativescript/core
      modules: [
        resolve(__dirname, 'node_modules/@nativescript/core'),
        resolve(__dirname, 'node_modules'),
        'node_modules/@nativescript/core',
        'node_modules'
      ],
      alias: {
        '~/package.json': resolve(projectRoot, 'package.json'),
        '~': appFullPath,
        "tns-core-modules": "@nativescript/core",
        "nativescript-angular": "@nativescript/angular"
      },
      symlinks: true
    },
    resolveLoader: {
      symlinks: false
    },
    node: {
      // Disable node shims that conflict with NativeScript
      http: false,
      timers: false,
      setImmediate: false,
      fs: 'empty',
      __dirname: false
    },
    devtool: hiddenSourceMap
        ? 'hidden-source-map'
        : sourceMap
            ? 'inline-source-map'
            : 'none',
    optimization: {
      runtimeChunk: 'single',
      noEmitOnErrors: noEmitOnErrorFromTSConfig,
      splitChunks: {
        cacheGroups: {
          vendor: {
            name: 'vendor',
            chunks: 'all',
            test: (module, chunks) => {
              const moduleName = module.nameForCondition
                  ? module.nameForCondition()
                  : '';
              return (
                  /[\\/]node_modules[\\/]/.test(moduleName) ||
                  appComponents.some(comp => comp === moduleName)
              );
            },
            enforce: true
          }
        }
      },
      minimize: !!uglify,
      minimizer: [
        new TerserPlugin({
          parallel: true,
          cache: !ci,
          sourceMap: isAnySourceMapEnabled,
          terserOptions: {
            output: {
              comments: false,
              semicolons: !isAnySourceMapEnabled
            },
            compress: {
              // The Android SBG has problems parsing the output
              // when these options are enabled
              collapse_vars: platform !== 'android',
              sequences: platform !== 'android',
              // custom
              drop_console: true,
              drop_debugger: true,
              ecma: 6,
              keep_infinity: platform === 'android', // for Chrome/V8
              reduce_funcs: platform !== 'android', // for Chrome/V8
              global_defs: {
                __UGLIFIED__: true
              }
            },
            // custom
            ecma: 6,
            safari10: platform !== 'android'
          }
        })
      ]
    },
    module: {
      rules: [
        {
          include: join(appFullPath, entryPath),
          use: [
            // Require all Android app components
            platform === 'android' && {
              loader: '@nativescript/webpack/helpers/android-app-components-loader',
              options: {modules: appComponents}
            },

            {
              loader: '@nativescript/webpack/bundle-config-loader',
              options: {
                angular: true,
                loadCss: !snapshot, // load the application css if in debug mode
                unitTesting,
                appFullPath,
                projectRoot,
                ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
              }
            }
          ].filter(loader => !!loader)
        },

        {test: /\.html$|\.xml$/, use: 'raw-loader'},

        {
          test: /[\/|\\]app\.css$/,
          use: [
            '@nativescript/webpack/helpers/style-hot-loader',
            {
              loader: "@nativescript/webpack/helpers/css2json-loader",
              options: {useForImports: true}
            },
          ],
        },
        {
          test: /[\/|\\]app\.scss$/,
          use: [
            '@nativescript/webpack/helpers/style-hot-loader',
            {
              loader: "@nativescript/webpack/helpers/css2json-loader",
              options: {useForImports: true}
            },
            'sass-loader',
          ],
        },

        // Angular components reference css files and their imports using raw-loader
        {test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: 'raw-loader'},
        {
          test: /\.scss$/,
          exclude: /[\/|\\]app\.scss$/,
          use: ['raw-loader', 'resolve-url-loader', 'sass-loader']
        },

        {
          test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
          exclude: /\.worker\.ts$/,
          use: [
            '@nativescript/webpack/helpers/moduleid-compat-loader',
            '@nativescript/webpack/helpers/lazy-ngmodule-hot-loader',
            '@ngtools/webpack'
          ]
        },
        // Compile Worker files with ts-loader
        {test: /\.worker\.ts$/, loader: "ts-loader"},
        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
        // Removing this will cause deprecation warnings to appear.
        {
          test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
          parser: {system: true}
        }
      ]
    },
    plugins: [
      // Define useful constants like TNS_WEBPACK
      new webpack.DefinePlugin({
        'global.TNS_WEBPACK': 'true',
        'global.isAndroid': platform === 'android',
        'global.isIOS': platform === 'ios',
        process: 'global.process'
      }),
      // Remove all files from the out dir.
      new CleanWebpackPlugin({
        cleanOnceBeforeBuildPatterns: itemsToClean,
        verbose: !!verbose
      }),
      // Copy assets
      new CopyWebpackPlugin({
        patterns: copyTargets,
      }),
      new nsWebpack.GenerateNativeScriptEntryPointsPlugin('bundle'),
      // For instructions on how to set up workers with webpack
      // check out https://github.com/nativescript/worker-loader
      new NativeScriptWorkerPlugin({
        plugins: [ngCompilerPlugin]
      }),
      ngCompilerPlugin,
      // Does IPC communication with the {N} CLI to notify events when running in watch mode.
      new nsWebpack.WatchStateLoggerPlugin()
    ]
  };

  if (report) {
    // Generate report files for bundles content
    config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: 'static',
          openAnalyzer: false,
          generateStatsFile: true,
          reportFilename: resolve(projectRoot, 'report', `report.html`),
          statsFilename: resolve(projectRoot, 'report', `stats.json`)
        })
    );
  }

  if (snapshot) {
    config.plugins.push(
        new nsWebpack.NativeScriptSnapshotPlugin({
          chunk: 'vendor',
          angular: true,
          requireModules: [
            'reflect-metadata',
            '@angular/platform-browser',
            '@angular/core',
            '@angular/common',
            '@angular/router',
            '@nativescript/angular'
          ],
          projectRoot,
          webpackConfig: config,
          snapshotInDocker,
          skipSnapshotTools,
          useLibs
        })
    );
  }
  if (targetEnv) {
    let envFile = targetEnv === 'stg' ? 'environment.stg.ts' : 'environment.prod.ts';
    config.plugins.push(new webpack.NormalModuleReplacementPlugin(
        /src\/environments\/environment\.ts/, envFile
    ))
  }

  if (!production && hmr) {
    config.plugins.push(new webpack.HotModuleReplacementPlugin());
  }

  return config;
};

const{join，relative，resolve，sep，dirname}=require（'path'）；
常数fs=要求（'fs'）；
const webpack=require（'webpack'）；
const nsWebpack=require（“@nativescript/webpack”）；
const nativescriptTarget=require（'@nativescript/webpack/nativescript target'）；
常数{
NSHMRNG
}=需要（'@nativescript/webpack/transformers/ns support hmr ng'）；
const{nstransformnativeclasssng}=require（“@nativescript/webpack/transformers/ns transform native classes ng”）；
常数{
getMainModulePath
}=需要（'@nativescript/webpack/utils/ast-utils'）；
const{getNoEmitOnErrorFromTSConfig，getCompilerOptionsFromTSConfig}=require（@nativescript/webpack/utils/tsconfig-utils”）；
const{CleanWebpackPlugin}=require（'clean-webpack-plugin'）；
const CopyWebpackPlugin=require（'copy-webpack-plugin'）；
const{BundleAnalyzerPlugin}=require（'webpack-bundle-analyzer'）；
常数{
NativeScriptWorkerPlugin
}=require（'nativescript-worker-loader/NativeScriptWorkerPlugin'）；
const TerserPlugin=require（'terser-webpack-plugin'）；
常数{
getAngularCompilerPlugin
}=需要（'@nativescript/webpack/plugins/NativeScriptAngularCompilerPlugin'）；
const hashSalt=Date.now（）.toString（）；
module.exports=env=>{
//在此处添加自定义活动、服务和其他Android应用程序组件。
常量appComponents=[
“@nativescript/core/ui/frame”、“@nativescript/core/ui/frame/activity”
];
const platform=env&&（（env.android&&'android'）| |（env.ios&&'ios'））；
如果（！平台）{
抛出新错误（'您需要提供目标平台！'）；
}
const targetEnv=env&&（env.prod&“prod”| | env.stg&“stg”）；
const AngularCompilerPlugin=getAngularCompilerPlugin（平台）；
const projectRoot=\uuu dirname；
//平台内的默认目标/。。。
const dist=解析(
projectRoot，
nsWebpack.getAppPath（平台，项目根）
);
常数{
//“appPath”和“AppResourcePath”值是从
//nsconfig.json配置文件
//与“tns运行android”ios捆绑时——捆绑”。
appPath='src'，
AppResourcePath='App_Resources'，
//运行“tns run android | ios”时，可以提供以下标志
快照，//--env.snapshot，
生产，环境生产
丑陋的，丑陋的
报告，//--env.report
sourceMap，//--env.sourceMap
hiddenSourceMap，//--env.hiddenSourceMap
hmr，//--env.hmr，
单元测试，//--env.unitTesting
测试，环境测试
详细，//--env.verbose
ci，//--env.ci
snapshotInDocker，//--env.snapshotInDocker
skipSnapshotTools，//--env.skipSnapshotTools
compileSnapshot/--env.compileSnapshot
}=环境；
const useLibs=compileSnapshot；
const isAnySourceMapEnabled=！！sourceMap | |！！hiddenSourceMap；
const externals=nsWebpack.getConvertedExternals（env.externals）；
const appFullPath=resolve（projectRoot，appPath）；
const appResourcesFullPath=resolve（projectRoot，appResourcesPath）；
让tsConfigName='tsconfig.json'；
让tsconfig.tns.json='tsconfig.tns.json'；
让tsConfigPath=resolve（projectRoot，tsConfigName）；
const tsconfig-nspath=resolve（projectRoot，tsconfig-nsname）；
if（fs.existsSync（tsconfig路径））{
//仍然支持共享的应用程序配置
tsconfiggname=tsConfigTnsName；
tsconfig路径=tsconfig路径；
}
const entryModule=`${nsWebpack.getEntryModule（appFullPath，platform）}.ts`；
常量entryPath=`.${sep}${entryModule}`；
const entries={bundle:entryPath}；
常数areCoreModulesExternal=
Array.isArray（环境外部）&&
env.externals.some（e=>e.indexOf（'@nativescript'）>-1）；
if（平台=='ios'&&！areCoreModulesExternal&&！测试）{
条目['tns_modules/@nativescript/core/inspector_modules']=
“检查员模块”；
}
const compilerOptions=getCompilerOptionsFromTSConfig（tsconfig路径）；
nsWebpack.ProcessTSPathsForScopedModule（{compilerOptions}）；
nsWebpack.processTsPathsForScopedAngular（{compilerOptions}）；
const ngCompilerTransformers=[NSTransformTransactiveClassng]；
常量additionalLazyModuleResources=[]；
const copyIgnore={ignore:[`${relative（appPath，appResourcesFullPath）}/**`]}；
常数copyTargets=[
{from:'assets/**'，noErrorOnMissing:true，globOptions:{dot:false，…copyIgnore}，
{from:'font/**'，noErrorOnMissing:true，globOptions:{dot:false，…copyIgnore}}，
];
如果（！生产）{
//仅用于发展目的
//例如，包含模拟json文件夹
//push（{from:'tools/mockdata'，to:'assets/mockdata'}）；
如果（hmr）{
ngCompilerTransformers.push（nsSupportHmrNg）；
}
}
//当“@angular/core”为外部时，它不包含在捆绑包中。这样，它将被使用
//直接从节点_模块和角度模块