0
# Webpack Loader
1

2
Webpack loader system for processing Angular TypeScript files with Angular compiler integration and resource handling.
3

4
## Capabilities
5

6
### Angular Webpack Loader Function
7

8
Main webpack loader function that processes TypeScript files through the Angular compiler.
9

10
```typescript { .api }
11
/**
12
 * Angular webpack loader function for processing TypeScript files
13
 * Integrates with AngularWebpackPlugin for Angular compilation
14
 * @param content - Source code content of the file
15
 * @param map - Source map from previous loaders in the chain
16
 */
17
function angularWebpackLoader(
18
  this: LoaderContext<unknown>,
19
  content: string,
20
  map: string
21
): void;
22
```
23

24
**Usage Example:**
25

26
```typescript
27
// In webpack configuration
28
export default {
29
  module: {
30
    rules: [
31
      {
32
        test: /\.[jt]sx?$/,
33
        loader: '@ngtools/webpack',
34
      },
35
    ],
36
  },
37
};
38
```
39

40
### Loader Path Constant
41

42
File path constant for referencing the Angular webpack loader.
43

44
```typescript { .api }
45
/**
46
 * File path to the Angular webpack loader
47
 * Use this constant when referencing the loader programmatically
48
 */
49
const AngularWebpackLoaderPath: string;
50
```
51

52
**Usage Example:**
53

54
```typescript
55
import { AngularWebpackLoaderPath } from '@ngtools/webpack';
56

57
// Use in webpack configuration
58
export default {
59
  module: {
60
    rules: [
61
      {
62
        test: /\.[jt]sx?$/,
63
        loader: AngularWebpackLoaderPath,
64
      },
65
    ],
66
  },
67
};
68
```
69

70
### File Emitter System
71

72
System for handling file emission during the Angular compilation process.
73

74
```typescript { .api }
75
/**
76
 * Result structure for file emission operations
77
 * Contains file content, source maps, and dependency information
78
 */
79
interface EmitFileResult {
80
  /** File content as string */
81
  content?: string;
82
  /** Source map for the emitted file */
83
  map?: string;
84
  /** List of file dependencies discovered during emission */
85
  dependencies: readonly string[];
86
  /** Hash of the file content for caching */
87
  hash?: Uint8Array;
88
}
89

90
/**
91
 * Function type for file emission
92
 * Processes a file and returns emission result
93
 */
94
type FileEmitter = (file: string) => Promise<EmitFileResult | undefined>;
95
```
96

97
### File Emitter Registration
98

99
Registration system for managing file emitters during compilation.
100

101
```typescript { .api }
102
/**
103
 * Registration wrapper for file emitters
104
 * Manages lifecycle and cleanup of file emission processes
105
 */
106
class FileEmitterRegistration {
107
  /**
108
   * Updates the emitter function
109
   * @param emitter - New file emitter function
110
   */
111
  update(emitter: FileEmitter): void;
112
  
113
  /**
114
   * Emits a file using the registered emitter
115
   * @param file - File path to emit
116
   * @returns Promise resolving to emission result
117
   */
118
  emit(file: string): Promise<EmitFileResult | undefined>;
119
}
120
```
121

122
### File Emitter Collection
123

124
Collection manager for multiple file emitters during webpack compilation.
125

126
```typescript { .api }
127
/**
128
 * Collection manager for file emitters
129
 * Coordinates multiple emitters during webpack compilation
130
 */
131
class FileEmitterCollection {
132
  /**
133
   * Registers a new file emitter
134
   * @returns New file emitter registration
135
   */
136
  register(): FileEmitterRegistration;
137
  
138
  /**
139
   * Emits a specific file using registered emitters
140
   * @param file - File path to emit
141
   * @returns Promise resolving to emission result
142
   */
143
  emit(file: string): Promise<EmitFileResult | undefined>;
144
}
145
```
146

147
### Loader Integration Example
148

149
Complete example showing how the loader integrates with the plugin:
150

151
```typescript
152
import { AngularWebpackPlugin, AngularWebpackLoaderPath } from '@ngtools/webpack';
153

154
export default {
155
  module: {
156
    rules: [
157
      {
158
        test: /\.[jt]sx?$/,
159
        loader: AngularWebpackLoaderPath,
160
      },
161
    ],
162
  },
163
  plugins: [
164
    new AngularWebpackPlugin({
165
      tsconfig: './tsconfig.json',
166
      jitMode: false,
167
      directTemplateLoading: true,
168
    }),
169
  ],
170
};
171
```
172

173
### Loader Context Integration
174

175
The loader integrates with webpack's loader context and the Angular plugin:
176

177
```typescript
178
// The loader expects the plugin to be configured
179
// It communicates via the AngularPluginSymbol
180
import { AngularPluginSymbol } from '@ngtools/webpack';
181

182
// Plugin attaches file emitter collection to loader context
183
interface LoaderContextWithAngular extends LoaderContext<unknown> {
184
  [AngularPluginSymbol]?: FileEmitterCollection;
185
}
186
```
187

188
### Error Handling
189

190
The loader includes comprehensive error handling:
191

192
- Missing or invalid webpack version
193
- Plugin not configured properly  
194
- File emission failures
195
- TypeScript compilation errors
196

197
```typescript
198
// Example basic webpack configuration
199
export default {
200
  module: {
201
    rules: [
202
      {
203
        test: /\.[jt]sx?$/,
204
        loader: '@ngtools/webpack',
205
      },
206
    ],
207
  },
208
  plugins: [
209
    new AngularWebpackPlugin({
210
      tsconfig: './tsconfig.json',
211
    }),
212
  ],
213
  stats: {
214
    errors: true,
215
    warnings: true,
216
  },
217
};
218
```