How to use @ngtools/webpack - 10 common examples

});
    });

    const config = require(configs.pluginLib.wp)(true);
    const pluginIdx = findPluginIndex(config.plugins);
    const options = {
      skipCodeGeneration: false,
      tsConfigPath: tmpTsConfig
    };
    const plugin = NgcWebpackPlugin.clone(config.plugins[pluginIdx], { options });

    config.plugins.splice(pluginIdx, 1, plugin);

    await run(config);

    Object.defineProperty(WebpackCompilerHost.prototype, 'writeFile', writeFilePropertyDescriptor);

    rimraf.sync(tmpTsConfig);

    // the directory of index.ts:
    const root = Path.dirname(Path.resolve(Path.dirname(configs.pluginLib.ts), tsConfig.files[0]));
    const metadataJsonPath = Path.resolve(root, 'my-lib.ng-flat.metadata.json');
    const meta = await readFile(metadataJsonPath);
    rimraf.sync(metadataJsonPath);

    const metadataBundle: ModuleMetadata = JSON.parse(meta);
    const LibComponentComponent: any = metadataBundle.metadata.LibComponentComponent;

    // flat module with @ngtools/webpack doesn't inline resources into metadata
    expect(LibComponentComponent.decorators[0].arguments[0]).to.eql({
      "selector": "lib-component",
      "templateUrl": "./lib-component.component.html",

tsConfigPath: workerTsConfigPath,
    mainPath: undefined,
    platform: PLATFORM.Browser,
    sourceMap: buildOptions.sourceMap.scripts,
    forkTypeChecker: buildOptions.forkTypeChecker,
    contextElementDependencyConstructor: require('webpack/lib/dependencies/ContextElementDependency'),
    logger: wco.logger,
    // Run no transformers.
    platformTransformers: [],
    // Don't attempt lazy route discovery.
    discoverLazyRoutes: false,
  };

  pluginOptions = _pluginOptionsOverrides(buildOptions, pluginOptions);

  return new AngularCompilerPlugin(pluginOptions);
}

