0
# @ngtools/webpack
1

2
@ngtools/webpack is a Webpack 5.x plugin for Angular's Ahead-of-Time (AOT) compiler. It provides both webpack plugin and loader functionality for compiling Angular applications and components, supporting both AOT and JIT compilation modes with seamless TypeScript integration.
3

4
## Package Information
5

6
- **Package Name**: @ngtools/webpack
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @ngtools/webpack`
10

11
## Core Imports
12

13
```typescript
14
import { AngularWebpackPlugin } from '@ngtools/webpack';
15
```
16

17
For additional utilities:
18

19
```typescript
20
import { 
21
  AngularWebpackPlugin, 
22
  AngularWebpackPluginOptions,
23
  AngularWebpackLoaderPath,
24
  imageDomains 
25
} from '@ngtools/webpack';
26
```
27

28
## Basic Usage
29

30
```typescript
31
import { AngularWebpackPlugin } from '@ngtools/webpack';
32

33
// Webpack configuration
34
export default {
35
  module: {
36
    rules: [
37
      {
38
        test: /\.[jt]sx?$/,
39
        loader: '@ngtools/webpack',
40
      },
41
    ],
42
  },
43
  plugins: [
44
    new AngularWebpackPlugin({
45
      tsconfig: './tsconfig.json',
46
      jitMode: false,
47
      directTemplateLoading: true,
48
    }),
49
  ],
50
};
51
```
52

53
## Architecture
54

55
@ngtools/webpack is built around several key components:
56

57
- **Webpack Plugin**: `AngularWebpackPlugin` class that integrates with webpack's compilation lifecycle
58
- **Webpack Loader**: Angular-specific loader that processes TypeScript files with Angular compilation
59
- **Compilation System**: Angular AOT/JIT compiler integration with TypeScript host augmentation
60
- **Resource Processing**: Template and stylesheet loading with webpack integration
61
- **Transformation Pipeline**: TypeScript transformers for Angular-specific code modifications
62
- **Caching Layer**: Source file caching and dependency tracking for efficient builds
63

64
## Capabilities
65

66
### Plugin Configuration
67

68
Core webpack plugin for Angular AOT/JIT compilation with comprehensive configuration options for TypeScript integration and Angular-specific build requirements.
69

70
```typescript { .api }
71
class AngularWebpackPlugin {
72
  constructor(options: AngularWebpackPluginOptions);
73
}
74

75
interface AngularWebpackPluginOptions {
76
  tsconfig: string;
77
  compilerOptions?: CompilerOptions;
78
  fileReplacements: Record<string, string>;
79
  substitutions: Record<string, string>;
80
  directTemplateLoading: boolean;
81
  emitClassMetadata: boolean;
82
  emitNgModuleScope: boolean;
83
  emitSetClassDebugInfo?: boolean;
84
  jitMode: boolean;
85
  inlineStyleFileExtension?: string;
86
}
87
```
88

89
[Plugin Configuration](./plugin-configuration.md)
90

91
### Webpack Loader Integration
92

93
Webpack loader system for processing Angular TypeScript files with Angular compiler integration and resource handling.
94

95
```typescript { .api }
96
function angularWebpackLoader(
97
  this: LoaderContext<unknown>,
98
  content: string,
99
  map: string
100
): void;
101

102
const AngularWebpackLoaderPath: string;
103
```
104

105
[Webpack Loader](./webpack-loader.md)
106

107
### TypeScript Compilation System
108

109
Advanced TypeScript compilation system with host augmentation for Angular-specific requirements including dependency collection, resource loading, and file replacements.
110

111
```typescript { .api }
112
function augmentHostWithResources(
113
  host: CompilerHost,
114
  resourceLoader: WebpackResourceLoader,
115
  options: AngularWebpackPluginOptions
116
): CompilerHost;
117

118
function augmentHostWithDependencyCollection(
119
  host: CompilerHost,
120
  dependencies: Map<string, Set<string>>,
121
  moduleResolutionCache: Map<string, ts.ResolvedModule>
122
): CompilerHost;
123

124
function augmentHostWithReplacements(
125
  host: CompilerHost,
126
  replacements: Record<string, string>,
127
  moduleResolutionCache: Map<string, ts.ResolvedModule>
128
): CompilerHost;
129
```
130

131
[TypeScript Compilation](./typescript-compilation.md)
132

133
### Resource Management
134

135
Resource loading system for Angular templates and stylesheets with webpack integration and inline processing capabilities.
136

137
```typescript { .api }
138
class WebpackResourceLoader {
139
  get(file: string): Promise<string>;
140
  resolve(url: string, containingFile: string): Promise<string>;
141
}
142

143
const InlineAngularResourceLoaderPath: string;
144
const InlineAngularResourceSymbol: unique symbol;
145
```
146

147
[Resource Management](./resource-management.md)
148

149
### Code Transformations
150

151
TypeScript transformers for Angular-specific code modifications including resource replacement, import elision, and JIT support removal.
152

153
```typescript { .api }
154
function replaceResources(
155
  shouldTransform: (fileName: string) => boolean,
156
  getTypeChecker: () => ts.TypeChecker,
157
  inlineStyleFileExtension?: string
158
): ts.TransformerFactory<ts.SourceFile>;
159

160
function elideImports(
161
  sourceFile: ts.SourceFile,
162
  removedNodes: ts.Node[],
163
  getTypeChecker: () => ts.TypeChecker,
164
  compilerOptions: ts.CompilerOptions
165
): Set<ts.Node>;
166
```
167

168
[Code Transformations](./code-transformations.md)
169

170
## Types
171

172
```typescript { .api }
173
interface EmitFileResult {
174
  content?: string;
175
  map?: string;
176
  dependencies: readonly string[];
177
  hash?: Uint8Array;
178
}
179

180
type FileEmitter = (file: string) => Promise<EmitFileResult | undefined>;
181

182
type DiagnosticsReporter = (diagnostics: readonly Diagnostic[]) => void;
183

184
interface InputFileSystemSync extends InputFileSystem {
185
  readFileSync: NonNullable<InputFileSystem['readFileSync']>;
186
  statSync: NonNullable<InputFileSystem['statSync']>;
187
}
188

189
const imageDomains: Set<string>;
190
const AngularPluginSymbol: unique symbol;
191
```