NativeScriptAngularCompilerPlugin.ts

import * as path from "path";
import { AngularCompilerPlugin, AngularCompilerPluginOptions } from "@ngtools/webpack";
import { PlatformFSPlugin, PlatformFSPluginOptions, mapFileSystem } from "./PlatformFSPlugin";

export type NativeScriptAngularCompilerPluginOptions = AngularCompilerPluginOptions & { platformOptions?: PlatformFSPluginOptions };

export class NativeScriptAngularCompilerPlugin extends AngularCompilerPlugin {
    readonly options: NativeScriptAngularCompilerPluginOptions;

    get __compilerHost() {
        // Accessing private API of the AngularCompilerPlugin
        // We need this to augment at least the "resourceNameToFileName" so we can map
        // component.css to component.android.css etc. for platform specific css and html resources.
        return (<any>this)._compilerHost;
    }

    constructor(options: NativeScriptAngularCompilerPluginOptions) {
        super(options);

        // https://github.com/angular/angular/blob/7bfeac746e717d02e062fe4a65c008060b8b662c/packages/compiler-cli/src/transformers/api.ts
        const resourceNameToFileName = this.__compilerHost.resourceNameToFileName || function(file, relativeTo) {
            const resolved = path.resolve(path.dirname(relativeTo), file);
            if (this.fileExists(resolved)) {
                return resolved;
            } else {
                return null;
            }
        };
        this.__compilerHost.resourceNameToFileName = function(file, relativeTo) {
            const parsed= path.parse(file);
            const platformFile = parsed.name + ".android" + parsed.ext;
            let resolved;
            try {
                resolved = resourceNameToFileName.call(this, platformFile, relativeTo);
            } catch(e) {
            }
            resolved = resolved || resourceNameToFileName.call(this, file, relativeTo);
            return resolved;
        };
    }

    apply(compiler) {
        super.apply(compiler);
        if (this.options.platformOptions) {
            compiler.plugin('environment', () => {
                // We are not forced to decorate the filesystem here, the "PlatformSuffixPlugin" resolver plugin can handle,
                // the platform resolution for ts, css and html files, however then dynamic require contexts may list the files for both platforms
                compiler.inputFileSystem = mapFileSystem({
                    fs: compiler.inputFileSystem,
                    context: compiler.context,
                    platform: this.options.platformOptions.platform,
                    platforms: this.options.platformOptions.platforms,
                    ignore: this.options.platformOptions.ignore
                });
                // The AngularCompilerPlugin also decorates the watchFileSystem, we will have work to do here when we watch:
                // compiler.inputFileSystem = new virtual_file_system_decorator_1.VirtualFileSystemDecorator(compiler.inputFileSystem, this._compilerHost);
                // compiler.watchFileSystem = new virtual_file_system_decorator_1.VirtualWatchFileSystemDecorator(compiler.inputFileSystem);
            });
        }
    }
}