uglify, // --env.uglify
        report, // --env.report
        sourceMap, // --env.sourceMap
        hmr, // --env.hmr,
    } = env;
    const externals = (env.externals || []).map((e) => { // --env.externals
        return new RegExp(e + ".*");
    });

    const appFullPath = resolve(projectRoot, appPath);
    const appResourcesFullPath = resolve(projectRoot, appResourcesPath);

    const entryModule = `${nsWebpack.getEntryModule(appFullPath)}.ts`;
    const entryPath = `.${sep}${entryModule}`;

    const ngCompilerPlugin = new AngularCompilerPlugin({
        hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]),
        platformTransformers: aot ? [nsReplaceBootstrap(() => ngCompilerPlugin)] : null,
        mainPath: resolve(appPath, entryModule),
        tsConfigPath: join(__dirname, "tsconfig.tns.json"),
        skipCodeGeneration: !aot,
        sourceMap: !!sourceMap,
    });

    const config = {
        mode: uglify ? "production" : "development",
        context: appFullPath,
        externals,
        watchOptions: {
            ignored: [
                appResourcesFullPath,
                // Don't watch hidden files

// 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 lazy loader inside app module
            ngCompilerTransformers.push(nsReplaceLazyLoader);
            // 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))),
        mainPath: resolve(appPath, entryModule),
        tsConfigPath: join(__dirname, tsConfigName),
        skipCodeGeneration: !aot,
        sourceMap: !!sourceMap,
        additionalLazyModuleResources: additionalLazyModuleResources
    });

    const config = {
        mode: uglify ? "production" : "development",
        context: appFullPath,
        externals,
        watchOptions: {
            ignored: [
                appResourcesFullPath,

// 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 lazy loader inside app module
            ngCompilerTransformers.push(nsReplaceLazyLoader);
            // 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))),
        mainPath: join(appFullPath, entryModule),
        tsConfigPath: join(__dirname, tsConfigName),
        skipCodeGeneration: !aot,
        sourceMap: !!sourceMap,
        additionalLazyModuleResources: additionalLazyModuleResources
    });

    const config = {
        mode: uglify ? "production" : "development",
        context: appFullPath,
        externals,
        watchOptions: {
            ignored: [
                appResourcesFullPath,

loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  parser: 'sugarss',
                  plugins: POSTCSS_PLUGINS,
                  sourceMap: false
                }
              }
            ]
        },
        // TODO: Remove - Ignores System.import warning in angular module
        { test: /[\/\\]@angular[\/\\].+\.js$/, parser: { system: true } },
      ]
    },
    plugins: [
      new AngularCompilerPlugin({
        tsConfigPath: 'tsconfig.json',
        entryModule: path.join(appFolder, '/src/app.module#AppModule'),
        skipCodeGeneration: !aot,
        hostReplacementPaths: replaceEnvFile ? {
          [path.join(appFolder, '/environment/environment.ts')]: path.join(appFolder, `/environment/environment.${replaceEnvFile}.ts`)
        } : {},
      }),
      new MiniCssExtractPlugin(),
      ...(copyAssetsPlugin ? [new CopyWebpackPlugin([{
        from: path.join(appFolder, 'assets/public'),
        to: ''
      }])] : []),
      new webpack.DefinePlugin({
        gitBranch: JSON.stringify(process.env.GIT_BRANCH)
      }),
      new ProgressPlugin(),

},
      "lessLoader": {
        "sourceMap": false
      },
      "context": ""
    }
  }));

  if (isProd) {
    plugins.push(new HashedModuleIdsPlugin({
      "hashFunction": "md5",
      "hashDigest": "base64",
      "hashDigestLength": 4
    }));

    plugins.push(new AotPlugin({
      "mainPath": "main.ts",
      "hostReplacementPaths": {
        "environments/index.ts": "environments/index.prod.ts"
      },
      "exclude": [],
      "tsConfigPath": "src/tsconfig.app.json"
    }));

    // plugins.push(new UglifyJsPlugin({
    //   "mangle": {
    //     "screw_ie8": true
    //   },
    //   "compress": {
    //     "screw_ie8": true,
    //     "warnings": false
    //   },

// Also dedupe multiple slashes into single ones.
                return `/${baseHref || ''}/${deployUrl || ''}/${URL}`.replace(/\/\/+/g, '/');
              }
            })
          ],
          "sassLoader": {
            "sourceMap": false,
            "includePaths": []
          },
          "lessLoader": {
            "sourceMap": false
          },
          "context": ""
        }
      }),
      new AotPlugin({
        "mainPath": "main.ts",
        "exclude": [],
        "tsConfigPath": "src/tsconfig.app.json",
        "skipCodeGeneration": env.aot
      }),
      new NormalModuleReplacementPlugin(
        /environments\/environment/,
        env.env && env.env != 'dev' ? resolve('src', `environments/environment.${env.env}.ts`) : resolve('src', "environments/environment.ts")
      )
    ],
    "node": {
      "fs": "empty",
      "global": true,
      "crypto": "empty",
      "tls": "empty",
      "net": "empty",

context: ""
      }
    })
  );

  if (isProd) {
    // plugins.push(
    //   new HashedModuleIdsPlugin({
    //     hashFunction: "md5",
    //     hashDigest: "base64",
    //     hashDigestLength: 4
    //   })
    // );

    plugins.push(
      new AotPlugin({
        mainPath: "main.ts",
        hostReplacementPaths: {
          "environments/index.ts": "environments/index.prod.ts"
        },
        exclude: [],
        tsConfigPath: "src/tsconfig.app.json",
        skipCodeGeneration: true
      })
    );

    // plugins.push(
    //   new UglifyJsPlugin({
    //     test: /\.js($|\?)/i
    //   })
    // );
  } else {

return new webpack_1.AngularCompilerPlugin(pluginOptions);
    }
    else {
        const pluginOptions = Object.assign({}, {
            mainPath: path.join(projectRoot, appConfig.root, appConfig.main),
            i18nFile: buildOptions.i18nFile,
            i18nFormat: buildOptions.i18nFormat,
            locale: buildOptions.locale,
            replaceExport: appConfig.platform === 'server',
            missingTranslation: buildOptions.missingTranslation,
            hostReplacementPaths,
            sourceMap: buildOptions.sourcemaps,
            // If we don't explicitely list excludes, it will default to `['**/*.spec.ts']`.
            exclude: []
        }, options);
        return new webpack_1.AotPlugin(pluginOptions);
    }
}
function getNonAotConfig(wco) {