NativeScript/packages/webpack5/src/configuration/angular.ts

import Config from 'webpack-chain';
import { existsSync } from 'fs';
import { extname } from 'path';

import { getEntryPath, getPlatformName } from '../helpers/platform';
import { getProjectFilePath } from '../helpers/project';
import { env as _env, IWebpackEnv } from '../index';
import base from './base';

export default function (config: Config, env: IWebpackEnv = _env): Config {
	base(config, env);

	const platform = getPlatformName();

	const tsConfigPath = [
		getProjectFilePath('tsconfig.app.json'),
		getProjectFilePath('tsconfig.json'),
	].find((path) => existsSync(path));

	// remove default ts rule
	config.module.rules.delete('ts');

	// remove fork ts checked as not needed
	config.plugins.delete('ForkTsCheckerWebpackPlugin');

	// explicitly define mainFields to make sure ngcc compiles as es2015 (module field)
	// instead of umd (main field).
	config.resolve.mainFields.add('module').add('main');

	config.module
		.rule('angular')
		.test(/(?:\.ngfactory.js|\.ngstyle\.js|\.ts)$/)
		.use('@ngtools/webpack')
		.loader('@ngtools/webpack');

	config.module
		.rule('@angular/core')
		.test(/[\/\\]@angular[\/\\]core[\/\\].+\.js$/)
		.parser({ system: true });

	// set up html
	config.module
		.rule('html')
		.test(/\.html$/)
		.use('raw-loader')
		.loader('raw-loader');

	// exclude component css files from the normal css rule
	config.module
		.rule('css')
		.exclude // exclude *.component.{platform}.css
		.add(/\.component(\.\w+)?\.css$/);

	// and instead use raw-loader, since that's what angular expects
	config.module
		.rule('css|component')
		.test(/\.component(\.\w+)?\.css$/)
		.use('raw-loader')
		.loader('raw-loader');

	// get base postCSS options
	const postCSSOptions = config.module
		.rule('scss')
		.uses.get('postcss-loader')
		.get('options');

	// exclude component css files from the normal css rule
	config.module
		.rule('scss')
		.exclude // exclude *.component.{platform}.scss
		.add(/\.component(\.\w+)?\.scss$/);

	// and instead use raw-loader, since that's what angular expects
	config.module
		.rule('scss|component')
		.test(/\.component(\.\w+)?\.scss$/)
		.use('raw-loader')
		.loader('raw-loader')
		.end()
		.use('postcss-loader')
		.loader('postcss-loader')
		.options(postCSSOptions)
		.end()
		.use('sass-loader')
		.loader('sass-loader');

	config.plugin('AngularCompilerPlugin').use(getAngularCompilerPlugin(), [
		{
			tsConfigPath,
			mainPath: getEntryPath(),
			// disable type checking in a forked process - it ignores
			// the hostReplacementPaths and prints errors about
			// platform suffixed files, even though they are
			// working as expected.
			forkTypeChecker: false,
			hostReplacementPaths(path: string) {
				const ext = extname(path);
				const platformExt = `.${platform}${ext}`;

				// already includes a platform specific extension - ignore
				if (path.includes(platformExt)) {
					return path;
				}

				const platformPath = path.replace(ext, platformExt);
				// check if the same file exists with a platform suffix and return if it does.
				if (existsSync(platformPath)) {
					// console.log(`[hostReplacementPaths] resolving "${path}" to "${platformPath}"`);
					return platformPath;
				}

				// just return the original path otherwise
				return path;
			},
			platformTransformers: [require('../transformers/NativeClass').default],
		},
	]);

	// Filter common undesirable warnings
	config.set(
		'ignoreWarnings',
		(config.get('ignoreWarnings') ?? []).concat([
			/**
			 * This rule hides
			 * +-----------------------------------------------------------------------------------------+
			 * | WARNING in Zone.js does not support native async/await in ES2017+.                      |
			 * | These blocks are not intercepted by zone.js and will not triggering change detection.   |
			 * | See: https://github.com/angular/zone.js/pull/1140 for more information.                 |
			 * +-----------------------------------------------------------------------------------------+
			 */
			/Zone\.js does not support native async\/await/,
			/**
			 * This rule hides
			 * +-----------------------------------------------------------------------------------------+
			 * | WARNING in environment.*.ts is part of the TypeScript compilation but it's unused.      |
			 * | Add only entry points to the 'files' or 'include' properties in your tsconfig.          |
			 * +-----------------------------------------------------------------------------------------+
			 */
			/environment.(\w+).ts is part of the TypeScript compilation but it's unused/,
		])
	);

	return config;
}

function getAngularCompilerPlugin(): any {
	const { AngularCompilerPlugin } = require('@ngtools/webpack');
	return AngularCompilerPlugin;
}