@angular/upgrade 21.0.0-next.0 → 21.0.0-next.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/constants.mjs +2 -2
- package/fesm2022/constants.mjs.map +1 -1
- package/fesm2022/static/testing.mjs +1 -1
- package/fesm2022/static/testing.mjs.map +1 -1
- package/fesm2022/static.mjs +1090 -6
- package/fesm2022/static.mjs.map +1 -1
- package/fesm2022/upgrade.mjs +7 -873
- package/fesm2022/upgrade.mjs.map +1 -1
- package/index.d.ts +8 -419
- package/package.json +5 -5
- package/static/index.d.ts +318 -4
- package/static/testing/index.d.ts +1 -1
- package/angular1.d.d.ts +0 -336
- package/fesm2022/upgrade_helper.mjs +0 -1106
- package/fesm2022/upgrade_helper.mjs.map +0 -1
package/fesm2022/static.mjs
CHANGED
|
@@ -1,17 +1,1101 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @license Angular v21.0.0-next.
|
|
2
|
+
* @license Angular v21.0.0-next.2
|
|
3
3
|
* (c) 2010-2025 Google LLC. https://angular.io/
|
|
4
4
|
* License: MIT
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import { element, $ROOT_ELEMENT, $ROOT_SCOPE, DOWNGRADED_MODULE_COUNT_KEY, UPGRADE_APP_TYPE_KEY, $SCOPE, $COMPILE, $INJECTOR, $PARSE, REQUIRE_INJECTOR, REQUIRE_NG_MODEL, LAZY_MODULE_REF, INJECTOR_KEY, $CONTROLLER, $TEMPLATE_CACHE, $HTTP_BACKEND, module_, $PROVIDE, UPGRADE_MODULE_NAME, $$TESTABILITY, $DELEGATE, $INTERVAL, bootstrap } from './constants.mjs';
|
|
8
8
|
export { getAngularJSGlobal, getAngularLib, setAngularJSGlobal, setAngularLib, angular1 as ɵangular1, constants as ɵconstants } from './constants.mjs';
|
|
9
|
-
import { destroyApp, getDowngradedModuleCount, isNgModuleType, isFunction, UpgradeHelper, controllerKey } from './upgrade_helper.mjs';
|
|
10
|
-
export { VERSION, downgradeComponent, downgradeInjectable, upgrade_helper as ɵupgradeHelper, util as ɵutil } from './upgrade_helper.mjs';
|
|
11
9
|
import * as i0 from '@angular/core';
|
|
12
|
-
import { ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as _NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, PlatformRef, EventEmitter, Directive,
|
|
10
|
+
import { ɵNG_MOD_DEF as _NG_MOD_DEF, Injector, ChangeDetectorRef, Testability, TestabilityRegistry, ApplicationRef, SimpleChange, ɵSIGNAL as _SIGNAL, NgZone, ComponentFactoryResolver, ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR as _NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, PlatformRef, EventEmitter, Directive, ɵNoopNgZone as _NoopNgZone, NgModule } from '@angular/core';
|
|
11
|
+
export { VERSION } from './upgrade.mjs';
|
|
13
12
|
import { platformBrowser } from '@angular/platform-browser';
|
|
14
13
|
|
|
14
|
+
/**
|
|
15
|
+
* A `PropertyBinding` represents a mapping between a property name
|
|
16
|
+
* and an attribute name. It is parsed from a string of the form
|
|
17
|
+
* `"prop: attr"`; or simply `"propAndAttr" where the property
|
|
18
|
+
* and attribute have the same identifier.
|
|
19
|
+
*/
|
|
20
|
+
class PropertyBinding {
|
|
21
|
+
prop;
|
|
22
|
+
attr;
|
|
23
|
+
bracketAttr;
|
|
24
|
+
bracketParenAttr;
|
|
25
|
+
parenAttr;
|
|
26
|
+
onAttr;
|
|
27
|
+
bindAttr;
|
|
28
|
+
bindonAttr;
|
|
29
|
+
constructor(prop, attr) {
|
|
30
|
+
this.prop = prop;
|
|
31
|
+
this.attr = attr;
|
|
32
|
+
this.bracketAttr = `[${this.attr}]`;
|
|
33
|
+
this.parenAttr = `(${this.attr})`;
|
|
34
|
+
this.bracketParenAttr = `[(${this.attr})]`;
|
|
35
|
+
const capitalAttr = this.attr.charAt(0).toUpperCase() + this.attr.slice(1);
|
|
36
|
+
this.onAttr = `on${capitalAttr}`;
|
|
37
|
+
this.bindAttr = `bind${capitalAttr}`;
|
|
38
|
+
this.bindonAttr = `bindon${capitalAttr}`;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const DIRECTIVE_PREFIX_REGEXP = /^(?:x|data)[:\-_]/i;
|
|
43
|
+
const DIRECTIVE_SPECIAL_CHARS_REGEXP = /[:\-_]+(.)/g;
|
|
44
|
+
function onError(e) {
|
|
45
|
+
// TODO: (misko): We seem to not have a stack trace here!
|
|
46
|
+
console.error(e, e.stack);
|
|
47
|
+
throw e;
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Clean the jqLite/jQuery data on the element and all its descendants.
|
|
51
|
+
* Equivalent to how jqLite/jQuery invoke `cleanData()` on an Element when removed:
|
|
52
|
+
* https://github.com/angular/angular.js/blob/2e72ea13fa98bebf6ed4b5e3c45eaf5f990ed16f/src/jqLite.js#L349-L355
|
|
53
|
+
* https://github.com/jquery/jquery/blob/6984d1747623dbc5e87fd6c261a5b6b1628c107c/src/manipulation.js#L182
|
|
54
|
+
*
|
|
55
|
+
* NOTE:
|
|
56
|
+
* `cleanData()` will also invoke the AngularJS `$destroy` DOM event on the element:
|
|
57
|
+
* https://github.com/angular/angular.js/blob/2e72ea13fa98bebf6ed4b5e3c45eaf5f990ed16f/src/Angular.js#L1932-L1945
|
|
58
|
+
*
|
|
59
|
+
* @param node The DOM node whose data needs to be cleaned.
|
|
60
|
+
*/
|
|
61
|
+
function cleanData(node) {
|
|
62
|
+
element.cleanData([node]);
|
|
63
|
+
if (isParentNode(node)) {
|
|
64
|
+
element.cleanData(node.querySelectorAll('*'));
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
function controllerKey(name) {
|
|
68
|
+
return '$' + name + 'Controller';
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* Destroy an AngularJS app given the app `$injector`.
|
|
72
|
+
*
|
|
73
|
+
* NOTE: Destroying an app is not officially supported by AngularJS, but try to do our best by
|
|
74
|
+
* destroying `$rootScope` and clean the jqLite/jQuery data on `$rootElement` and all
|
|
75
|
+
* descendants.
|
|
76
|
+
*
|
|
77
|
+
* @param $injector The `$injector` of the AngularJS app to destroy.
|
|
78
|
+
*/
|
|
79
|
+
function destroyApp($injector) {
|
|
80
|
+
const $rootElement = $injector.get($ROOT_ELEMENT);
|
|
81
|
+
const $rootScope = $injector.get($ROOT_SCOPE);
|
|
82
|
+
$rootScope.$destroy();
|
|
83
|
+
cleanData($rootElement[0]);
|
|
84
|
+
}
|
|
85
|
+
function directiveNormalize(name) {
|
|
86
|
+
return name
|
|
87
|
+
.replace(DIRECTIVE_PREFIX_REGEXP, '')
|
|
88
|
+
.replace(DIRECTIVE_SPECIAL_CHARS_REGEXP, (_, letter) => letter.toUpperCase());
|
|
89
|
+
}
|
|
90
|
+
function getTypeName(type) {
|
|
91
|
+
// Return the name of the type or the first line of its stringified version.
|
|
92
|
+
return type.overriddenName || type.name || type.toString().split('\n')[0];
|
|
93
|
+
}
|
|
94
|
+
function getDowngradedModuleCount($injector) {
|
|
95
|
+
return $injector.has(DOWNGRADED_MODULE_COUNT_KEY)
|
|
96
|
+
? $injector.get(DOWNGRADED_MODULE_COUNT_KEY)
|
|
97
|
+
: 0;
|
|
98
|
+
}
|
|
99
|
+
function getUpgradeAppType($injector) {
|
|
100
|
+
return $injector.has(UPGRADE_APP_TYPE_KEY)
|
|
101
|
+
? $injector.get(UPGRADE_APP_TYPE_KEY)
|
|
102
|
+
: 0 /* UpgradeAppType.None */;
|
|
103
|
+
}
|
|
104
|
+
function isFunction(value) {
|
|
105
|
+
return typeof value === 'function';
|
|
106
|
+
}
|
|
107
|
+
function isNgModuleType(value) {
|
|
108
|
+
// NgModule class should have the `ɵmod` static property attached by AOT or JIT compiler.
|
|
109
|
+
return isFunction(value) && !!value[_NG_MOD_DEF];
|
|
110
|
+
}
|
|
111
|
+
function isParentNode(node) {
|
|
112
|
+
return isFunction(node.querySelectorAll);
|
|
113
|
+
}
|
|
114
|
+
function validateInjectionKey($injector, downgradedModule, injectionKey, attemptedAction) {
|
|
115
|
+
const upgradeAppType = getUpgradeAppType($injector);
|
|
116
|
+
const downgradedModuleCount = getDowngradedModuleCount($injector);
|
|
117
|
+
// Check for common errors.
|
|
118
|
+
switch (upgradeAppType) {
|
|
119
|
+
case 1 /* UpgradeAppType.Dynamic */:
|
|
120
|
+
case 2 /* UpgradeAppType.Static */:
|
|
121
|
+
if (downgradedModule) {
|
|
122
|
+
throw new Error(`Error while ${attemptedAction}: 'downgradedModule' unexpectedly specified.\n` +
|
|
123
|
+
"You should not specify a value for 'downgradedModule', unless you are downgrading " +
|
|
124
|
+
"more than one Angular module (via 'downgradeModule()').");
|
|
125
|
+
}
|
|
126
|
+
break;
|
|
127
|
+
case 3 /* UpgradeAppType.Lite */:
|
|
128
|
+
if (!downgradedModule && downgradedModuleCount >= 2) {
|
|
129
|
+
throw new Error(`Error while ${attemptedAction}: 'downgradedModule' not specified.\n` +
|
|
130
|
+
'This application contains more than one downgraded Angular module, thus you need to ' +
|
|
131
|
+
"always specify 'downgradedModule' when downgrading components and injectables.");
|
|
132
|
+
}
|
|
133
|
+
if (!$injector.has(injectionKey)) {
|
|
134
|
+
throw new Error(`Error while ${attemptedAction}: Unable to find the specified downgraded module.\n` +
|
|
135
|
+
'Did you forget to downgrade an Angular module or include it in the AngularJS ' +
|
|
136
|
+
'application?');
|
|
137
|
+
}
|
|
138
|
+
break;
|
|
139
|
+
default:
|
|
140
|
+
throw new Error(`Error while ${attemptedAction}: Not a valid '@angular/upgrade' application.\n` +
|
|
141
|
+
'Did you forget to downgrade an Angular module or include it in the AngularJS ' +
|
|
142
|
+
'application?');
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
class Deferred {
|
|
146
|
+
promise;
|
|
147
|
+
resolve;
|
|
148
|
+
reject;
|
|
149
|
+
constructor() {
|
|
150
|
+
this.promise = new Promise((res, rej) => {
|
|
151
|
+
this.resolve = res;
|
|
152
|
+
this.reject = rej;
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
/**
|
|
157
|
+
* @return Whether the passed-in component implements the subset of the
|
|
158
|
+
* `ControlValueAccessor` interface needed for AngularJS `ng-model`
|
|
159
|
+
* compatibility.
|
|
160
|
+
*/
|
|
161
|
+
function supportsNgModel(component) {
|
|
162
|
+
return (typeof component.writeValue === 'function' && typeof component.registerOnChange === 'function');
|
|
163
|
+
}
|
|
164
|
+
/**
|
|
165
|
+
* Glue the AngularJS `NgModelController` (if it exists) to the component
|
|
166
|
+
* (if it implements the needed subset of the `ControlValueAccessor` interface).
|
|
167
|
+
*/
|
|
168
|
+
function hookupNgModel(ngModel, component) {
|
|
169
|
+
if (ngModel && supportsNgModel(component)) {
|
|
170
|
+
ngModel.$render = () => {
|
|
171
|
+
component.writeValue(ngModel.$viewValue);
|
|
172
|
+
};
|
|
173
|
+
component.registerOnChange(ngModel.$setViewValue.bind(ngModel));
|
|
174
|
+
if (typeof component.registerOnTouched === 'function') {
|
|
175
|
+
component.registerOnTouched(ngModel.$setTouched.bind(ngModel));
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
/**
|
|
180
|
+
* Test two values for strict equality, accounting for the fact that `NaN !== NaN`.
|
|
181
|
+
*/
|
|
182
|
+
function strictEquals(val1, val2) {
|
|
183
|
+
return val1 === val2 || (val1 !== val1 && val2 !== val2);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
var util = /*#__PURE__*/Object.freeze({
|
|
187
|
+
__proto__: null,
|
|
188
|
+
Deferred: Deferred,
|
|
189
|
+
cleanData: cleanData,
|
|
190
|
+
controllerKey: controllerKey,
|
|
191
|
+
destroyApp: destroyApp,
|
|
192
|
+
directiveNormalize: directiveNormalize,
|
|
193
|
+
getDowngradedModuleCount: getDowngradedModuleCount,
|
|
194
|
+
getTypeName: getTypeName,
|
|
195
|
+
getUpgradeAppType: getUpgradeAppType,
|
|
196
|
+
hookupNgModel: hookupNgModel,
|
|
197
|
+
isFunction: isFunction,
|
|
198
|
+
isNgModuleType: isNgModuleType,
|
|
199
|
+
onError: onError,
|
|
200
|
+
strictEquals: strictEquals,
|
|
201
|
+
validateInjectionKey: validateInjectionKey
|
|
202
|
+
});
|
|
203
|
+
|
|
204
|
+
const INITIAL_VALUE$1 = {
|
|
205
|
+
__UNINITIALIZED__: true,
|
|
206
|
+
};
|
|
207
|
+
class DowngradeComponentAdapter {
|
|
208
|
+
element;
|
|
209
|
+
attrs;
|
|
210
|
+
scope;
|
|
211
|
+
ngModel;
|
|
212
|
+
parentInjector;
|
|
213
|
+
$compile;
|
|
214
|
+
$parse;
|
|
215
|
+
componentFactory;
|
|
216
|
+
wrapCallback;
|
|
217
|
+
unsafelyOverwriteSignalInputs;
|
|
218
|
+
implementsOnChanges = false;
|
|
219
|
+
inputChangeCount = 0;
|
|
220
|
+
inputChanges = {};
|
|
221
|
+
componentScope;
|
|
222
|
+
constructor(element, attrs, scope, ngModel, parentInjector, $compile, $parse, componentFactory, wrapCallback, unsafelyOverwriteSignalInputs) {
|
|
223
|
+
this.element = element;
|
|
224
|
+
this.attrs = attrs;
|
|
225
|
+
this.scope = scope;
|
|
226
|
+
this.ngModel = ngModel;
|
|
227
|
+
this.parentInjector = parentInjector;
|
|
228
|
+
this.$compile = $compile;
|
|
229
|
+
this.$parse = $parse;
|
|
230
|
+
this.componentFactory = componentFactory;
|
|
231
|
+
this.wrapCallback = wrapCallback;
|
|
232
|
+
this.unsafelyOverwriteSignalInputs = unsafelyOverwriteSignalInputs;
|
|
233
|
+
this.componentScope = scope.$new();
|
|
234
|
+
}
|
|
235
|
+
compileContents() {
|
|
236
|
+
const compiledProjectableNodes = [];
|
|
237
|
+
const projectableNodes = this.groupProjectableNodes();
|
|
238
|
+
const linkFns = projectableNodes.map((nodes) => this.$compile(nodes));
|
|
239
|
+
this.element.empty();
|
|
240
|
+
linkFns.forEach((linkFn) => {
|
|
241
|
+
linkFn(this.scope, (clone) => {
|
|
242
|
+
compiledProjectableNodes.push(clone);
|
|
243
|
+
this.element.append(clone);
|
|
244
|
+
});
|
|
245
|
+
});
|
|
246
|
+
return compiledProjectableNodes;
|
|
247
|
+
}
|
|
248
|
+
createComponentAndSetup(projectableNodes, manuallyAttachView = false, propagateDigest = true) {
|
|
249
|
+
const component = this.createComponent(projectableNodes);
|
|
250
|
+
this.setupInputs(manuallyAttachView, propagateDigest, component);
|
|
251
|
+
this.setupOutputs(component.componentRef);
|
|
252
|
+
this.registerCleanup(component.componentRef);
|
|
253
|
+
return component.componentRef;
|
|
254
|
+
}
|
|
255
|
+
createComponent(projectableNodes) {
|
|
256
|
+
const providers = [{ provide: $SCOPE, useValue: this.componentScope }];
|
|
257
|
+
const childInjector = Injector.create({
|
|
258
|
+
providers: providers,
|
|
259
|
+
parent: this.parentInjector,
|
|
260
|
+
name: 'DowngradeComponentAdapter',
|
|
261
|
+
});
|
|
262
|
+
const componentRef = this.componentFactory.create(childInjector, projectableNodes, this.element[0]);
|
|
263
|
+
const viewChangeDetector = componentRef.injector.get(ChangeDetectorRef);
|
|
264
|
+
const changeDetector = componentRef.changeDetectorRef;
|
|
265
|
+
// testability hook is commonly added during component bootstrap in
|
|
266
|
+
// packages/core/src/application_ref.bootstrap()
|
|
267
|
+
// in downgraded application, component creation will take place here as well as adding the
|
|
268
|
+
// testability hook.
|
|
269
|
+
const testability = componentRef.injector.get(Testability, null);
|
|
270
|
+
if (testability) {
|
|
271
|
+
componentRef.injector
|
|
272
|
+
.get(TestabilityRegistry)
|
|
273
|
+
.registerApplication(componentRef.location.nativeElement, testability);
|
|
274
|
+
}
|
|
275
|
+
hookupNgModel(this.ngModel, componentRef.instance);
|
|
276
|
+
return { viewChangeDetector, componentRef, changeDetector };
|
|
277
|
+
}
|
|
278
|
+
setupInputs(manuallyAttachView, propagateDigest = true, { componentRef, changeDetector, viewChangeDetector }) {
|
|
279
|
+
const attrs = this.attrs;
|
|
280
|
+
const inputs = this.componentFactory.inputs || [];
|
|
281
|
+
for (const input of inputs) {
|
|
282
|
+
const inputBinding = new PropertyBinding(input.propName, input.templateName);
|
|
283
|
+
let expr = null;
|
|
284
|
+
if (attrs.hasOwnProperty(inputBinding.attr)) {
|
|
285
|
+
const observeFn = ((prop, isSignal) => {
|
|
286
|
+
let prevValue = INITIAL_VALUE$1;
|
|
287
|
+
return (currValue) => {
|
|
288
|
+
// Initially, both `$observe()` and `$watch()` will call this function.
|
|
289
|
+
if (!strictEquals(prevValue, currValue)) {
|
|
290
|
+
if (prevValue === INITIAL_VALUE$1) {
|
|
291
|
+
prevValue = currValue;
|
|
292
|
+
}
|
|
293
|
+
this.updateInput(componentRef, prop, prevValue, currValue, isSignal);
|
|
294
|
+
prevValue = currValue;
|
|
295
|
+
}
|
|
296
|
+
};
|
|
297
|
+
})(inputBinding.prop, input.isSignal);
|
|
298
|
+
attrs.$observe(inputBinding.attr, observeFn);
|
|
299
|
+
// Use `$watch()` (in addition to `$observe()`) in order to initialize the input in time
|
|
300
|
+
// for `ngOnChanges()`. This is necessary if we are already in a `$digest`, which means that
|
|
301
|
+
// `ngOnChanges()` (which is called by a watcher) will run before the `$observe()` callback.
|
|
302
|
+
let unwatch = this.componentScope.$watch(() => {
|
|
303
|
+
unwatch();
|
|
304
|
+
unwatch = null;
|
|
305
|
+
observeFn(attrs[inputBinding.attr]);
|
|
306
|
+
});
|
|
307
|
+
}
|
|
308
|
+
else if (attrs.hasOwnProperty(inputBinding.bindAttr)) {
|
|
309
|
+
expr = attrs[inputBinding.bindAttr];
|
|
310
|
+
}
|
|
311
|
+
else if (attrs.hasOwnProperty(inputBinding.bracketAttr)) {
|
|
312
|
+
expr = attrs[inputBinding.bracketAttr];
|
|
313
|
+
}
|
|
314
|
+
else if (attrs.hasOwnProperty(inputBinding.bindonAttr)) {
|
|
315
|
+
expr = attrs[inputBinding.bindonAttr];
|
|
316
|
+
}
|
|
317
|
+
else if (attrs.hasOwnProperty(inputBinding.bracketParenAttr)) {
|
|
318
|
+
expr = attrs[inputBinding.bracketParenAttr];
|
|
319
|
+
}
|
|
320
|
+
if (expr != null) {
|
|
321
|
+
const watchFn = ((prop, isSignal) => (currValue, prevValue) => this.updateInput(componentRef, prop, prevValue, currValue, isSignal))(inputBinding.prop, input.isSignal);
|
|
322
|
+
this.componentScope.$watch(expr, watchFn);
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
// Invoke `ngOnChanges()` and Change Detection (when necessary)
|
|
326
|
+
const detectChanges = () => changeDetector.detectChanges();
|
|
327
|
+
const prototype = this.componentFactory.componentType.prototype;
|
|
328
|
+
this.implementsOnChanges = !!(prototype && prototype.ngOnChanges);
|
|
329
|
+
this.componentScope.$watch(() => this.inputChangeCount, this.wrapCallback(() => {
|
|
330
|
+
// Invoke `ngOnChanges()`
|
|
331
|
+
if (this.implementsOnChanges) {
|
|
332
|
+
const inputChanges = this.inputChanges;
|
|
333
|
+
this.inputChanges = {};
|
|
334
|
+
componentRef.instance.ngOnChanges(inputChanges);
|
|
335
|
+
}
|
|
336
|
+
viewChangeDetector.markForCheck();
|
|
337
|
+
// If opted out of propagating digests, invoke change detection when inputs change.
|
|
338
|
+
if (!propagateDigest) {
|
|
339
|
+
detectChanges();
|
|
340
|
+
}
|
|
341
|
+
}));
|
|
342
|
+
// If not opted out of propagating digests, invoke change detection on every digest
|
|
343
|
+
if (propagateDigest) {
|
|
344
|
+
this.componentScope.$watch(this.wrapCallback(detectChanges));
|
|
345
|
+
}
|
|
346
|
+
// If necessary, attach the view so that it will be dirty-checked.
|
|
347
|
+
// (Allow time for the initial input values to be set and `ngOnChanges()` to be called.)
|
|
348
|
+
if (manuallyAttachView || !propagateDigest) {
|
|
349
|
+
let unwatch = this.componentScope.$watch(() => {
|
|
350
|
+
unwatch();
|
|
351
|
+
unwatch = null;
|
|
352
|
+
const appRef = this.parentInjector.get(ApplicationRef);
|
|
353
|
+
appRef.attachView(componentRef.hostView);
|
|
354
|
+
});
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
setupOutputs(componentRef) {
|
|
358
|
+
const attrs = this.attrs;
|
|
359
|
+
const outputs = this.componentFactory.outputs || [];
|
|
360
|
+
for (const output of outputs) {
|
|
361
|
+
const outputBindings = new PropertyBinding(output.propName, output.templateName);
|
|
362
|
+
const bindonAttr = outputBindings.bindonAttr.substring(0, outputBindings.bindonAttr.length - 6);
|
|
363
|
+
const bracketParenAttr = `[(${outputBindings.bracketParenAttr.substring(2, outputBindings.bracketParenAttr.length - 8)})]`;
|
|
364
|
+
// order below is important - first update bindings then evaluate expressions
|
|
365
|
+
if (attrs.hasOwnProperty(bindonAttr)) {
|
|
366
|
+
this.subscribeToOutput(componentRef, outputBindings, attrs[bindonAttr], true);
|
|
367
|
+
}
|
|
368
|
+
if (attrs.hasOwnProperty(bracketParenAttr)) {
|
|
369
|
+
this.subscribeToOutput(componentRef, outputBindings, attrs[bracketParenAttr], true);
|
|
370
|
+
}
|
|
371
|
+
if (attrs.hasOwnProperty(outputBindings.onAttr)) {
|
|
372
|
+
this.subscribeToOutput(componentRef, outputBindings, attrs[outputBindings.onAttr]);
|
|
373
|
+
}
|
|
374
|
+
if (attrs.hasOwnProperty(outputBindings.parenAttr)) {
|
|
375
|
+
this.subscribeToOutput(componentRef, outputBindings, attrs[outputBindings.parenAttr]);
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
subscribeToOutput(componentRef, output, expr, isAssignment = false) {
|
|
380
|
+
const getter = this.$parse(expr);
|
|
381
|
+
const setter = getter.assign;
|
|
382
|
+
if (isAssignment && !setter) {
|
|
383
|
+
throw new Error(`Expression '${expr}' is not assignable!`);
|
|
384
|
+
}
|
|
385
|
+
const emitter = componentRef.instance[output.prop];
|
|
386
|
+
if (emitter) {
|
|
387
|
+
const subscription = emitter.subscribe(isAssignment
|
|
388
|
+
? (v) => setter(this.scope, v)
|
|
389
|
+
: (v) => getter(this.scope, { '$event': v }));
|
|
390
|
+
componentRef.onDestroy(() => subscription.unsubscribe());
|
|
391
|
+
}
|
|
392
|
+
else {
|
|
393
|
+
throw new Error(`Missing emitter '${output.prop}' on component '${getTypeName(this.componentFactory.componentType)}'!`);
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
registerCleanup(componentRef) {
|
|
397
|
+
const testabilityRegistry = componentRef.injector.get(TestabilityRegistry);
|
|
398
|
+
const destroyComponentRef = this.wrapCallback(() => componentRef.destroy());
|
|
399
|
+
let destroyed = false;
|
|
400
|
+
this.element.on('$destroy', () => {
|
|
401
|
+
// The `$destroy` event may have been triggered by the `cleanData()` call in the
|
|
402
|
+
// `componentScope` `$destroy` handler below. In that case, we don't want to call
|
|
403
|
+
// `componentScope.$destroy()` again.
|
|
404
|
+
if (!destroyed)
|
|
405
|
+
this.componentScope.$destroy();
|
|
406
|
+
});
|
|
407
|
+
this.componentScope.$on('$destroy', () => {
|
|
408
|
+
if (!destroyed) {
|
|
409
|
+
destroyed = true;
|
|
410
|
+
testabilityRegistry.unregisterApplication(componentRef.location.nativeElement);
|
|
411
|
+
// The `componentScope` might be getting destroyed, because an ancestor element is being
|
|
412
|
+
// removed/destroyed. If that is the case, jqLite/jQuery would normally invoke `cleanData()`
|
|
413
|
+
// on the removed element and all descendants.
|
|
414
|
+
// https://github.com/angular/angular.js/blob/2e72ea13fa98bebf6ed4b5e3c45eaf5f990ed16f/src/jqLite.js#L349-L355
|
|
415
|
+
// https://github.com/jquery/jquery/blob/6984d1747623dbc5e87fd6c261a5b6b1628c107c/src/manipulation.js#L182
|
|
416
|
+
//
|
|
417
|
+
// Here, however, `destroyComponentRef()` may under some circumstances remove the element
|
|
418
|
+
// from the DOM and therefore it will no longer be a descendant of the removed element when
|
|
419
|
+
// `cleanData()` is called. This would result in a memory leak, because the element's data
|
|
420
|
+
// and event handlers (and all objects directly or indirectly referenced by them) would be
|
|
421
|
+
// retained.
|
|
422
|
+
//
|
|
423
|
+
// To ensure the element is always properly cleaned up, we manually call `cleanData()` on
|
|
424
|
+
// this element and its descendants before destroying the `ComponentRef`.
|
|
425
|
+
cleanData(this.element[0]);
|
|
426
|
+
destroyComponentRef();
|
|
427
|
+
}
|
|
428
|
+
});
|
|
429
|
+
}
|
|
430
|
+
updateInput(componentRef, prop, prevValue, currValue, isSignal) {
|
|
431
|
+
if (this.implementsOnChanges) {
|
|
432
|
+
this.inputChanges[prop] = new SimpleChange(prevValue, currValue, prevValue === currValue);
|
|
433
|
+
}
|
|
434
|
+
this.inputChangeCount++;
|
|
435
|
+
if (isSignal && !this.unsafelyOverwriteSignalInputs) {
|
|
436
|
+
const node = componentRef.instance[prop][_SIGNAL];
|
|
437
|
+
node.applyValueToInputSignal(node, currValue);
|
|
438
|
+
}
|
|
439
|
+
else {
|
|
440
|
+
componentRef.instance[prop] = currValue;
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
groupProjectableNodes() {
|
|
444
|
+
let ngContentSelectors = this.componentFactory.ngContentSelectors;
|
|
445
|
+
return groupNodesBySelector(ngContentSelectors, this.element.contents());
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
/**
|
|
449
|
+
* Group a set of DOM nodes into `ngContent` groups, based on the given content selectors.
|
|
450
|
+
*/
|
|
451
|
+
function groupNodesBySelector(ngContentSelectors, nodes) {
|
|
452
|
+
const projectableNodes = [];
|
|
453
|
+
for (let i = 0, ii = ngContentSelectors.length; i < ii; ++i) {
|
|
454
|
+
projectableNodes[i] = [];
|
|
455
|
+
}
|
|
456
|
+
for (let j = 0, jj = nodes.length; j < jj; ++j) {
|
|
457
|
+
const node = nodes[j];
|
|
458
|
+
const ngContentIndex = findMatchingNgContentIndex(node, ngContentSelectors);
|
|
459
|
+
if (ngContentIndex != null) {
|
|
460
|
+
projectableNodes[ngContentIndex].push(node);
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
return projectableNodes;
|
|
464
|
+
}
|
|
465
|
+
function findMatchingNgContentIndex(element, ngContentSelectors) {
|
|
466
|
+
const ngContentIndices = [];
|
|
467
|
+
let wildcardNgContentIndex = -1;
|
|
468
|
+
for (let i = 0; i < ngContentSelectors.length; i++) {
|
|
469
|
+
const selector = ngContentSelectors[i];
|
|
470
|
+
if (selector === '*') {
|
|
471
|
+
wildcardNgContentIndex = i;
|
|
472
|
+
}
|
|
473
|
+
else {
|
|
474
|
+
if (matchesSelector(element, selector)) {
|
|
475
|
+
ngContentIndices.push(i);
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
ngContentIndices.sort();
|
|
480
|
+
if (wildcardNgContentIndex !== -1) {
|
|
481
|
+
ngContentIndices.push(wildcardNgContentIndex);
|
|
482
|
+
}
|
|
483
|
+
return ngContentIndices.length ? ngContentIndices[0] : null;
|
|
484
|
+
}
|
|
485
|
+
function matchesSelector(el, selector) {
|
|
486
|
+
const elProto = Element.prototype;
|
|
487
|
+
return el.nodeType === Node.ELEMENT_NODE
|
|
488
|
+
? // matches is supported by all browsers from 2014 onwards except non-chromium edge
|
|
489
|
+
(elProto.matches ?? elProto.msMatchesSelector).call(el, selector)
|
|
490
|
+
: false;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
function isThenable(obj) {
|
|
494
|
+
return !!obj && isFunction(obj.then);
|
|
495
|
+
}
|
|
496
|
+
/**
|
|
497
|
+
* Synchronous, promise-like object.
|
|
498
|
+
*/
|
|
499
|
+
class SyncPromise {
|
|
500
|
+
value;
|
|
501
|
+
resolved = false;
|
|
502
|
+
callbacks = [];
|
|
503
|
+
static all(valuesOrPromises) {
|
|
504
|
+
const aggrPromise = new SyncPromise();
|
|
505
|
+
let resolvedCount = 0;
|
|
506
|
+
const results = [];
|
|
507
|
+
const resolve = (idx, value) => {
|
|
508
|
+
results[idx] = value;
|
|
509
|
+
if (++resolvedCount === valuesOrPromises.length)
|
|
510
|
+
aggrPromise.resolve(results);
|
|
511
|
+
};
|
|
512
|
+
valuesOrPromises.forEach((p, idx) => {
|
|
513
|
+
if (isThenable(p)) {
|
|
514
|
+
p.then((v) => resolve(idx, v));
|
|
515
|
+
}
|
|
516
|
+
else {
|
|
517
|
+
resolve(idx, p);
|
|
518
|
+
}
|
|
519
|
+
});
|
|
520
|
+
return aggrPromise;
|
|
521
|
+
}
|
|
522
|
+
resolve(value) {
|
|
523
|
+
// Do nothing, if already resolved.
|
|
524
|
+
if (this.resolved)
|
|
525
|
+
return;
|
|
526
|
+
this.value = value;
|
|
527
|
+
this.resolved = true;
|
|
528
|
+
// Run the queued callbacks.
|
|
529
|
+
this.callbacks.forEach((callback) => callback(value));
|
|
530
|
+
this.callbacks.length = 0;
|
|
531
|
+
}
|
|
532
|
+
then(callback) {
|
|
533
|
+
if (this.resolved) {
|
|
534
|
+
callback(this.value);
|
|
535
|
+
}
|
|
536
|
+
else {
|
|
537
|
+
this.callbacks.push(callback);
|
|
538
|
+
}
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
/**
|
|
543
|
+
* @description
|
|
544
|
+
*
|
|
545
|
+
* A helper function that allows an Angular component to be used from AngularJS.
|
|
546
|
+
*
|
|
547
|
+
* *Part of the [upgrade/static](api?query=upgrade%2Fstatic)
|
|
548
|
+
* library for hybrid upgrade apps that support AOT compilation*
|
|
549
|
+
*
|
|
550
|
+
* This helper function returns a factory function to be used for registering
|
|
551
|
+
* an AngularJS wrapper directive for "downgrading" an Angular component.
|
|
552
|
+
*
|
|
553
|
+
* @usageNotes
|
|
554
|
+
* ### Examples
|
|
555
|
+
*
|
|
556
|
+
* Let's assume that you have an Angular component called `ng2Heroes` that needs
|
|
557
|
+
* to be made available in AngularJS templates.
|
|
558
|
+
*
|
|
559
|
+
* {@example upgrade/static/ts/full/module.ts region="ng2-heroes"}
|
|
560
|
+
*
|
|
561
|
+
* We must create an AngularJS [directive](https://docs.angularjs.org/guide/directive)
|
|
562
|
+
* that will make this Angular component available inside AngularJS templates.
|
|
563
|
+
* The `downgradeComponent()` function returns a factory function that we
|
|
564
|
+
* can use to define the AngularJS directive that wraps the "downgraded" component.
|
|
565
|
+
*
|
|
566
|
+
* {@example upgrade/static/ts/full/module.ts region="ng2-heroes-wrapper"}
|
|
567
|
+
*
|
|
568
|
+
* For more details and examples on downgrading Angular components to AngularJS components please
|
|
569
|
+
* visit the [Upgrade guide](https://angular.io/guide/upgrade#using-angular-components-from-angularjs-code).
|
|
570
|
+
*
|
|
571
|
+
* @param info contains information about the Component that is being downgraded:
|
|
572
|
+
*
|
|
573
|
+
* - `component: Type<any>`: The type of the Component that will be downgraded
|
|
574
|
+
* - `downgradedModule?: string`: The name of the downgraded module (if any) that the component
|
|
575
|
+
* "belongs to", as returned by a call to `downgradeModule()`. It is the module, whose
|
|
576
|
+
* corresponding Angular module will be bootstrapped, when the component needs to be instantiated.
|
|
577
|
+
* <br />
|
|
578
|
+
* (This option is only necessary when using `downgradeModule()` to downgrade more than one
|
|
579
|
+
* Angular module.)
|
|
580
|
+
* - `propagateDigest?: boolean`: Whether to perform {@link /api/core/ChangeDetectorRef#detectChanges detectChanges} on the
|
|
581
|
+
* component on every {@link https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest $digest}.
|
|
582
|
+
* If set to `false`, change detection will still be performed when any of the component's inputs changes.
|
|
583
|
+
* (Default: true)
|
|
584
|
+
*
|
|
585
|
+
* @returns a factory function that can be used to register the component in an
|
|
586
|
+
* AngularJS module.
|
|
587
|
+
*
|
|
588
|
+
* @publicApi
|
|
589
|
+
*/
|
|
590
|
+
function downgradeComponent(info) {
|
|
591
|
+
const directiveFactory = function ($compile, $injector, $parse) {
|
|
592
|
+
const unsafelyOverwriteSignalInputs = info.unsafelyOverwriteSignalInputs ?? false;
|
|
593
|
+
// When using `downgradeModule()`, we need to handle certain things specially. For example:
|
|
594
|
+
// - We always need to attach the component view to the `ApplicationRef` for it to be
|
|
595
|
+
// dirty-checked.
|
|
596
|
+
// - We need to ensure callbacks to Angular APIs (e.g. change detection) are run inside the
|
|
597
|
+
// Angular zone.
|
|
598
|
+
// NOTE: This is not needed, when using `UpgradeModule`, because `$digest()` will be run
|
|
599
|
+
// inside the Angular zone (except if explicitly escaped, in which case we shouldn't
|
|
600
|
+
// force it back in).
|
|
601
|
+
const isNgUpgradeLite = getUpgradeAppType($injector) === 3 /* UpgradeAppType.Lite */;
|
|
602
|
+
const wrapCallback = !isNgUpgradeLite
|
|
603
|
+
? (cb) => cb
|
|
604
|
+
: (cb) => () => (NgZone.isInAngularZone() ? cb() : ngZone.run(cb));
|
|
605
|
+
let ngZone;
|
|
606
|
+
// When downgrading multiple modules, special handling is needed wrt injectors.
|
|
607
|
+
const hasMultipleDowngradedModules = isNgUpgradeLite && getDowngradedModuleCount($injector) > 1;
|
|
608
|
+
return {
|
|
609
|
+
restrict: 'E',
|
|
610
|
+
terminal: true,
|
|
611
|
+
require: [REQUIRE_INJECTOR, REQUIRE_NG_MODEL],
|
|
612
|
+
// Controller needs to be set so that `angular-component-router.js` (from beta Angular 2)
|
|
613
|
+
// configuration properties can be made available. See:
|
|
614
|
+
// See G3: javascript/angular2/angular1_router_lib.js
|
|
615
|
+
// https://github.com/angular/angular.js/blob/47bf11ee94664367a26ed8c91b9b586d3dd420f5/src/ng/compile.js#L1670-L1691.
|
|
616
|
+
controller: function () { },
|
|
617
|
+
link: (scope, element, attrs, required) => {
|
|
618
|
+
// We might have to compile the contents asynchronously, because this might have been
|
|
619
|
+
// triggered by `UpgradeNg1ComponentAdapterBuilder`, before the Angular templates have
|
|
620
|
+
// been compiled.
|
|
621
|
+
const ngModel = required[1];
|
|
622
|
+
const parentInjector = required[0];
|
|
623
|
+
let moduleInjector = undefined;
|
|
624
|
+
let ranAsync = false;
|
|
625
|
+
if (!parentInjector || hasMultipleDowngradedModules) {
|
|
626
|
+
const downgradedModule = info.downgradedModule || '';
|
|
627
|
+
const lazyModuleRefKey = `${LAZY_MODULE_REF}${downgradedModule}`;
|
|
628
|
+
const attemptedAction = `instantiating component '${getTypeName(info.component)}'`;
|
|
629
|
+
validateInjectionKey($injector, downgradedModule, lazyModuleRefKey, attemptedAction);
|
|
630
|
+
const lazyModuleRef = $injector.get(lazyModuleRefKey);
|
|
631
|
+
moduleInjector = lazyModuleRef.injector ?? lazyModuleRef.promise;
|
|
632
|
+
}
|
|
633
|
+
// Notes:
|
|
634
|
+
//
|
|
635
|
+
// There are two injectors: `finalModuleInjector` and `finalParentInjector` (they might be
|
|
636
|
+
// the same instance, but that is irrelevant):
|
|
637
|
+
// - `finalModuleInjector` is used to retrieve `ComponentFactoryResolver`, thus it must be
|
|
638
|
+
// on the same tree as the `NgModule` that declares this downgraded component.
|
|
639
|
+
// - `finalParentInjector` is used for all other injection purposes.
|
|
640
|
+
// (Note that Angular knows to only traverse the component-tree part of that injector,
|
|
641
|
+
// when looking for an injectable and then switch to the module injector.)
|
|
642
|
+
//
|
|
643
|
+
// There are basically three cases:
|
|
644
|
+
// - If there is no parent component (thus no `parentInjector`), we bootstrap the downgraded
|
|
645
|
+
// `NgModule` and use its injector as both `finalModuleInjector` and
|
|
646
|
+
// `finalParentInjector`.
|
|
647
|
+
// - If there is a parent component (and thus a `parentInjector`) and we are sure that it
|
|
648
|
+
// belongs to the same `NgModule` as this downgraded component (e.g. because there is only
|
|
649
|
+
// one downgraded module, we use that `parentInjector` as both `finalModuleInjector` and
|
|
650
|
+
// `finalParentInjector`.
|
|
651
|
+
// - If there is a parent component, but it may belong to a different `NgModule`, then we
|
|
652
|
+
// use the `parentInjector` as `finalParentInjector` and this downgraded component's
|
|
653
|
+
// declaring `NgModule`'s injector as `finalModuleInjector`.
|
|
654
|
+
// Note 1: If the `NgModule` is already bootstrapped, we just get its injector (we don't
|
|
655
|
+
// bootstrap again).
|
|
656
|
+
// Note 2: It is possible that (while there are multiple downgraded modules) this
|
|
657
|
+
// downgraded component and its parent component both belong to the same NgModule.
|
|
658
|
+
// In that case, we could have used the `parentInjector` as both
|
|
659
|
+
// `finalModuleInjector` and `finalParentInjector`, but (for simplicity) we are
|
|
660
|
+
// treating this case as if they belong to different `NgModule`s. That doesn't
|
|
661
|
+
// really affect anything, since `parentInjector` has `moduleInjector` as ancestor
|
|
662
|
+
// and trying to resolve `ComponentFactoryResolver` from either one will return
|
|
663
|
+
// the same instance.
|
|
664
|
+
// If there is a parent component, use its injector as parent injector.
|
|
665
|
+
// If this is a "top-level" Angular component, use the module injector.
|
|
666
|
+
const finalParentInjector = parentInjector || moduleInjector;
|
|
667
|
+
// If this is a "top-level" Angular component or the parent component may belong to a
|
|
668
|
+
// different `NgModule`, use the module injector for module-specific dependencies.
|
|
669
|
+
// If there is a parent component that belongs to the same `NgModule`, use its injector.
|
|
670
|
+
const finalModuleInjector = moduleInjector || parentInjector;
|
|
671
|
+
const doDowngrade = (injector, moduleInjector) => {
|
|
672
|
+
// Retrieve `ComponentFactoryResolver` from the injector tied to the `NgModule` this
|
|
673
|
+
// component belongs to.
|
|
674
|
+
const componentFactoryResolver = moduleInjector.get(ComponentFactoryResolver);
|
|
675
|
+
const componentFactory = componentFactoryResolver.resolveComponentFactory(info.component);
|
|
676
|
+
if (!componentFactory) {
|
|
677
|
+
throw new Error(`Expecting ComponentFactory for: ${getTypeName(info.component)}`);
|
|
678
|
+
}
|
|
679
|
+
const injectorPromise = new ParentInjectorPromise(element);
|
|
680
|
+
const facade = new DowngradeComponentAdapter(element, attrs, scope, ngModel, injector, $compile, $parse, componentFactory, wrapCallback, unsafelyOverwriteSignalInputs);
|
|
681
|
+
const projectableNodes = facade.compileContents();
|
|
682
|
+
const componentRef = facade.createComponentAndSetup(projectableNodes, isNgUpgradeLite, info.propagateDigest);
|
|
683
|
+
injectorPromise.resolve(componentRef.injector);
|
|
684
|
+
if (ranAsync) {
|
|
685
|
+
// If this is run async, it is possible that it is not run inside a
|
|
686
|
+
// digest and initial input values will not be detected.
|
|
687
|
+
scope.$evalAsync(() => { });
|
|
688
|
+
}
|
|
689
|
+
};
|
|
690
|
+
const downgradeFn = !isNgUpgradeLite
|
|
691
|
+
? doDowngrade
|
|
692
|
+
: (pInjector, mInjector) => {
|
|
693
|
+
if (!ngZone) {
|
|
694
|
+
ngZone = pInjector.get(NgZone);
|
|
695
|
+
}
|
|
696
|
+
wrapCallback(() => doDowngrade(pInjector, mInjector))();
|
|
697
|
+
};
|
|
698
|
+
// NOTE:
|
|
699
|
+
// Not using `ParentInjectorPromise.all()` (which is inherited from `SyncPromise`), because
|
|
700
|
+
// Closure Compiler (or some related tool) complains:
|
|
701
|
+
// `TypeError: ...$src$downgrade_component_ParentInjectorPromise.all is not a function`
|
|
702
|
+
SyncPromise.all([finalParentInjector, finalModuleInjector]).then(([pInjector, mInjector]) => downgradeFn(pInjector, mInjector));
|
|
703
|
+
ranAsync = true;
|
|
704
|
+
},
|
|
705
|
+
};
|
|
706
|
+
};
|
|
707
|
+
// bracket-notation because of closure - see #14441
|
|
708
|
+
directiveFactory['$inject'] = [$COMPILE, $INJECTOR, $PARSE];
|
|
709
|
+
return directiveFactory;
|
|
710
|
+
}
|
|
711
|
+
/**
|
|
712
|
+
* Synchronous promise-like object to wrap parent injectors,
|
|
713
|
+
* to preserve the synchronous nature of AngularJS's `$compile`.
|
|
714
|
+
*/
|
|
715
|
+
class ParentInjectorPromise extends SyncPromise {
|
|
716
|
+
element;
|
|
717
|
+
injectorKey = controllerKey(INJECTOR_KEY);
|
|
718
|
+
constructor(element) {
|
|
719
|
+
super();
|
|
720
|
+
this.element = element;
|
|
721
|
+
// Store the promise on the element.
|
|
722
|
+
element.data(this.injectorKey, this);
|
|
723
|
+
}
|
|
724
|
+
resolve(injector) {
|
|
725
|
+
// Store the real injector on the element.
|
|
726
|
+
this.element.data(this.injectorKey, injector);
|
|
727
|
+
// Release the element to prevent memory leaks.
|
|
728
|
+
this.element = null;
|
|
729
|
+
// Resolve the promise.
|
|
730
|
+
super.resolve(injector);
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
/**
|
|
735
|
+
* @description
|
|
736
|
+
*
|
|
737
|
+
* A helper function to allow an Angular service to be accessible from AngularJS.
|
|
738
|
+
*
|
|
739
|
+
* *Part of the [upgrade/static](api?query=upgrade%2Fstatic)
|
|
740
|
+
* library for hybrid upgrade apps that support AOT compilation*
|
|
741
|
+
*
|
|
742
|
+
* This helper function returns a factory function that provides access to the Angular
|
|
743
|
+
* service identified by the `token` parameter.
|
|
744
|
+
*
|
|
745
|
+
* @usageNotes
|
|
746
|
+
* ### Examples
|
|
747
|
+
*
|
|
748
|
+
* First ensure that the service to be downgraded is provided in an `NgModule`
|
|
749
|
+
* that will be part of the upgrade application. For example, let's assume we have
|
|
750
|
+
* defined `HeroesService`
|
|
751
|
+
*
|
|
752
|
+
* {@example upgrade/static/ts/full/module.ts region="ng2-heroes-service"}
|
|
753
|
+
*
|
|
754
|
+
* and that we have included this in our upgrade app `NgModule`
|
|
755
|
+
*
|
|
756
|
+
* {@example upgrade/static/ts/full/module.ts region="ng2-module"}
|
|
757
|
+
*
|
|
758
|
+
* Now we can register the `downgradeInjectable` factory function for the service
|
|
759
|
+
* on an AngularJS module.
|
|
760
|
+
*
|
|
761
|
+
* {@example upgrade/static/ts/full/module.ts region="downgrade-ng2-heroes-service"}
|
|
762
|
+
*
|
|
763
|
+
* Inside an AngularJS component's controller we can get hold of the
|
|
764
|
+
* downgraded service via the name we gave when downgrading.
|
|
765
|
+
*
|
|
766
|
+
* {@example upgrade/static/ts/full/module.ts region="example-app"}
|
|
767
|
+
*
|
|
768
|
+
* <div class="docs-alert docs-alert-important">
|
|
769
|
+
*
|
|
770
|
+
* When using `downgradeModule()`, downgraded injectables will not be available until the Angular
|
|
771
|
+
* module that provides them is instantiated. In order to be safe, you need to ensure that the
|
|
772
|
+
* downgraded injectables are not used anywhere _outside_ the part of the app where it is
|
|
773
|
+
* guaranteed that their module has been instantiated.
|
|
774
|
+
*
|
|
775
|
+
* For example, it is _OK_ to use a downgraded service in an upgraded component that is only used
|
|
776
|
+
* from a downgraded Angular component provided by the same Angular module as the injectable, but
|
|
777
|
+
* it is _not OK_ to use it in an AngularJS component that may be used independently of Angular or
|
|
778
|
+
* use it in a downgraded Angular component from a different module.
|
|
779
|
+
*
|
|
780
|
+
* </div>
|
|
781
|
+
*
|
|
782
|
+
* @param token an `InjectionToken` that identifies a service provided from Angular.
|
|
783
|
+
* @param downgradedModule the name of the downgraded module (if any) that the injectable
|
|
784
|
+
* "belongs to", as returned by a call to `downgradeModule()`. It is the module, whose injector will
|
|
785
|
+
* be used for instantiating the injectable.<br />
|
|
786
|
+
* (This option is only necessary when using `downgradeModule()` to downgrade more than one Angular
|
|
787
|
+
* module.)
|
|
788
|
+
*
|
|
789
|
+
* @returns a [factory function](https://docs.angularjs.org/guide/di) that can be
|
|
790
|
+
* used to register the service on an AngularJS module.
|
|
791
|
+
*
|
|
792
|
+
* @publicApi
|
|
793
|
+
*/
|
|
794
|
+
function downgradeInjectable(token, downgradedModule = '') {
|
|
795
|
+
const factory = function ($injector) {
|
|
796
|
+
const injectorKey = `${INJECTOR_KEY}${downgradedModule}`;
|
|
797
|
+
const injectableName = isFunction(token) ? getTypeName(token) : String(token);
|
|
798
|
+
const attemptedAction = `instantiating injectable '${injectableName}'`;
|
|
799
|
+
validateInjectionKey($injector, downgradedModule, injectorKey, attemptedAction);
|
|
800
|
+
try {
|
|
801
|
+
const injector = $injector.get(injectorKey);
|
|
802
|
+
return injector.get(token);
|
|
803
|
+
}
|
|
804
|
+
catch (err) {
|
|
805
|
+
throw new Error(`Error while ${attemptedAction}: ${err.message || err}`);
|
|
806
|
+
}
|
|
807
|
+
};
|
|
808
|
+
factory['$inject'] = [$INJECTOR];
|
|
809
|
+
return factory;
|
|
810
|
+
}
|
|
811
|
+
|
|
812
|
+
/**
|
|
813
|
+
* The Trusted Types policy, or null if Trusted Types are not
|
|
814
|
+
* enabled/supported, or undefined if the policy has not been created yet.
|
|
815
|
+
*/
|
|
816
|
+
let policy;
|
|
817
|
+
/**
|
|
818
|
+
* Returns the Trusted Types policy, or null if Trusted Types are not
|
|
819
|
+
* enabled/supported. The first call to this function will create the policy.
|
|
820
|
+
*/
|
|
821
|
+
function getPolicy() {
|
|
822
|
+
if (policy === undefined) {
|
|
823
|
+
policy = null;
|
|
824
|
+
const windowWithTrustedTypes = window;
|
|
825
|
+
if (windowWithTrustedTypes.trustedTypes) {
|
|
826
|
+
try {
|
|
827
|
+
policy = windowWithTrustedTypes.trustedTypes.createPolicy('angular#unsafe-upgrade', {
|
|
828
|
+
createHTML: (s) => s,
|
|
829
|
+
});
|
|
830
|
+
}
|
|
831
|
+
catch {
|
|
832
|
+
// trustedTypes.createPolicy throws if called with a name that is
|
|
833
|
+
// already registered, even in report-only mode. Until the API changes,
|
|
834
|
+
// catch the error not to break the applications functionally. In such
|
|
835
|
+
// cases, the code will fall back to using strings.
|
|
836
|
+
}
|
|
837
|
+
}
|
|
838
|
+
}
|
|
839
|
+
return policy;
|
|
840
|
+
}
|
|
841
|
+
/**
|
|
842
|
+
* Unsafely promote a legacy AngularJS template to a TrustedHTML, falling back
|
|
843
|
+
* to strings when Trusted Types are not available.
|
|
844
|
+
* @security This is a security-sensitive function; any use of this function
|
|
845
|
+
* must go through security review. In particular, the template string should
|
|
846
|
+
* always be under full control of the application author, as untrusted input
|
|
847
|
+
* can cause an XSS vulnerability.
|
|
848
|
+
*/
|
|
849
|
+
function trustedHTMLFromLegacyTemplate(html) {
|
|
850
|
+
return getPolicy()?.createHTML(html) || html;
|
|
851
|
+
}
|
|
852
|
+
|
|
853
|
+
// Constants
|
|
854
|
+
const REQUIRE_PREFIX_RE = /^(\^\^?)?(\?)?(\^\^?)?/;
|
|
855
|
+
// Classes
|
|
856
|
+
class UpgradeHelper {
|
|
857
|
+
name;
|
|
858
|
+
$injector;
|
|
859
|
+
element;
|
|
860
|
+
$element;
|
|
861
|
+
directive;
|
|
862
|
+
$compile;
|
|
863
|
+
$controller;
|
|
864
|
+
constructor(injector, name, elementRef, directive) {
|
|
865
|
+
this.name = name;
|
|
866
|
+
this.$injector = injector.get($INJECTOR);
|
|
867
|
+
this.$compile = this.$injector.get($COMPILE);
|
|
868
|
+
this.$controller = this.$injector.get($CONTROLLER);
|
|
869
|
+
this.element = elementRef.nativeElement;
|
|
870
|
+
this.$element = element(this.element);
|
|
871
|
+
this.directive = directive ?? UpgradeHelper.getDirective(this.$injector, name);
|
|
872
|
+
}
|
|
873
|
+
static getDirective($injector, name) {
|
|
874
|
+
const directives = $injector.get(name + 'Directive');
|
|
875
|
+
if (directives.length > 1) {
|
|
876
|
+
throw new Error(`Only support single directive definition for: ${name}`);
|
|
877
|
+
}
|
|
878
|
+
const directive = directives[0];
|
|
879
|
+
// AngularJS will transform `link: xyz` to `compile: () => xyz`. So we can only tell there was a
|
|
880
|
+
// user-defined `compile` if there is no `link`. In other cases, we will just ignore `compile`.
|
|
881
|
+
if (directive.compile && !directive.link)
|
|
882
|
+
notSupported(name, 'compile');
|
|
883
|
+
if (directive.replace)
|
|
884
|
+
notSupported(name, 'replace');
|
|
885
|
+
if (directive.terminal)
|
|
886
|
+
notSupported(name, 'terminal');
|
|
887
|
+
return directive;
|
|
888
|
+
}
|
|
889
|
+
static getTemplate($injector, directive, fetchRemoteTemplate = false, $element) {
|
|
890
|
+
if (directive.template !== undefined) {
|
|
891
|
+
return trustedHTMLFromLegacyTemplate(getOrCall(directive.template, $element));
|
|
892
|
+
}
|
|
893
|
+
else if (directive.templateUrl) {
|
|
894
|
+
const $templateCache = $injector.get($TEMPLATE_CACHE);
|
|
895
|
+
const url = getOrCall(directive.templateUrl, $element);
|
|
896
|
+
const template = $templateCache.get(url);
|
|
897
|
+
if (template !== undefined) {
|
|
898
|
+
return trustedHTMLFromLegacyTemplate(template);
|
|
899
|
+
}
|
|
900
|
+
else if (!fetchRemoteTemplate) {
|
|
901
|
+
throw new Error('loading directive templates asynchronously is not supported');
|
|
902
|
+
}
|
|
903
|
+
return new Promise((resolve, reject) => {
|
|
904
|
+
const $httpBackend = $injector.get($HTTP_BACKEND);
|
|
905
|
+
$httpBackend('GET', url, null, (status, response) => {
|
|
906
|
+
if (status === 200) {
|
|
907
|
+
resolve(trustedHTMLFromLegacyTemplate($templateCache.put(url, response)));
|
|
908
|
+
}
|
|
909
|
+
else {
|
|
910
|
+
reject(`GET component template from '${url}' returned '${status}: ${response}'`);
|
|
911
|
+
}
|
|
912
|
+
});
|
|
913
|
+
});
|
|
914
|
+
}
|
|
915
|
+
else {
|
|
916
|
+
throw new Error(`Directive '${directive.name}' is not a component, it is missing template.`);
|
|
917
|
+
}
|
|
918
|
+
}
|
|
919
|
+
buildController(controllerType, $scope) {
|
|
920
|
+
// TODO: Document that we do not pre-assign bindings on the controller instance.
|
|
921
|
+
// Quoted properties below so that this code can be optimized with Closure Compiler.
|
|
922
|
+
const locals = { '$scope': $scope, '$element': this.$element };
|
|
923
|
+
const controller = this.$controller(controllerType, locals, null, this.directive.controllerAs);
|
|
924
|
+
this.$element.data?.(controllerKey(this.directive.name), controller);
|
|
925
|
+
return controller;
|
|
926
|
+
}
|
|
927
|
+
compileTemplate(template) {
|
|
928
|
+
if (template === undefined) {
|
|
929
|
+
template = UpgradeHelper.getTemplate(this.$injector, this.directive, false, this.$element);
|
|
930
|
+
}
|
|
931
|
+
return this.compileHtml(template);
|
|
932
|
+
}
|
|
933
|
+
onDestroy($scope, controllerInstance) {
|
|
934
|
+
if (controllerInstance && isFunction(controllerInstance.$onDestroy)) {
|
|
935
|
+
controllerInstance.$onDestroy();
|
|
936
|
+
}
|
|
937
|
+
$scope.$destroy();
|
|
938
|
+
cleanData(this.element);
|
|
939
|
+
}
|
|
940
|
+
prepareTransclusion() {
|
|
941
|
+
const transclude = this.directive.transclude;
|
|
942
|
+
const contentChildNodes = this.extractChildNodes();
|
|
943
|
+
const attachChildrenFn = (scope, cloneAttachFn) => {
|
|
944
|
+
// Since AngularJS v1.5.8, `cloneAttachFn` will try to destroy the transclusion scope if
|
|
945
|
+
// `$template` is empty. Since the transcluded content comes from Angular, not AngularJS,
|
|
946
|
+
// there will be no transclusion scope here.
|
|
947
|
+
// Provide a dummy `scope.$destroy()` method to prevent `cloneAttachFn` from throwing.
|
|
948
|
+
scope = scope || { $destroy: () => undefined };
|
|
949
|
+
return cloneAttachFn($template, scope);
|
|
950
|
+
};
|
|
951
|
+
let $template = contentChildNodes;
|
|
952
|
+
if (transclude) {
|
|
953
|
+
const slots = Object.create(null);
|
|
954
|
+
if (typeof transclude === 'object') {
|
|
955
|
+
$template = [];
|
|
956
|
+
const slotMap = Object.create(null);
|
|
957
|
+
const filledSlots = Object.create(null);
|
|
958
|
+
// Parse the element selectors.
|
|
959
|
+
Object.keys(transclude).forEach((slotName) => {
|
|
960
|
+
let selector = transclude[slotName];
|
|
961
|
+
const optional = selector.charAt(0) === '?';
|
|
962
|
+
selector = optional ? selector.substring(1) : selector;
|
|
963
|
+
slotMap[selector] = slotName;
|
|
964
|
+
slots[slotName] = null; // `null`: Defined but not yet filled.
|
|
965
|
+
filledSlots[slotName] = optional; // Consider optional slots as filled.
|
|
966
|
+
});
|
|
967
|
+
// Add the matching elements into their slot.
|
|
968
|
+
contentChildNodes.forEach((node) => {
|
|
969
|
+
const slotName = slotMap[directiveNormalize(node.nodeName.toLowerCase())];
|
|
970
|
+
if (slotName) {
|
|
971
|
+
filledSlots[slotName] = true;
|
|
972
|
+
slots[slotName] = slots[slotName] || [];
|
|
973
|
+
slots[slotName].push(node);
|
|
974
|
+
}
|
|
975
|
+
else {
|
|
976
|
+
$template.push(node);
|
|
977
|
+
}
|
|
978
|
+
});
|
|
979
|
+
// Check for required slots that were not filled.
|
|
980
|
+
Object.keys(filledSlots).forEach((slotName) => {
|
|
981
|
+
if (!filledSlots[slotName]) {
|
|
982
|
+
throw new Error(`Required transclusion slot '${slotName}' on directive: ${this.name}`);
|
|
983
|
+
}
|
|
984
|
+
});
|
|
985
|
+
Object.keys(slots)
|
|
986
|
+
.filter((slotName) => slots[slotName])
|
|
987
|
+
.forEach((slotName) => {
|
|
988
|
+
const nodes = slots[slotName];
|
|
989
|
+
slots[slotName] = (scope, cloneAttach) => {
|
|
990
|
+
return cloneAttach(nodes, scope);
|
|
991
|
+
};
|
|
992
|
+
});
|
|
993
|
+
}
|
|
994
|
+
// Attach `$$slots` to default slot transclude fn.
|
|
995
|
+
attachChildrenFn.$$slots = slots;
|
|
996
|
+
// AngularJS v1.6+ ignores empty or whitespace-only transcluded text nodes. But Angular
|
|
997
|
+
// removes all text content after the first interpolation and updates it later, after
|
|
998
|
+
// evaluating the expressions. This would result in AngularJS failing to recognize text
|
|
999
|
+
// nodes that start with an interpolation as transcluded content and use the fallback
|
|
1000
|
+
// content instead.
|
|
1001
|
+
// To avoid this issue, we add a
|
|
1002
|
+
// [zero-width non-joiner character](https://en.wikipedia.org/wiki/Zero-width_non-joiner)
|
|
1003
|
+
// to empty text nodes (which can only be a result of Angular removing their initial content).
|
|
1004
|
+
// NOTE: Transcluded text content that starts with whitespace followed by an interpolation
|
|
1005
|
+
// will still fail to be detected by AngularJS v1.6+
|
|
1006
|
+
$template.forEach((node) => {
|
|
1007
|
+
if (node.nodeType === Node.TEXT_NODE && !node.nodeValue) {
|
|
1008
|
+
node.nodeValue = '\u200C';
|
|
1009
|
+
}
|
|
1010
|
+
});
|
|
1011
|
+
}
|
|
1012
|
+
return attachChildrenFn;
|
|
1013
|
+
}
|
|
1014
|
+
resolveAndBindRequiredControllers(controllerInstance) {
|
|
1015
|
+
const directiveRequire = this.getDirectiveRequire();
|
|
1016
|
+
const requiredControllers = this.resolveRequire(directiveRequire);
|
|
1017
|
+
if (controllerInstance && this.directive.bindToController && isMap(directiveRequire)) {
|
|
1018
|
+
const requiredControllersMap = requiredControllers;
|
|
1019
|
+
Object.keys(requiredControllersMap).forEach((key) => {
|
|
1020
|
+
controllerInstance[key] = requiredControllersMap[key];
|
|
1021
|
+
});
|
|
1022
|
+
}
|
|
1023
|
+
return requiredControllers;
|
|
1024
|
+
}
|
|
1025
|
+
compileHtml(html) {
|
|
1026
|
+
this.element.innerHTML = html;
|
|
1027
|
+
return this.$compile(this.element.childNodes);
|
|
1028
|
+
}
|
|
1029
|
+
extractChildNodes() {
|
|
1030
|
+
const childNodes = [];
|
|
1031
|
+
let childNode;
|
|
1032
|
+
while ((childNode = this.element.firstChild)) {
|
|
1033
|
+
childNode.remove();
|
|
1034
|
+
childNodes.push(childNode);
|
|
1035
|
+
}
|
|
1036
|
+
return childNodes;
|
|
1037
|
+
}
|
|
1038
|
+
getDirectiveRequire() {
|
|
1039
|
+
const require = this.directive.require || (this.directive.controller && this.directive.name);
|
|
1040
|
+
if (isMap(require)) {
|
|
1041
|
+
Object.entries(require).forEach(([key, value]) => {
|
|
1042
|
+
const match = value.match(REQUIRE_PREFIX_RE);
|
|
1043
|
+
const name = value.substring(match[0].length);
|
|
1044
|
+
if (!name) {
|
|
1045
|
+
require[key] = match[0] + key;
|
|
1046
|
+
}
|
|
1047
|
+
});
|
|
1048
|
+
}
|
|
1049
|
+
return require;
|
|
1050
|
+
}
|
|
1051
|
+
resolveRequire(require) {
|
|
1052
|
+
if (!require) {
|
|
1053
|
+
return null;
|
|
1054
|
+
}
|
|
1055
|
+
else if (Array.isArray(require)) {
|
|
1056
|
+
return require.map((req) => this.resolveRequire(req));
|
|
1057
|
+
}
|
|
1058
|
+
else if (typeof require === 'object') {
|
|
1059
|
+
const value = {};
|
|
1060
|
+
Object.keys(require).forEach((key) => (value[key] = this.resolveRequire(require[key])));
|
|
1061
|
+
return value;
|
|
1062
|
+
}
|
|
1063
|
+
else if (typeof require === 'string') {
|
|
1064
|
+
const match = require.match(REQUIRE_PREFIX_RE);
|
|
1065
|
+
const inheritType = match[1] || match[3];
|
|
1066
|
+
const name = require.substring(match[0].length);
|
|
1067
|
+
const isOptional = !!match[2];
|
|
1068
|
+
const searchParents = !!inheritType;
|
|
1069
|
+
const startOnParent = inheritType === '^^';
|
|
1070
|
+
const ctrlKey = controllerKey(name);
|
|
1071
|
+
const elem = startOnParent ? this.$element.parent() : this.$element;
|
|
1072
|
+
const value = searchParents ? elem.inheritedData(ctrlKey) : elem.data(ctrlKey);
|
|
1073
|
+
if (!value && !isOptional) {
|
|
1074
|
+
throw new Error(`Unable to find required '${require}' in upgraded directive '${this.name}'.`);
|
|
1075
|
+
}
|
|
1076
|
+
return value;
|
|
1077
|
+
}
|
|
1078
|
+
else {
|
|
1079
|
+
throw new Error(`Unrecognized 'require' syntax on upgraded directive '${this.name}': ${require}`);
|
|
1080
|
+
}
|
|
1081
|
+
}
|
|
1082
|
+
}
|
|
1083
|
+
function getOrCall(property, ...args) {
|
|
1084
|
+
return isFunction(property) ? property(...args) : property;
|
|
1085
|
+
}
|
|
1086
|
+
// NOTE: Only works for `typeof T !== 'object'`.
|
|
1087
|
+
function isMap(value) {
|
|
1088
|
+
return value && !Array.isArray(value) && typeof value === 'object';
|
|
1089
|
+
}
|
|
1090
|
+
function notSupported(name, feature) {
|
|
1091
|
+
throw new Error(`Upgraded directive '${name}' contains unsupported feature: '${feature}'.`);
|
|
1092
|
+
}
|
|
1093
|
+
|
|
1094
|
+
var upgrade_helper = /*#__PURE__*/Object.freeze({
|
|
1095
|
+
__proto__: null,
|
|
1096
|
+
UpgradeHelper: UpgradeHelper
|
|
1097
|
+
});
|
|
1098
|
+
|
|
15
1099
|
// We have to do a little dance to get the ng1 injector into the module injector.
|
|
16
1100
|
// We store the ng1 injector so that the provider in the module injector can access it
|
|
17
1101
|
// Then we "get" the ng1 injector from the module injector, which triggers the provider to read
|
|
@@ -789,5 +1873,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2",
|
|
|
789
1873
|
args: [{ providers: [angular1Providers] }]
|
|
790
1874
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.NgZone }, { type: i0.PlatformRef }] });
|
|
791
1875
|
|
|
792
|
-
export { UpgradeComponent, UpgradeModule, downgradeModule };
|
|
1876
|
+
export { UpgradeComponent, UpgradeModule, downgradeComponent, downgradeInjectable, downgradeModule, upgrade_helper as ɵupgradeHelper, util as ɵutil };
|
|
793
1877
|
//# sourceMappingURL=static.mjs.map
|