0
# Resource Management
1

2
Resource loading system for Angular templates and stylesheets with webpack integration and inline processing capabilities.
3

4
## Capabilities
5

6
### Webpack Resource Loader
7

8
Webpack-specific resource loader for Angular templates and stylesheets with promise-based loading and webpack integration.
9

10
```typescript { .api }
11
/**
12
 * Webpack-specific resource loader for Angular components
13
 * Handles loading of templates and stylesheets through webpack
14
 */
15
class WebpackResourceLoader {
16
  constructor(cache?: boolean);
17
  
18
  /**
19
   * Loads resource content from file system
20
   * @param file - File path to load
21
   * @returns Promise resolving to file content
22
   */
23
  get(file: string): Promise<string>;
24
  
25
  /**
26
   * Resolves resource URL relative to containing file
27
   * @param url - Resource URL to resolve
28
   * @param containingFile - File containing the resource reference
29
   * @returns Promise resolving to resolved file path
30
   */
31
  resolve(url: string, containingFile: string): Promise<string>;
32
}
33
```
34

35
**Usage Example:**
36

37
```typescript
38
import { WebpackResourceLoader } from '@ngtools/webpack';
39

40
const resourceLoader = new WebpackResourceLoader();
41

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

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

49
### Inline Resource Loader
50

51
Specialized loader for processing inline Angular resources with webpack.
52

53
```typescript { .api }
54
/**
55
 * Path to inline Angular resource loader
56
 * Use this loader for processing inline component resources
57
 */
58
const InlineAngularResourceLoaderPath: string;
59

60
/**
61
 * Unique symbol for inline resource identification
62
 * Used for internal communication and resource tracking
63
 */
64
const InlineAngularResourceSymbol: unique symbol;
65
```
66

67
**Usage Example:**
68

69
```typescript
70
import { InlineAngularResourceLoaderPath } from '@ngtools/webpack';
71

72
// Webpack configuration for inline resources
73
export default {
74
  module: {
75
    rules: [
76
      {
77
        test: /\.(html|css)$/,
78
        resourceQuery: /ngResource/,
79
        loader: InlineAngularResourceLoaderPath,
80
      },
81
    ],
82
  },
83
};
84
```
85

86
### Inline Resource Compilation Integration
87

88
Extended webpack compilation interface for inline Angular resources.
89

90
```typescript { .api }
91
/**
92
 * Extended webpack compilation interface for inline resources
93
 * Provides access to inline resource processing capabilities
94
 */
95
interface CompilationWithInlineAngularResource extends Compilation {
96
  [InlineAngularResourceSymbol]: Map<string, string>;
97
}
98
```
99

100
### Inline Resource Loader Function
101

102
Default export loader function for processing inline Angular resources.
103

104
```typescript { .api }
105
/**
106
 * Inline resource loader function
107
 * Processes inline Angular component resources
108
 * @param this - Webpack loader context with optional data
109
 */
110
function inlineResourceLoader(this: LoaderContext<{ data?: string }>): void;
111
```
112

113
### Resource Query Constants
114

115
Constants for resource query processing and identification.
116

117
```typescript { .api }
118
/**
119
 * Query parameter for Angular component resources
120
 * Used to identify resources that need Angular-specific processing
121
 */
122
const NG_COMPONENT_RESOURCE_QUERY = 'ngResource';
123
```
124

125
**Usage Example:**
126

127
```typescript
128
// In component template replacement
129
const templateUrl = `./template.html?${NG_COMPONENT_RESOURCE_QUERY}`;
130
```
131

132
### Resource URL Processing
133

134
Utility functions for extracting and processing resource URLs from TypeScript AST nodes.
135

136
```typescript { .api }
137
/**
138
 * Extracts resource URL from TypeScript AST node
139
 * Used during component transformation to identify resource references
140
 * @param node - TypeScript AST node to examine
141
 * @returns Resource URL string or null if not found
142
 */
143
function getResourceUrl(node: ts.Node): string | null;
144
```
145

146
### Complete Resource Loading Example
147

148
Example showing comprehensive resource loading setup:
149

150
```typescript
151
import {
152
  WebpackResourceLoader,
153
  InlineAngularResourceLoaderPath,
154
  NG_COMPONENT_RESOURCE_QUERY
155
} from '@ngtools/webpack';
156

157
// Webpack configuration with resource loading
158
export default {
159
  module: {
160
    rules: [
161
      // Main Angular loader
162
      {
163
        test: /\.[jt]sx?$/,
164
        loader: '@ngtools/webpack',
165
      },
166
      // Inline resource loader
167
      {
168
        test: /\.(html|css|scss)$/,
169
        resourceQuery: new RegExp(NG_COMPONENT_RESOURCE_QUERY),
170
        loader: InlineAngularResourceLoaderPath,
171
      },
172
      // Regular template loader (if not using directTemplateLoading)
173
      {
174
        test: /\.html$/,
175
        exclude: /index\.html$/,
176
        loader: 'raw-loader',
177
      },
178
    ],
179
  },
180
  plugins: [
181
    new AngularWebpackPlugin({
182
      tsconfig: './tsconfig.json',
183
      directTemplateLoading: true, // Use direct template loading
184
    }),
185
  ],
186
};
187
```
188

189
### Resource Transformation Process
190

191
The resource loading system transforms Angular components:
192

193
```typescript
194
// Original component
195
@Component({
196
  selector: 'app-example',
197
  templateUrl: './example.component.html',
198
  styleUrls: ['./example.component.css']
199
})
200
export class ExampleComponent {}
201

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

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

219
### Resource Caching
220

221
Resource loading includes caching mechanisms:
222

223
```typescript
224
// Enable caching in resource loader
225
const resourceLoader = new WebpackResourceLoader(true);
226

227
// Cache is automatically managed during compilation
228
// Invalidated when files change during development
229
```
230

231
### Error Handling
232

233
Resource loading includes comprehensive error handling:
234

235
```typescript
236
try {
237
  const template = await resourceLoader.get('./missing-template.html');
238
} catch (error) {
239
  // Handle resource loading errors
240
  console.error('Failed to load template:', error.message);
241
}
242

243
// Resource resolution errors
244
try {
245
  const resolved = await resourceLoader.resolve('./missing.css', './component.ts');
246
} catch (error) {
247
  // Handle resolution errors
248
  console.error('Failed to resolve resource:', error.message);
249
}
250
```