Resource Management

/**
 * Webpack-specific resource loader for Angular components
 * Handles loading of templates and stylesheets through webpack
 */
class WebpackResourceLoader {
  constructor(cache?: boolean);
  
  /**
   * Loads resource content from file system
   * @param file - File path to load
   * @returns Promise resolving to file content
   */
  get(file: string): Promise<string>;
  
  /**
   * Resolves resource URL relative to containing file
   * @param url - Resource URL to resolve
   * @param containingFile - File containing the resource reference
   * @returns Promise resolving to resolved file path
   */
  resolve(url: string, containingFile: string): Promise<string>;
}

import { WebpackResourceLoader } from '@ngtools/webpack';

const resourceLoader = new WebpackResourceLoader();

// Load template content
const templateContent = await resourceLoader.get('./app/component.html');

// Resolve stylesheet path
const stylePath = await resourceLoader.resolve('./styles.css', './app/component.ts');

/**
 * Path to inline Angular resource loader
 * Use this loader for processing inline component resources
 */
const InlineAngularResourceLoaderPath: string;

/**
 * Unique symbol for inline resource identification
 * Used for internal communication and resource tracking
 */
const InlineAngularResourceSymbol: unique symbol;

import { InlineAngularResourceLoaderPath } from '@ngtools/webpack';

// Webpack configuration for inline resources
export default {
  module: {
    rules: [
      {
        test: /\.(html|css)$/,
        resourceQuery: /ngResource/,
        loader: InlineAngularResourceLoaderPath,
      },
    ],
  },
};

/**
 * Extended webpack compilation interface for inline resources
 * Provides access to inline resource processing capabilities
 */
interface CompilationWithInlineAngularResource extends Compilation {
  [InlineAngularResourceSymbol]: Map<string, string>;
}

/**
 * Inline resource loader function
 * Processes inline Angular component resources
 * @param this - Webpack loader context with optional data
 */
function inlineResourceLoader(this: LoaderContext<{ data?: string }>): void;

/**
 * Query parameter for Angular component resources
 * Used to identify resources that need Angular-specific processing
 */
const NG_COMPONENT_RESOURCE_QUERY = 'ngResource';

// In component template replacement
const templateUrl = `./template.html?${NG_COMPONENT_RESOURCE_QUERY}`;

/**
 * Extracts resource URL from TypeScript AST node
 * Used during component transformation to identify resource references
 * @param node - TypeScript AST node to examine
 * @returns Resource URL string or null if not found
 */
function getResourceUrl(node: ts.Node): string | null;

import {
  WebpackResourceLoader,
  InlineAngularResourceLoaderPath,
  NG_COMPONENT_RESOURCE_QUERY
} from '@ngtools/webpack';

// Webpack configuration with resource loading
export default {
  module: {
    rules: [
      // Main Angular loader
      {
        test: /\.[jt]sx?$/,
        loader: '@ngtools/webpack',
      },
      // Inline resource loader
      {
        test: /\.(html|css|scss)$/,
        resourceQuery: new RegExp(NG_COMPONENT_RESOURCE_QUERY),
        loader: InlineAngularResourceLoaderPath,
      },
      // Regular template loader (if not using directTemplateLoading)
      {
        test: /\.html$/,
        exclude: /index\.html$/,
        loader: 'raw-loader',
      },
    ],
  },
  plugins: [
    new AngularWebpackPlugin({
      tsconfig: './tsconfig.json',
      directTemplateLoading: true, // Use direct template loading
    }),
  ],
};

// Original component
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {}

// After transformation (with directTemplateLoading: false)
@Component({
  selector: 'app-example',
  template: require('./example.component.html?ngResource'),
  styles: [require('./example.component.css?ngResource')]
})
export class ExampleComponent {}

// After transformation (with directTemplateLoading: true)
@Component({
  selector: 'app-example',
  template: `<div>Template content loaded directly</div>`,
  styles: [`/* Styles loaded directly */`]
})
export class ExampleComponent {}

// Enable caching in resource loader
const resourceLoader = new WebpackResourceLoader(true);

// Cache is automatically managed during compilation
// Invalidated when files change during development

try {
  const template = await resourceLoader.get('./missing-template.html');
} catch (error) {
  // Handle resource loading errors
  console.error('Failed to load template:', error.message);
}

// Resource resolution errors
try {
  const resolved = await resourceLoader.resolve('./missing.css', './component.ts');
} catch (error) {
  // Handle resolution errors
  console.error('Failed to resolve resource:', error.message);
}