@angular/upgrade 16.0.0-next.3 → 16.0.0-next.5

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.
Files changed (45) hide show
  1. package/{esm2020 → esm2022}/src/common/src/version.mjs +1 -1
  2. package/esm2022/src/dynamic/src/upgrade_adapter.mjs +648 -0
  3. package/{esm2020 → esm2022}/src/dynamic/src/upgrade_ng1_adapter.mjs +4 -4
  4. package/{esm2020 → esm2022}/static/src/upgrade_component.mjs +4 -4
  5. package/{esm2020 → esm2022}/static/src/upgrade_module.mjs +5 -5
  6. package/{esm2020 → esm2022}/static/testing/src/create_angular_testing_module.mjs +5 -5
  7. package/{fesm2020 → fesm2022}/static/testing.mjs +5 -5
  8. package/{fesm2020 → fesm2022}/static/testing.mjs.map +1 -1
  9. package/{fesm2020 → fesm2022}/static.mjs +9 -9
  10. package/{fesm2020 → fesm2022}/static.mjs.map +1 -1
  11. package/{fesm2020 → fesm2022}/upgrade.mjs +6 -7
  12. package/{fesm2015 → fesm2022}/upgrade.mjs.map +1 -1
  13. package/index.d.ts +1 -1
  14. package/package.json +15 -25
  15. package/static/index.d.ts +1 -1
  16. package/static/testing/index.d.ts +1 -1
  17. package/esm2020/src/dynamic/src/upgrade_adapter.mjs +0 -649
  18. package/fesm2015/static/testing.mjs +0 -281
  19. package/fesm2015/static/testing.mjs.map +0 -1
  20. package/fesm2015/static.mjs +0 -1841
  21. package/fesm2015/static.mjs.map +0 -1
  22. package/fesm2015/upgrade.mjs +0 -1943
  23. package/fesm2020/upgrade.mjs.map +0 -1
  24. /package/{esm2020 → esm2022}/index.mjs +0 -0
  25. /package/{esm2020 → esm2022}/public_api.mjs +0 -0
  26. /package/{esm2020 → esm2022}/src/common/src/angular1.mjs +0 -0
  27. /package/{esm2020 → esm2022}/src/common/src/component_info.mjs +0 -0
  28. /package/{esm2020 → esm2022}/src/common/src/constants.mjs +0 -0
  29. /package/{esm2020 → esm2022}/src/common/src/downgrade_component.mjs +0 -0
  30. /package/{esm2020 → esm2022}/src/common/src/downgrade_component_adapter.mjs +0 -0
  31. /package/{esm2020 → esm2022}/src/common/src/downgrade_injectable.mjs +0 -0
  32. /package/{esm2020 → esm2022}/src/common/src/promise_util.mjs +0 -0
  33. /package/{esm2020 → esm2022}/src/common/src/upgrade_helper.mjs +0 -0
  34. /package/{esm2020 → esm2022}/src/common/src/util.mjs +0 -0
  35. /package/{esm2020 → esm2022}/static/index.mjs +0 -0
  36. /package/{esm2020 → esm2022}/static/public_api.mjs +0 -0
  37. /package/{esm2020 → esm2022}/static/src/angular1_providers.mjs +0 -0
  38. /package/{esm2020 → esm2022}/static/src/downgrade_module.mjs +0 -0
  39. /package/{esm2020 → esm2022}/static/src/util.mjs +0 -0
  40. /package/{esm2020 → esm2022}/static/static.mjs +0 -0
  41. /package/{esm2020 → esm2022}/static/testing/index.mjs +0 -0
  42. /package/{esm2020 → esm2022}/static/testing/public_api.mjs +0 -0
  43. /package/{esm2020 → esm2022}/static/testing/src/create_angularjs_testing_module.mjs +0 -0
  44. /package/{esm2020 → esm2022}/static/testing/testing.mjs +0 -0
  45. /package/{esm2020 → esm2022}/upgrade.mjs +0 -0
@@ -1,1943 +0,0 @@
1
- /**
2
- * @license Angular v16.0.0-next.3
3
- * (c) 2010-2022 Google LLC. https://angular.io/
4
- * License: MIT
5
- */
6
-
7
- import * as i0 from '@angular/core';
8
- import { Version, ɵNG_MOD_DEF, Injector, ChangeDetectorRef, Testability, TestabilityRegistry, ApplicationRef, SimpleChange, NgZone, ComponentFactoryResolver, Directive, Inject, ElementRef, EventEmitter, Compiler, NgModule, resolveForwardRef } from '@angular/core';
9
- import { __decorate, __param, __metadata } from 'tslib';
10
- import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
11
-
12
- /**
13
- * @module
14
- * @description
15
- * Entry point for all public APIs of the upgrade package.
16
- */
17
- /**
18
- * @publicApi
19
- */
20
- const VERSION = new Version('16.0.0-next.3');
21
-
22
- function noNg() {
23
- throw new Error('AngularJS v1.x is not loaded!');
24
- }
25
- const noNgElement = (() => noNg());
26
- noNgElement.cleanData = noNg;
27
- let angular = {
28
- bootstrap: noNg,
29
- module: noNg,
30
- element: noNgElement,
31
- injector: noNg,
32
- version: undefined,
33
- resumeBootstrap: noNg,
34
- getTestability: noNg
35
- };
36
- try {
37
- if (window.hasOwnProperty('angular')) {
38
- angular = window.angular;
39
- }
40
- }
41
- catch (_a) {
42
- // ignore in CJS mode.
43
- }
44
- /**
45
- * @deprecated Use `setAngularJSGlobal` instead.
46
- *
47
- * @publicApi
48
- */
49
- function setAngularLib(ng) {
50
- setAngularJSGlobal(ng);
51
- }
52
- /**
53
- * @deprecated Use `getAngularJSGlobal` instead.
54
- *
55
- * @publicApi
56
- */
57
- function getAngularLib() {
58
- return getAngularJSGlobal();
59
- }
60
- /**
61
- * Resets the AngularJS global.
62
- *
63
- * Used when AngularJS is loaded lazily, and not available on `window`.
64
- *
65
- * @publicApi
66
- */
67
- function setAngularJSGlobal(ng) {
68
- angular = ng;
69
- }
70
- /**
71
- * Returns the current AngularJS global.
72
- *
73
- * @publicApi
74
- */
75
- function getAngularJSGlobal() {
76
- return angular;
77
- }
78
- const bootstrap = (e, modules, config) => angular.bootstrap(e, modules, config);
79
- // Do not declare as `module` to avoid webpack bug
80
- // (see https://github.com/angular/angular/issues/30050).
81
- const module_ = (prefix, dependencies) => angular.module(prefix, dependencies);
82
- const element = (e => angular.element(e));
83
- element.cleanData = nodes => angular.element.cleanData(nodes);
84
- const injector = (modules, strictDi) => angular.injector(modules, strictDi);
85
- const resumeBootstrap = () => angular.resumeBootstrap();
86
- const getTestability = e => angular.getTestability(e);
87
-
88
- const $COMPILE = '$compile';
89
- const $CONTROLLER = '$controller';
90
- const $DELEGATE = '$delegate';
91
- const $EXCEPTION_HANDLER = '$exceptionHandler';
92
- const $HTTP_BACKEND = '$httpBackend';
93
- const $INJECTOR = '$injector';
94
- const $INTERVAL = '$interval';
95
- const $PARSE = '$parse';
96
- const $PROVIDE = '$provide';
97
- const $ROOT_ELEMENT = '$rootElement';
98
- const $ROOT_SCOPE = '$rootScope';
99
- const $SCOPE = '$scope';
100
- const $TEMPLATE_CACHE = '$templateCache';
101
- const $TEMPLATE_REQUEST = '$templateRequest';
102
- const $$TESTABILITY = '$$testability';
103
- const COMPILER_KEY = '$$angularCompiler';
104
- const DOWNGRADED_MODULE_COUNT_KEY = '$$angularDowngradedModuleCount';
105
- const GROUP_PROJECTABLE_NODES_KEY = '$$angularGroupProjectableNodes';
106
- const INJECTOR_KEY = '$$angularInjector';
107
- const LAZY_MODULE_REF = '$$angularLazyModuleRef';
108
- const NG_ZONE_KEY = '$$angularNgZone';
109
- const UPGRADE_APP_TYPE_KEY = '$$angularUpgradeAppType';
110
- const REQUIRE_INJECTOR = '?^^' + INJECTOR_KEY;
111
- const REQUIRE_NG_MODEL = '?ngModel';
112
- const UPGRADE_MODULE_NAME = '$$UpgradeModule';
113
-
114
- /**
115
- * A `PropertyBinding` represents a mapping between a property name
116
- * and an attribute name. It is parsed from a string of the form
117
- * `"prop: attr"`; or simply `"propAndAttr" where the property
118
- * and attribute have the same identifier.
119
- */
120
- class PropertyBinding {
121
- constructor(prop, attr) {
122
- this.prop = prop;
123
- this.attr = attr;
124
- this.bracketAttr = `[${this.attr}]`;
125
- this.parenAttr = `(${this.attr})`;
126
- this.bracketParenAttr = `[(${this.attr})]`;
127
- const capitalAttr = this.attr.charAt(0).toUpperCase() + this.attr.slice(1);
128
- this.onAttr = `on${capitalAttr}`;
129
- this.bindAttr = `bind${capitalAttr}`;
130
- this.bindonAttr = `bindon${capitalAttr}`;
131
- }
132
- }
133
-
134
- const DIRECTIVE_PREFIX_REGEXP = /^(?:x|data)[:\-_]/i;
135
- const DIRECTIVE_SPECIAL_CHARS_REGEXP = /[:\-_]+(.)/g;
136
- function onError(e) {
137
- // TODO: (misko): We seem to not have a stack trace here!
138
- console.error(e, e.stack);
139
- throw e;
140
- }
141
- /**
142
- * Clean the jqLite/jQuery data on the element and all its descendants.
143
- * Equivalent to how jqLite/jQuery invoke `cleanData()` on an Element when removed:
144
- * https://github.com/angular/angular.js/blob/2e72ea13fa98bebf6ed4b5e3c45eaf5f990ed16f/src/jqLite.js#L349-L355
145
- * https://github.com/jquery/jquery/blob/6984d1747623dbc5e87fd6c261a5b6b1628c107c/src/manipulation.js#L182
146
- *
147
- * NOTE:
148
- * `cleanData()` will also invoke the AngularJS `$destroy` DOM event on the element:
149
- * https://github.com/angular/angular.js/blob/2e72ea13fa98bebf6ed4b5e3c45eaf5f990ed16f/src/Angular.js#L1932-L1945
150
- *
151
- * @param node The DOM node whose data needs to be cleaned.
152
- */
153
- function cleanData(node) {
154
- element.cleanData([node]);
155
- if (isParentNode(node)) {
156
- element.cleanData(node.querySelectorAll('*'));
157
- }
158
- }
159
- function controllerKey(name) {
160
- return '$' + name + 'Controller';
161
- }
162
- /**
163
- * Destroy an AngularJS app given the app `$injector`.
164
- *
165
- * NOTE: Destroying an app is not officially supported by AngularJS, but try to do our best by
166
- * destroying `$rootScope` and clean the jqLite/jQuery data on `$rootElement` and all
167
- * descendants.
168
- *
169
- * @param $injector The `$injector` of the AngularJS app to destroy.
170
- */
171
- function destroyApp($injector) {
172
- const $rootElement = $injector.get($ROOT_ELEMENT);
173
- const $rootScope = $injector.get($ROOT_SCOPE);
174
- $rootScope.$destroy();
175
- cleanData($rootElement[0]);
176
- }
177
- function directiveNormalize(name) {
178
- return name.replace(DIRECTIVE_PREFIX_REGEXP, '')
179
- .replace(DIRECTIVE_SPECIAL_CHARS_REGEXP, (_, letter) => letter.toUpperCase());
180
- }
181
- function getTypeName(type) {
182
- // Return the name of the type or the first line of its stringified version.
183
- return type.overriddenName || type.name || type.toString().split('\n')[0];
184
- }
185
- function getDowngradedModuleCount($injector) {
186
- return $injector.has(DOWNGRADED_MODULE_COUNT_KEY) ? $injector.get(DOWNGRADED_MODULE_COUNT_KEY) :
187
- 0;
188
- }
189
- function getUpgradeAppType($injector) {
190
- return $injector.has(UPGRADE_APP_TYPE_KEY) ? $injector.get(UPGRADE_APP_TYPE_KEY) :
191
- 0 /* UpgradeAppType.None */;
192
- }
193
- function isFunction(value) {
194
- return typeof value === 'function';
195
- }
196
- function isNgModuleType(value) {
197
- // NgModule class should have the `ɵmod` static property attached by AOT or JIT compiler.
198
- return isFunction(value) && !!value[ɵNG_MOD_DEF];
199
- }
200
- function isParentNode(node) {
201
- return isFunction(node.querySelectorAll);
202
- }
203
- function validateInjectionKey($injector, downgradedModule, injectionKey, attemptedAction) {
204
- const upgradeAppType = getUpgradeAppType($injector);
205
- const downgradedModuleCount = getDowngradedModuleCount($injector);
206
- // Check for common errors.
207
- switch (upgradeAppType) {
208
- case 1 /* UpgradeAppType.Dynamic */:
209
- case 2 /* UpgradeAppType.Static */:
210
- if (downgradedModule) {
211
- throw new Error(`Error while ${attemptedAction}: 'downgradedModule' unexpectedly specified.\n` +
212
- 'You should not specify a value for \'downgradedModule\', unless you are downgrading ' +
213
- 'more than one Angular module (via \'downgradeModule()\').');
214
- }
215
- break;
216
- case 3 /* UpgradeAppType.Lite */:
217
- if (!downgradedModule && (downgradedModuleCount >= 2)) {
218
- throw new Error(`Error while ${attemptedAction}: 'downgradedModule' not specified.\n` +
219
- 'This application contains more than one downgraded Angular module, thus you need to ' +
220
- 'always specify \'downgradedModule\' when downgrading components and injectables.');
221
- }
222
- if (!$injector.has(injectionKey)) {
223
- throw new Error(`Error while ${attemptedAction}: Unable to find the specified downgraded module.\n` +
224
- 'Did you forget to downgrade an Angular module or include it in the AngularJS ' +
225
- 'application?');
226
- }
227
- break;
228
- default:
229
- throw new Error(`Error while ${attemptedAction}: Not a valid '@angular/upgrade' application.\n` +
230
- 'Did you forget to downgrade an Angular module or include it in the AngularJS ' +
231
- 'application?');
232
- }
233
- }
234
- class Deferred {
235
- constructor() {
236
- this.promise = new Promise((res, rej) => {
237
- this.resolve = res;
238
- this.reject = rej;
239
- });
240
- }
241
- }
242
- /**
243
- * @return Whether the passed-in component implements the subset of the
244
- * `ControlValueAccessor` interface needed for AngularJS `ng-model`
245
- * compatibility.
246
- */
247
- function supportsNgModel(component) {
248
- return typeof component.writeValue === 'function' &&
249
- typeof component.registerOnChange === 'function';
250
- }
251
- /**
252
- * Glue the AngularJS `NgModelController` (if it exists) to the component
253
- * (if it implements the needed subset of the `ControlValueAccessor` interface).
254
- */
255
- function hookupNgModel(ngModel, component) {
256
- if (ngModel && supportsNgModel(component)) {
257
- ngModel.$render = () => {
258
- component.writeValue(ngModel.$viewValue);
259
- };
260
- component.registerOnChange(ngModel.$setViewValue.bind(ngModel));
261
- if (typeof component.registerOnTouched === 'function') {
262
- component.registerOnTouched(ngModel.$setTouched.bind(ngModel));
263
- }
264
- }
265
- }
266
- /**
267
- * Test two values for strict equality, accounting for the fact that `NaN !== NaN`.
268
- */
269
- function strictEquals(val1, val2) {
270
- return val1 === val2 || (val1 !== val1 && val2 !== val2);
271
- }
272
-
273
- const INITIAL_VALUE$1 = {
274
- __UNINITIALIZED__: true
275
- };
276
- class DowngradeComponentAdapter {
277
- constructor(element, attrs, scope, ngModel, parentInjector, $compile, $parse, componentFactory, wrapCallback) {
278
- this.element = element;
279
- this.attrs = attrs;
280
- this.scope = scope;
281
- this.ngModel = ngModel;
282
- this.parentInjector = parentInjector;
283
- this.$compile = $compile;
284
- this.$parse = $parse;
285
- this.componentFactory = componentFactory;
286
- this.wrapCallback = wrapCallback;
287
- this.implementsOnChanges = false;
288
- this.inputChangeCount = 0;
289
- this.inputChanges = {};
290
- this.componentScope = scope.$new();
291
- }
292
- compileContents() {
293
- const compiledProjectableNodes = [];
294
- const projectableNodes = this.groupProjectableNodes();
295
- const linkFns = projectableNodes.map(nodes => this.$compile(nodes));
296
- this.element.empty();
297
- linkFns.forEach(linkFn => {
298
- linkFn(this.scope, (clone) => {
299
- compiledProjectableNodes.push(clone);
300
- this.element.append(clone);
301
- });
302
- });
303
- return compiledProjectableNodes;
304
- }
305
- createComponentAndSetup(projectableNodes, manuallyAttachView = false, propagateDigest = true) {
306
- const component = this.createComponent(projectableNodes);
307
- this.setupInputs(manuallyAttachView, propagateDigest, component);
308
- this.setupOutputs(component.componentRef);
309
- this.registerCleanup(component.componentRef);
310
- return component.componentRef;
311
- }
312
- createComponent(projectableNodes) {
313
- const providers = [{ provide: $SCOPE, useValue: this.componentScope }];
314
- const childInjector = Injector.create({ providers: providers, parent: this.parentInjector, name: 'DowngradeComponentAdapter' });
315
- const componentRef = this.componentFactory.create(childInjector, projectableNodes, this.element[0]);
316
- const viewChangeDetector = componentRef.injector.get(ChangeDetectorRef);
317
- const changeDetector = componentRef.changeDetectorRef;
318
- // testability hook is commonly added during component bootstrap in
319
- // packages/core/src/application_ref.bootstrap()
320
- // in downgraded application, component creation will take place here as well as adding the
321
- // testability hook.
322
- const testability = componentRef.injector.get(Testability, null);
323
- if (testability) {
324
- componentRef.injector.get(TestabilityRegistry)
325
- .registerApplication(componentRef.location.nativeElement, testability);
326
- }
327
- hookupNgModel(this.ngModel, componentRef.instance);
328
- return { viewChangeDetector, componentRef, changeDetector };
329
- }
330
- setupInputs(manuallyAttachView, propagateDigest = true, { componentRef, changeDetector, viewChangeDetector }) {
331
- const attrs = this.attrs;
332
- const inputs = this.componentFactory.inputs || [];
333
- for (const input of inputs) {
334
- const inputBinding = new PropertyBinding(input.propName, input.templateName);
335
- let expr = null;
336
- if (attrs.hasOwnProperty(inputBinding.attr)) {
337
- const observeFn = (prop => {
338
- let prevValue = INITIAL_VALUE$1;
339
- return (currValue) => {
340
- // Initially, both `$observe()` and `$watch()` will call this function.
341
- if (!strictEquals(prevValue, currValue)) {
342
- if (prevValue === INITIAL_VALUE$1) {
343
- prevValue = currValue;
344
- }
345
- this.updateInput(componentRef, prop, prevValue, currValue);
346
- prevValue = currValue;
347
- }
348
- };
349
- })(inputBinding.prop);
350
- attrs.$observe(inputBinding.attr, observeFn);
351
- // Use `$watch()` (in addition to `$observe()`) in order to initialize the input in time
352
- // for `ngOnChanges()`. This is necessary if we are already in a `$digest`, which means that
353
- // `ngOnChanges()` (which is called by a watcher) will run before the `$observe()` callback.
354
- let unwatch = this.componentScope.$watch(() => {
355
- unwatch();
356
- unwatch = null;
357
- observeFn(attrs[inputBinding.attr]);
358
- });
359
- }
360
- else if (attrs.hasOwnProperty(inputBinding.bindAttr)) {
361
- expr = attrs[inputBinding.bindAttr];
362
- }
363
- else if (attrs.hasOwnProperty(inputBinding.bracketAttr)) {
364
- expr = attrs[inputBinding.bracketAttr];
365
- }
366
- else if (attrs.hasOwnProperty(inputBinding.bindonAttr)) {
367
- expr = attrs[inputBinding.bindonAttr];
368
- }
369
- else if (attrs.hasOwnProperty(inputBinding.bracketParenAttr)) {
370
- expr = attrs[inputBinding.bracketParenAttr];
371
- }
372
- if (expr != null) {
373
- const watchFn = ((prop) => (currValue, prevValue) => this.updateInput(componentRef, prop, prevValue, currValue))(inputBinding.prop);
374
- this.componentScope.$watch(expr, watchFn);
375
- }
376
- }
377
- // Invoke `ngOnChanges()` and Change Detection (when necessary)
378
- const detectChanges = () => changeDetector.detectChanges();
379
- const prototype = this.componentFactory.componentType.prototype;
380
- this.implementsOnChanges = !!(prototype && prototype.ngOnChanges);
381
- this.componentScope.$watch(() => this.inputChangeCount, this.wrapCallback(() => {
382
- // Invoke `ngOnChanges()`
383
- if (this.implementsOnChanges) {
384
- const inputChanges = this.inputChanges;
385
- this.inputChanges = {};
386
- componentRef.instance.ngOnChanges(inputChanges);
387
- }
388
- viewChangeDetector.markForCheck();
389
- // If opted out of propagating digests, invoke change detection when inputs change.
390
- if (!propagateDigest) {
391
- detectChanges();
392
- }
393
- }));
394
- // If not opted out of propagating digests, invoke change detection on every digest
395
- if (propagateDigest) {
396
- this.componentScope.$watch(this.wrapCallback(detectChanges));
397
- }
398
- // If necessary, attach the view so that it will be dirty-checked.
399
- // (Allow time for the initial input values to be set and `ngOnChanges()` to be called.)
400
- if (manuallyAttachView || !propagateDigest) {
401
- let unwatch = this.componentScope.$watch(() => {
402
- unwatch();
403
- unwatch = null;
404
- const appRef = this.parentInjector.get(ApplicationRef);
405
- appRef.attachView(componentRef.hostView);
406
- });
407
- }
408
- }
409
- setupOutputs(componentRef) {
410
- const attrs = this.attrs;
411
- const outputs = this.componentFactory.outputs || [];
412
- for (const output of outputs) {
413
- const outputBindings = new PropertyBinding(output.propName, output.templateName);
414
- const bindonAttr = outputBindings.bindonAttr.substring(0, outputBindings.bindonAttr.length - 6);
415
- const bracketParenAttr = `[(${outputBindings.bracketParenAttr.substring(2, outputBindings.bracketParenAttr.length - 8)})]`;
416
- // order below is important - first update bindings then evaluate expressions
417
- if (attrs.hasOwnProperty(bindonAttr)) {
418
- this.subscribeToOutput(componentRef, outputBindings, attrs[bindonAttr], true);
419
- }
420
- if (attrs.hasOwnProperty(bracketParenAttr)) {
421
- this.subscribeToOutput(componentRef, outputBindings, attrs[bracketParenAttr], true);
422
- }
423
- if (attrs.hasOwnProperty(outputBindings.onAttr)) {
424
- this.subscribeToOutput(componentRef, outputBindings, attrs[outputBindings.onAttr]);
425
- }
426
- if (attrs.hasOwnProperty(outputBindings.parenAttr)) {
427
- this.subscribeToOutput(componentRef, outputBindings, attrs[outputBindings.parenAttr]);
428
- }
429
- }
430
- }
431
- subscribeToOutput(componentRef, output, expr, isAssignment = false) {
432
- const getter = this.$parse(expr);
433
- const setter = getter.assign;
434
- if (isAssignment && !setter) {
435
- throw new Error(`Expression '${expr}' is not assignable!`);
436
- }
437
- const emitter = componentRef.instance[output.prop];
438
- if (emitter) {
439
- emitter.subscribe({
440
- next: isAssignment ? (v) => setter(this.scope, v) :
441
- (v) => getter(this.scope, { '$event': v })
442
- });
443
- }
444
- else {
445
- throw new Error(`Missing emitter '${output.prop}' on component '${getTypeName(this.componentFactory.componentType)}'!`);
446
- }
447
- }
448
- registerCleanup(componentRef) {
449
- const testabilityRegistry = componentRef.injector.get(TestabilityRegistry);
450
- const destroyComponentRef = this.wrapCallback(() => componentRef.destroy());
451
- let destroyed = false;
452
- this.element.on('$destroy', () => {
453
- // The `$destroy` event may have been triggered by the `cleanData()` call in the
454
- // `componentScope` `$destroy` handler below. In that case, we don't want to call
455
- // `componentScope.$destroy()` again.
456
- if (!destroyed)
457
- this.componentScope.$destroy();
458
- });
459
- this.componentScope.$on('$destroy', () => {
460
- if (!destroyed) {
461
- destroyed = true;
462
- testabilityRegistry.unregisterApplication(componentRef.location.nativeElement);
463
- // The `componentScope` might be getting destroyed, because an ancestor element is being
464
- // removed/destroyed. If that is the case, jqLite/jQuery would normally invoke `cleanData()`
465
- // on the removed element and all descendants.
466
- // https://github.com/angular/angular.js/blob/2e72ea13fa98bebf6ed4b5e3c45eaf5f990ed16f/src/jqLite.js#L349-L355
467
- // https://github.com/jquery/jquery/blob/6984d1747623dbc5e87fd6c261a5b6b1628c107c/src/manipulation.js#L182
468
- //
469
- // Here, however, `destroyComponentRef()` may under some circumstances remove the element
470
- // from the DOM and therefore it will no longer be a descendant of the removed element when
471
- // `cleanData()` is called. This would result in a memory leak, because the element's data
472
- // and event handlers (and all objects directly or indirectly referenced by them) would be
473
- // retained.
474
- //
475
- // To ensure the element is always properly cleaned up, we manually call `cleanData()` on
476
- // this element and its descendants before destroying the `ComponentRef`.
477
- cleanData(this.element[0]);
478
- destroyComponentRef();
479
- }
480
- });
481
- }
482
- updateInput(componentRef, prop, prevValue, currValue) {
483
- if (this.implementsOnChanges) {
484
- this.inputChanges[prop] = new SimpleChange(prevValue, currValue, prevValue === currValue);
485
- }
486
- this.inputChangeCount++;
487
- componentRef.instance[prop] = currValue;
488
- }
489
- groupProjectableNodes() {
490
- let ngContentSelectors = this.componentFactory.ngContentSelectors;
491
- return groupNodesBySelector(ngContentSelectors, this.element.contents());
492
- }
493
- }
494
- /**
495
- * Group a set of DOM nodes into `ngContent` groups, based on the given content selectors.
496
- */
497
- function groupNodesBySelector(ngContentSelectors, nodes) {
498
- const projectableNodes = [];
499
- for (let i = 0, ii = ngContentSelectors.length; i < ii; ++i) {
500
- projectableNodes[i] = [];
501
- }
502
- for (let j = 0, jj = nodes.length; j < jj; ++j) {
503
- const node = nodes[j];
504
- const ngContentIndex = findMatchingNgContentIndex(node, ngContentSelectors);
505
- if (ngContentIndex != null) {
506
- projectableNodes[ngContentIndex].push(node);
507
- }
508
- }
509
- return projectableNodes;
510
- }
511
- function findMatchingNgContentIndex(element, ngContentSelectors) {
512
- const ngContentIndices = [];
513
- let wildcardNgContentIndex = -1;
514
- for (let i = 0; i < ngContentSelectors.length; i++) {
515
- const selector = ngContentSelectors[i];
516
- if (selector === '*') {
517
- wildcardNgContentIndex = i;
518
- }
519
- else {
520
- if (matchesSelector(element, selector)) {
521
- ngContentIndices.push(i);
522
- }
523
- }
524
- }
525
- ngContentIndices.sort();
526
- if (wildcardNgContentIndex !== -1) {
527
- ngContentIndices.push(wildcardNgContentIndex);
528
- }
529
- return ngContentIndices.length ? ngContentIndices[0] : null;
530
- }
531
- function matchesSelector(el, selector) {
532
- var _a;
533
- const elProto = Element.prototype;
534
- return el.nodeType === Node.ELEMENT_NODE
535
- // matches is supported by all browsers from 2014 onwards except non-chromium edge
536
- ?
537
- ((_a = elProto.matches) !== null && _a !== void 0 ? _a : elProto.msMatchesSelector).call(el, selector) :
538
- false;
539
- }
540
-
541
- function isThenable(obj) {
542
- return !!obj && isFunction(obj.then);
543
- }
544
- /**
545
- * Synchronous, promise-like object.
546
- */
547
- class SyncPromise {
548
- constructor() {
549
- this.resolved = false;
550
- this.callbacks = [];
551
- }
552
- static all(valuesOrPromises) {
553
- const aggrPromise = new SyncPromise();
554
- let resolvedCount = 0;
555
- const results = [];
556
- const resolve = (idx, value) => {
557
- results[idx] = value;
558
- if (++resolvedCount === valuesOrPromises.length)
559
- aggrPromise.resolve(results);
560
- };
561
- valuesOrPromises.forEach((p, idx) => {
562
- if (isThenable(p)) {
563
- p.then(v => resolve(idx, v));
564
- }
565
- else {
566
- resolve(idx, p);
567
- }
568
- });
569
- return aggrPromise;
570
- }
571
- resolve(value) {
572
- // Do nothing, if already resolved.
573
- if (this.resolved)
574
- return;
575
- this.value = value;
576
- this.resolved = true;
577
- // Run the queued callbacks.
578
- this.callbacks.forEach(callback => callback(value));
579
- this.callbacks.length = 0;
580
- }
581
- then(callback) {
582
- if (this.resolved) {
583
- callback(this.value);
584
- }
585
- else {
586
- this.callbacks.push(callback);
587
- }
588
- }
589
- }
590
-
591
- /**
592
- * @description
593
- *
594
- * A helper function that allows an Angular component to be used from AngularJS.
595
- *
596
- * *Part of the [upgrade/static](api?query=upgrade%2Fstatic)
597
- * library for hybrid upgrade apps that support AOT compilation*
598
- *
599
- * This helper function returns a factory function to be used for registering
600
- * an AngularJS wrapper directive for "downgrading" an Angular component.
601
- *
602
- * @usageNotes
603
- * ### Examples
604
- *
605
- * Let's assume that you have an Angular component called `ng2Heroes` that needs
606
- * to be made available in AngularJS templates.
607
- *
608
- * {@example upgrade/static/ts/full/module.ts region="ng2-heroes"}
609
- *
610
- * We must create an AngularJS [directive](https://docs.angularjs.org/guide/directive)
611
- * that will make this Angular component available inside AngularJS templates.
612
- * The `downgradeComponent()` function returns a factory function that we
613
- * can use to define the AngularJS directive that wraps the "downgraded" component.
614
- *
615
- * {@example upgrade/static/ts/full/module.ts region="ng2-heroes-wrapper"}
616
- *
617
- * For more details and examples on downgrading Angular components to AngularJS components please
618
- * visit the [Upgrade guide](guide/upgrade#using-angular-components-from-angularjs-code).
619
- *
620
- * @param info contains information about the Component that is being downgraded:
621
- *
622
- * - `component: Type<any>`: The type of the Component that will be downgraded
623
- * - `downgradedModule?: string`: The name of the downgraded module (if any) that the component
624
- * "belongs to", as returned by a call to `downgradeModule()`. It is the module, whose
625
- * corresponding Angular module will be bootstrapped, when the component needs to be instantiated.
626
- * <br />
627
- * (This option is only necessary when using `downgradeModule()` to downgrade more than one
628
- * Angular module.)
629
- * - `propagateDigest?: boolean`: Whether to perform {@link ChangeDetectorRef#detectChanges
630
- * change detection} on the component on every
631
- * [$digest](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest). If set to `false`,
632
- * change detection will still be performed when any of the component's inputs changes.
633
- * (Default: true)
634
- *
635
- * @returns a factory function that can be used to register the component in an
636
- * AngularJS module.
637
- *
638
- * @publicApi
639
- */
640
- function downgradeComponent(info) {
641
- const directiveFactory = function ($compile, $injector, $parse) {
642
- // When using `downgradeModule()`, we need to handle certain things specially. For example:
643
- // - We always need to attach the component view to the `ApplicationRef` for it to be
644
- // dirty-checked.
645
- // - We need to ensure callbacks to Angular APIs (e.g. change detection) are run inside the
646
- // Angular zone.
647
- // NOTE: This is not needed, when using `UpgradeModule`, because `$digest()` will be run
648
- // inside the Angular zone (except if explicitly escaped, in which case we shouldn't
649
- // force it back in).
650
- const isNgUpgradeLite = getUpgradeAppType($injector) === 3 /* UpgradeAppType.Lite */;
651
- const wrapCallback = !isNgUpgradeLite ? cb => cb : cb => () => NgZone.isInAngularZone() ? cb() : ngZone.run(cb);
652
- let ngZone;
653
- // When downgrading multiple modules, special handling is needed wrt injectors.
654
- const hasMultipleDowngradedModules = isNgUpgradeLite && (getDowngradedModuleCount($injector) > 1);
655
- return {
656
- restrict: 'E',
657
- terminal: true,
658
- require: [REQUIRE_INJECTOR, REQUIRE_NG_MODEL],
659
- link: (scope, element, attrs, required) => {
660
- var _a;
661
- // We might have to compile the contents asynchronously, because this might have been
662
- // triggered by `UpgradeNg1ComponentAdapterBuilder`, before the Angular templates have
663
- // been compiled.
664
- const ngModel = required[1];
665
- const parentInjector = required[0];
666
- let moduleInjector = undefined;
667
- let ranAsync = false;
668
- if (!parentInjector || hasMultipleDowngradedModules) {
669
- const downgradedModule = info.downgradedModule || '';
670
- const lazyModuleRefKey = `${LAZY_MODULE_REF}${downgradedModule}`;
671
- const attemptedAction = `instantiating component '${getTypeName(info.component)}'`;
672
- validateInjectionKey($injector, downgradedModule, lazyModuleRefKey, attemptedAction);
673
- const lazyModuleRef = $injector.get(lazyModuleRefKey);
674
- moduleInjector = (_a = lazyModuleRef.injector) !== null && _a !== void 0 ? _a : lazyModuleRef.promise;
675
- }
676
- // Notes:
677
- //
678
- // There are two injectors: `finalModuleInjector` and `finalParentInjector` (they might be
679
- // the same instance, but that is irrelevant):
680
- // - `finalModuleInjector` is used to retrieve `ComponentFactoryResolver`, thus it must be
681
- // on the same tree as the `NgModule` that declares this downgraded component.
682
- // - `finalParentInjector` is used for all other injection purposes.
683
- // (Note that Angular knows to only traverse the component-tree part of that injector,
684
- // when looking for an injectable and then switch to the module injector.)
685
- //
686
- // There are basically three cases:
687
- // - If there is no parent component (thus no `parentInjector`), we bootstrap the downgraded
688
- // `NgModule` and use its injector as both `finalModuleInjector` and
689
- // `finalParentInjector`.
690
- // - If there is a parent component (and thus a `parentInjector`) and we are sure that it
691
- // belongs to the same `NgModule` as this downgraded component (e.g. because there is only
692
- // one downgraded module, we use that `parentInjector` as both `finalModuleInjector` and
693
- // `finalParentInjector`.
694
- // - If there is a parent component, but it may belong to a different `NgModule`, then we
695
- // use the `parentInjector` as `finalParentInjector` and this downgraded component's
696
- // declaring `NgModule`'s injector as `finalModuleInjector`.
697
- // Note 1: If the `NgModule` is already bootstrapped, we just get its injector (we don't
698
- // bootstrap again).
699
- // Note 2: It is possible that (while there are multiple downgraded modules) this
700
- // downgraded component and its parent component both belong to the same NgModule.
701
- // In that case, we could have used the `parentInjector` as both
702
- // `finalModuleInjector` and `finalParentInjector`, but (for simplicity) we are
703
- // treating this case as if they belong to different `NgModule`s. That doesn't
704
- // really affect anything, since `parentInjector` has `moduleInjector` as ancestor
705
- // and trying to resolve `ComponentFactoryResolver` from either one will return
706
- // the same instance.
707
- // If there is a parent component, use its injector as parent injector.
708
- // If this is a "top-level" Angular component, use the module injector.
709
- const finalParentInjector = parentInjector || moduleInjector;
710
- // If this is a "top-level" Angular component or the parent component may belong to a
711
- // different `NgModule`, use the module injector for module-specific dependencies.
712
- // If there is a parent component that belongs to the same `NgModule`, use its injector.
713
- const finalModuleInjector = moduleInjector || parentInjector;
714
- const doDowngrade = (injector, moduleInjector) => {
715
- // Retrieve `ComponentFactoryResolver` from the injector tied to the `NgModule` this
716
- // component belongs to.
717
- const componentFactoryResolver = moduleInjector.get(ComponentFactoryResolver);
718
- const componentFactory = componentFactoryResolver.resolveComponentFactory(info.component);
719
- if (!componentFactory) {
720
- throw new Error(`Expecting ComponentFactory for: ${getTypeName(info.component)}`);
721
- }
722
- const injectorPromise = new ParentInjectorPromise(element);
723
- const facade = new DowngradeComponentAdapter(element, attrs, scope, ngModel, injector, $compile, $parse, componentFactory, wrapCallback);
724
- const projectableNodes = facade.compileContents();
725
- const componentRef = facade.createComponentAndSetup(projectableNodes, isNgUpgradeLite, info.propagateDigest);
726
- injectorPromise.resolve(componentRef.injector);
727
- if (ranAsync) {
728
- // If this is run async, it is possible that it is not run inside a
729
- // digest and initial input values will not be detected.
730
- scope.$evalAsync(() => { });
731
- }
732
- };
733
- const downgradeFn = !isNgUpgradeLite ? doDowngrade : (pInjector, mInjector) => {
734
- if (!ngZone) {
735
- ngZone = pInjector.get(NgZone);
736
- }
737
- wrapCallback(() => doDowngrade(pInjector, mInjector))();
738
- };
739
- // NOTE:
740
- // Not using `ParentInjectorPromise.all()` (which is inherited from `SyncPromise`), because
741
- // Closure Compiler (or some related tool) complains:
742
- // `TypeError: ...$src$downgrade_component_ParentInjectorPromise.all is not a function`
743
- SyncPromise.all([finalParentInjector, finalModuleInjector])
744
- .then(([pInjector, mInjector]) => downgradeFn(pInjector, mInjector));
745
- ranAsync = true;
746
- }
747
- };
748
- };
749
- // bracket-notation because of closure - see #14441
750
- directiveFactory['$inject'] = [$COMPILE, $INJECTOR, $PARSE];
751
- return directiveFactory;
752
- }
753
- /**
754
- * Synchronous promise-like object to wrap parent injectors,
755
- * to preserve the synchronous nature of AngularJS's `$compile`.
756
- */
757
- class ParentInjectorPromise extends SyncPromise {
758
- constructor(element) {
759
- super();
760
- this.element = element;
761
- this.injectorKey = controllerKey(INJECTOR_KEY);
762
- // Store the promise on the element.
763
- element.data(this.injectorKey, this);
764
- }
765
- resolve(injector) {
766
- // Store the real injector on the element.
767
- this.element.data(this.injectorKey, injector);
768
- // Release the element to prevent memory leaks.
769
- this.element = null;
770
- // Resolve the promise.
771
- super.resolve(injector);
772
- }
773
- }
774
-
775
- /**
776
- * @description
777
- *
778
- * A helper function to allow an Angular service to be accessible from AngularJS.
779
- *
780
- * *Part of the [upgrade/static](api?query=upgrade%2Fstatic)
781
- * library for hybrid upgrade apps that support AOT compilation*
782
- *
783
- * This helper function returns a factory function that provides access to the Angular
784
- * service identified by the `token` parameter.
785
- *
786
- * @usageNotes
787
- * ### Examples
788
- *
789
- * First ensure that the service to be downgraded is provided in an `NgModule`
790
- * that will be part of the upgrade application. For example, let's assume we have
791
- * defined `HeroesService`
792
- *
793
- * {@example upgrade/static/ts/full/module.ts region="ng2-heroes-service"}
794
- *
795
- * and that we have included this in our upgrade app `NgModule`
796
- *
797
- * {@example upgrade/static/ts/full/module.ts region="ng2-module"}
798
- *
799
- * Now we can register the `downgradeInjectable` factory function for the service
800
- * on an AngularJS module.
801
- *
802
- * {@example upgrade/static/ts/full/module.ts region="downgrade-ng2-heroes-service"}
803
- *
804
- * Inside an AngularJS component's controller we can get hold of the
805
- * downgraded service via the name we gave when downgrading.
806
- *
807
- * {@example upgrade/static/ts/full/module.ts region="example-app"}
808
- *
809
- * <div class="alert is-important">
810
- *
811
- * When using `downgradeModule()`, downgraded injectables will not be available until the Angular
812
- * module that provides them is instantiated. In order to be safe, you need to ensure that the
813
- * downgraded injectables are not used anywhere _outside_ the part of the app where it is
814
- * guaranteed that their module has been instantiated.
815
- *
816
- * For example, it is _OK_ to use a downgraded service in an upgraded component that is only used
817
- * from a downgraded Angular component provided by the same Angular module as the injectable, but
818
- * it is _not OK_ to use it in an AngularJS component that may be used independently of Angular or
819
- * use it in a downgraded Angular component from a different module.
820
- *
821
- * </div>
822
- *
823
- * @param token an `InjectionToken` that identifies a service provided from Angular.
824
- * @param downgradedModule the name of the downgraded module (if any) that the injectable
825
- * "belongs to", as returned by a call to `downgradeModule()`. It is the module, whose injector will
826
- * be used for instantiating the injectable.<br />
827
- * (This option is only necessary when using `downgradeModule()` to downgrade more than one Angular
828
- * module.)
829
- *
830
- * @returns a [factory function](https://docs.angularjs.org/guide/di) that can be
831
- * used to register the service on an AngularJS module.
832
- *
833
- * @publicApi
834
- */
835
- function downgradeInjectable(token, downgradedModule = '') {
836
- const factory = function ($injector) {
837
- const injectorKey = `${INJECTOR_KEY}${downgradedModule}`;
838
- const injectableName = isFunction(token) ? getTypeName(token) : String(token);
839
- const attemptedAction = `instantiating injectable '${injectableName}'`;
840
- validateInjectionKey($injector, downgradedModule, injectorKey, attemptedAction);
841
- try {
842
- const injector = $injector.get(injectorKey);
843
- return injector.get(token);
844
- }
845
- catch (err) {
846
- throw new Error(`Error while ${attemptedAction}: ${err.message || err}`);
847
- }
848
- };
849
- factory['$inject'] = [$INJECTOR];
850
- return factory;
851
- }
852
-
853
- // Constants
854
- const REQUIRE_PREFIX_RE = /^(\^\^?)?(\?)?(\^\^?)?/;
855
- // Classes
856
- class UpgradeHelper {
857
- constructor(injector, name, elementRef, directive) {
858
- this.name = name;
859
- this.$injector = injector.get($INJECTOR);
860
- this.$compile = this.$injector.get($COMPILE);
861
- this.$controller = this.$injector.get($CONTROLLER);
862
- this.element = elementRef.nativeElement;
863
- this.$element = element(this.element);
864
- this.directive = directive !== null && directive !== void 0 ? directive : UpgradeHelper.getDirective(this.$injector, name);
865
- }
866
- static getDirective($injector, name) {
867
- const directives = $injector.get(name + 'Directive');
868
- if (directives.length > 1) {
869
- throw new Error(`Only support single directive definition for: ${name}`);
870
- }
871
- const directive = directives[0];
872
- // AngularJS will transform `link: xyz` to `compile: () => xyz`. So we can only tell there was a
873
- // user-defined `compile` if there is no `link`. In other cases, we will just ignore `compile`.
874
- if (directive.compile && !directive.link)
875
- notSupported(name, 'compile');
876
- if (directive.replace)
877
- notSupported(name, 'replace');
878
- if (directive.terminal)
879
- notSupported(name, 'terminal');
880
- return directive;
881
- }
882
- static getTemplate($injector, directive, fetchRemoteTemplate = false, $element) {
883
- if (directive.template !== undefined) {
884
- return getOrCall(directive.template, $element);
885
- }
886
- else if (directive.templateUrl) {
887
- const $templateCache = $injector.get($TEMPLATE_CACHE);
888
- const url = getOrCall(directive.templateUrl, $element);
889
- const template = $templateCache.get(url);
890
- if (template !== undefined) {
891
- return template;
892
- }
893
- else if (!fetchRemoteTemplate) {
894
- throw new Error('loading directive templates asynchronously is not supported');
895
- }
896
- return new Promise((resolve, reject) => {
897
- const $httpBackend = $injector.get($HTTP_BACKEND);
898
- $httpBackend('GET', url, null, (status, response) => {
899
- if (status === 200) {
900
- resolve($templateCache.put(url, response));
901
- }
902
- else {
903
- reject(`GET component template from '${url}' returned '${status}: ${response}'`);
904
- }
905
- });
906
- });
907
- }
908
- else {
909
- throw new Error(`Directive '${directive.name}' is not a component, it is missing template.`);
910
- }
911
- }
912
- buildController(controllerType, $scope) {
913
- var _a, _b;
914
- // TODO: Document that we do not pre-assign bindings on the controller instance.
915
- // Quoted properties below so that this code can be optimized with Closure Compiler.
916
- const locals = { '$scope': $scope, '$element': this.$element };
917
- const controller = this.$controller(controllerType, locals, null, this.directive.controllerAs);
918
- (_b = (_a = this.$element).data) === null || _b === void 0 ? void 0 : _b.call(_a, controllerKey(this.directive.name), controller);
919
- return controller;
920
- }
921
- compileTemplate(template) {
922
- if (template === undefined) {
923
- template =
924
- UpgradeHelper.getTemplate(this.$injector, this.directive, false, this.$element);
925
- }
926
- return this.compileHtml(template);
927
- }
928
- onDestroy($scope, controllerInstance) {
929
- if (controllerInstance && isFunction(controllerInstance.$onDestroy)) {
930
- controllerInstance.$onDestroy();
931
- }
932
- $scope.$destroy();
933
- cleanData(this.element);
934
- }
935
- prepareTransclusion() {
936
- const transclude = this.directive.transclude;
937
- const contentChildNodes = this.extractChildNodes();
938
- const attachChildrenFn = (scope, cloneAttachFn) => {
939
- // Since AngularJS v1.5.8, `cloneAttachFn` will try to destroy the transclusion scope if
940
- // `$template` is empty. Since the transcluded content comes from Angular, not AngularJS,
941
- // there will be no transclusion scope here.
942
- // Provide a dummy `scope.$destroy()` method to prevent `cloneAttachFn` from throwing.
943
- scope = scope || { $destroy: () => undefined };
944
- return cloneAttachFn($template, scope);
945
- };
946
- let $template = contentChildNodes;
947
- if (transclude) {
948
- const slots = Object.create(null);
949
- if (typeof transclude === 'object') {
950
- $template = [];
951
- const slotMap = Object.create(null);
952
- const filledSlots = Object.create(null);
953
- // Parse the element selectors.
954
- Object.keys(transclude).forEach(slotName => {
955
- let selector = transclude[slotName];
956
- const optional = selector.charAt(0) === '?';
957
- selector = optional ? selector.substring(1) : selector;
958
- slotMap[selector] = slotName;
959
- slots[slotName] = null; // `null`: Defined but not yet filled.
960
- filledSlots[slotName] = optional; // Consider optional slots as filled.
961
- });
962
- // Add the matching elements into their slot.
963
- contentChildNodes.forEach(node => {
964
- const slotName = slotMap[directiveNormalize(node.nodeName.toLowerCase())];
965
- if (slotName) {
966
- filledSlots[slotName] = true;
967
- slots[slotName] = slots[slotName] || [];
968
- slots[slotName].push(node);
969
- }
970
- else {
971
- $template.push(node);
972
- }
973
- });
974
- // Check for required slots that were not filled.
975
- Object.keys(filledSlots).forEach(slotName => {
976
- if (!filledSlots[slotName]) {
977
- throw new Error(`Required transclusion slot '${slotName}' on directive: ${this.name}`);
978
- }
979
- });
980
- Object.keys(slots).filter(slotName => slots[slotName]).forEach(slotName => {
981
- const nodes = slots[slotName];
982
- slots[slotName] = (scope, cloneAttach) => {
983
- return cloneAttach(nodes, scope);
984
- };
985
- });
986
- }
987
- // Attach `$$slots` to default slot transclude fn.
988
- attachChildrenFn.$$slots = slots;
989
- // AngularJS v1.6+ ignores empty or whitespace-only transcluded text nodes. But Angular
990
- // removes all text content after the first interpolation and updates it later, after
991
- // evaluating the expressions. This would result in AngularJS failing to recognize text
992
- // nodes that start with an interpolation as transcluded content and use the fallback
993
- // content instead.
994
- // To avoid this issue, we add a
995
- // [zero-width non-joiner character](https://en.wikipedia.org/wiki/Zero-width_non-joiner)
996
- // to empty text nodes (which can only be a result of Angular removing their initial content).
997
- // NOTE: Transcluded text content that starts with whitespace followed by an interpolation
998
- // will still fail to be detected by AngularJS v1.6+
999
- $template.forEach(node => {
1000
- if (node.nodeType === Node.TEXT_NODE && !node.nodeValue) {
1001
- node.nodeValue = '\u200C';
1002
- }
1003
- });
1004
- }
1005
- return attachChildrenFn;
1006
- }
1007
- resolveAndBindRequiredControllers(controllerInstance) {
1008
- const directiveRequire = this.getDirectiveRequire();
1009
- const requiredControllers = this.resolveRequire(directiveRequire);
1010
- if (controllerInstance && this.directive.bindToController && isMap(directiveRequire)) {
1011
- const requiredControllersMap = requiredControllers;
1012
- Object.keys(requiredControllersMap).forEach(key => {
1013
- controllerInstance[key] = requiredControllersMap[key];
1014
- });
1015
- }
1016
- return requiredControllers;
1017
- }
1018
- compileHtml(html) {
1019
- this.element.innerHTML = html;
1020
- return this.$compile(this.element.childNodes);
1021
- }
1022
- extractChildNodes() {
1023
- const childNodes = [];
1024
- let childNode;
1025
- while (childNode = this.element.firstChild) {
1026
- this.element.removeChild(childNode);
1027
- childNodes.push(childNode);
1028
- }
1029
- return childNodes;
1030
- }
1031
- getDirectiveRequire() {
1032
- const require = this.directive.require || (this.directive.controller && this.directive.name);
1033
- if (isMap(require)) {
1034
- Object.entries(require).forEach(([key, value]) => {
1035
- const match = value.match(REQUIRE_PREFIX_RE);
1036
- const name = value.substring(match[0].length);
1037
- if (!name) {
1038
- require[key] = match[0] + key;
1039
- }
1040
- });
1041
- }
1042
- return require;
1043
- }
1044
- resolveRequire(require) {
1045
- if (!require) {
1046
- return null;
1047
- }
1048
- else if (Array.isArray(require)) {
1049
- return require.map(req => this.resolveRequire(req));
1050
- }
1051
- else if (typeof require === 'object') {
1052
- const value = {};
1053
- Object.keys(require).forEach(key => value[key] = this.resolveRequire(require[key]));
1054
- return value;
1055
- }
1056
- else if (typeof require === 'string') {
1057
- const match = require.match(REQUIRE_PREFIX_RE);
1058
- const inheritType = match[1] || match[3];
1059
- const name = require.substring(match[0].length);
1060
- const isOptional = !!match[2];
1061
- const searchParents = !!inheritType;
1062
- const startOnParent = inheritType === '^^';
1063
- const ctrlKey = controllerKey(name);
1064
- const elem = startOnParent ? this.$element.parent() : this.$element;
1065
- const value = searchParents ? elem.inheritedData(ctrlKey) : elem.data(ctrlKey);
1066
- if (!value && !isOptional) {
1067
- throw new Error(`Unable to find required '${require}' in upgraded directive '${this.name}'.`);
1068
- }
1069
- return value;
1070
- }
1071
- else {
1072
- throw new Error(`Unrecognized 'require' syntax on upgraded directive '${this.name}': ${require}`);
1073
- }
1074
- }
1075
- }
1076
- function getOrCall(property, ...args) {
1077
- return isFunction(property) ? property(...args) : property;
1078
- }
1079
- // NOTE: Only works for `typeof T !== 'object'`.
1080
- function isMap(value) {
1081
- return value && !Array.isArray(value) && typeof value === 'object';
1082
- }
1083
- function notSupported(name, feature) {
1084
- throw new Error(`Upgraded directive '${name}' contains unsupported feature: '${feature}'.`);
1085
- }
1086
-
1087
- const CAMEL_CASE = /([A-Z])/g;
1088
- const INITIAL_VALUE = {
1089
- __UNINITIALIZED__: true
1090
- };
1091
- const NOT_SUPPORTED = 'NOT_SUPPORTED';
1092
- function getInputPropertyMapName(name) {
1093
- return `input_${name}`;
1094
- }
1095
- function getOutputPropertyMapName(name) {
1096
- return `output_${name}`;
1097
- }
1098
- class UpgradeNg1ComponentAdapterBuilder {
1099
- constructor(name) {
1100
- this.name = name;
1101
- this.inputs = [];
1102
- this.inputsRename = [];
1103
- this.outputs = [];
1104
- this.outputsRename = [];
1105
- this.propertyOutputs = [];
1106
- this.checkProperties = [];
1107
- this.propertyMap = {};
1108
- this.directive = null;
1109
- const selector = name.replace(CAMEL_CASE, (all, next) => '-' + next.toLowerCase());
1110
- const self = this;
1111
- let MyClass = class MyClass extends UpgradeNg1ComponentAdapter {
1112
- constructor(scope, injector, elementRef) {
1113
- super(new UpgradeHelper(injector, name, elementRef, self.directive || undefined), scope, self.template, self.inputs, self.outputs, self.propertyOutputs, self.checkProperties, self.propertyMap);
1114
- }
1115
- };
1116
- MyClass = __decorate([
1117
- Directive({ jit: true, selector: selector, inputs: this.inputsRename, outputs: this.outputsRename }),
1118
- __param(0, Inject($SCOPE)),
1119
- __metadata("design:paramtypes", [Object, Injector, ElementRef])
1120
- ], MyClass);
1121
- this.type = MyClass;
1122
- }
1123
- extractBindings() {
1124
- const btcIsObject = typeof this.directive.bindToController === 'object';
1125
- if (btcIsObject && Object.keys(this.directive.scope).length) {
1126
- throw new Error(`Binding definitions on scope and controller at the same time are not supported.`);
1127
- }
1128
- const context = (btcIsObject) ? this.directive.bindToController : this.directive.scope;
1129
- if (typeof context == 'object') {
1130
- Object.keys(context).forEach(propName => {
1131
- const definition = context[propName];
1132
- const bindingType = definition.charAt(0);
1133
- const bindingOptions = definition.charAt(1);
1134
- const attrName = definition.substring(bindingOptions === '?' ? 2 : 1) || propName;
1135
- // QUESTION: What about `=*`? Ignore? Throw? Support?
1136
- const inputName = getInputPropertyMapName(attrName);
1137
- const inputNameRename = `${inputName}: ${attrName}`;
1138
- const outputName = getOutputPropertyMapName(attrName);
1139
- const outputNameRename = `${outputName}: ${attrName}`;
1140
- const outputNameRenameChange = `${outputNameRename}Change`;
1141
- switch (bindingType) {
1142
- case '@':
1143
- case '<':
1144
- this.inputs.push(inputName);
1145
- this.inputsRename.push(inputNameRename);
1146
- this.propertyMap[inputName] = propName;
1147
- break;
1148
- case '=':
1149
- this.inputs.push(inputName);
1150
- this.inputsRename.push(inputNameRename);
1151
- this.propertyMap[inputName] = propName;
1152
- this.outputs.push(outputName);
1153
- this.outputsRename.push(outputNameRenameChange);
1154
- this.propertyMap[outputName] = propName;
1155
- this.checkProperties.push(propName);
1156
- this.propertyOutputs.push(outputName);
1157
- break;
1158
- case '&':
1159
- this.outputs.push(outputName);
1160
- this.outputsRename.push(outputNameRename);
1161
- this.propertyMap[outputName] = propName;
1162
- break;
1163
- default:
1164
- let json = JSON.stringify(context);
1165
- throw new Error(`Unexpected mapping '${bindingType}' in '${json}' in '${this.name}' directive.`);
1166
- }
1167
- });
1168
- }
1169
- }
1170
- /**
1171
- * Upgrade ng1 components into Angular.
1172
- */
1173
- static resolve(exportedComponents, $injector) {
1174
- const promises = Object.entries(exportedComponents).map(([name, exportedComponent]) => {
1175
- exportedComponent.directive = UpgradeHelper.getDirective($injector, name);
1176
- exportedComponent.extractBindings();
1177
- return Promise
1178
- .resolve(UpgradeHelper.getTemplate($injector, exportedComponent.directive, true))
1179
- .then(template => exportedComponent.template = template);
1180
- });
1181
- return Promise.all(promises);
1182
- }
1183
- }
1184
- class UpgradeNg1ComponentAdapter {
1185
- constructor(helper, scope, template, inputs, outputs, propOuts, checkProperties, propertyMap) {
1186
- this.helper = helper;
1187
- this.template = template;
1188
- this.inputs = inputs;
1189
- this.outputs = outputs;
1190
- this.propOuts = propOuts;
1191
- this.checkProperties = checkProperties;
1192
- this.propertyMap = propertyMap;
1193
- this.controllerInstance = null;
1194
- this.destinationObj = null;
1195
- this.checkLastValues = [];
1196
- this.$element = null;
1197
- this.directive = helper.directive;
1198
- this.element = helper.element;
1199
- this.$element = helper.$element;
1200
- this.componentScope = scope.$new(!!this.directive.scope);
1201
- const controllerType = this.directive.controller;
1202
- if (this.directive.bindToController && controllerType) {
1203
- this.controllerInstance = this.helper.buildController(controllerType, this.componentScope);
1204
- this.destinationObj = this.controllerInstance;
1205
- }
1206
- else {
1207
- this.destinationObj = this.componentScope;
1208
- }
1209
- for (const input of this.inputs) {
1210
- this[input] = null;
1211
- }
1212
- for (const output of this.outputs) {
1213
- const emitter = this[output] = new EventEmitter();
1214
- if (this.propOuts.indexOf(output) === -1) {
1215
- this.setComponentProperty(output, (emitter => (value) => emitter.emit(value))(emitter));
1216
- }
1217
- }
1218
- this.checkLastValues.push(...Array(propOuts.length).fill(INITIAL_VALUE));
1219
- }
1220
- ngOnInit() {
1221
- // Collect contents, insert and compile template
1222
- const attachChildNodes = this.helper.prepareTransclusion();
1223
- const linkFn = this.helper.compileTemplate(this.template);
1224
- // Instantiate controller (if not already done so)
1225
- const controllerType = this.directive.controller;
1226
- const bindToController = this.directive.bindToController;
1227
- if (controllerType && !bindToController) {
1228
- this.controllerInstance = this.helper.buildController(controllerType, this.componentScope);
1229
- }
1230
- // Require other controllers
1231
- const requiredControllers = this.helper.resolveAndBindRequiredControllers(this.controllerInstance);
1232
- // Hook: $onInit
1233
- if (this.controllerInstance && isFunction(this.controllerInstance.$onInit)) {
1234
- this.controllerInstance.$onInit();
1235
- }
1236
- // Linking
1237
- const link = this.directive.link;
1238
- const preLink = typeof link == 'object' && link.pre;
1239
- const postLink = typeof link == 'object' ? link.post : link;
1240
- const attrs = NOT_SUPPORTED;
1241
- const transcludeFn = NOT_SUPPORTED;
1242
- if (preLink) {
1243
- preLink(this.componentScope, this.$element, attrs, requiredControllers, transcludeFn);
1244
- }
1245
- linkFn(this.componentScope, null, { parentBoundTranscludeFn: attachChildNodes });
1246
- if (postLink) {
1247
- postLink(this.componentScope, this.$element, attrs, requiredControllers, transcludeFn);
1248
- }
1249
- // Hook: $postLink
1250
- if (this.controllerInstance && isFunction(this.controllerInstance.$postLink)) {
1251
- this.controllerInstance.$postLink();
1252
- }
1253
- }
1254
- ngOnChanges(changes) {
1255
- const ng1Changes = {};
1256
- Object.keys(changes).forEach(propertyMapName => {
1257
- const change = changes[propertyMapName];
1258
- this.setComponentProperty(propertyMapName, change.currentValue);
1259
- ng1Changes[this.propertyMap[propertyMapName]] = change;
1260
- });
1261
- if (isFunction(this.destinationObj.$onChanges)) {
1262
- this.destinationObj.$onChanges(ng1Changes);
1263
- }
1264
- }
1265
- ngDoCheck() {
1266
- const destinationObj = this.destinationObj;
1267
- const lastValues = this.checkLastValues;
1268
- const checkProperties = this.checkProperties;
1269
- const propOuts = this.propOuts;
1270
- checkProperties.forEach((propName, i) => {
1271
- const value = destinationObj[propName];
1272
- const last = lastValues[i];
1273
- if (!strictEquals(last, value)) {
1274
- const eventEmitter = this[propOuts[i]];
1275
- eventEmitter.emit(lastValues[i] = value);
1276
- }
1277
- });
1278
- if (this.controllerInstance && isFunction(this.controllerInstance.$doCheck)) {
1279
- this.controllerInstance.$doCheck();
1280
- }
1281
- }
1282
- ngOnDestroy() {
1283
- this.helper.onDestroy(this.componentScope, this.controllerInstance);
1284
- }
1285
- setComponentProperty(name, value) {
1286
- this.destinationObj[this.propertyMap[name]] = value;
1287
- }
1288
- }
1289
- UpgradeNg1ComponentAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0-next.3", ngImport: i0, type: UpgradeNg1ComponentAdapter, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
1290
- UpgradeNg1ComponentAdapter.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0-next.3", type: UpgradeNg1ComponentAdapter, usesOnChanges: true, ngImport: i0 });
1291
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0-next.3", ngImport: i0, type: UpgradeNg1ComponentAdapter, decorators: [{
1292
- type: Directive
1293
- }], ctorParameters: function () { return [{ type: UpgradeHelper }, { type: undefined }, { type: undefined }, { type: undefined }, { type: undefined }, { type: undefined }, { type: undefined }, { type: undefined }]; } });
1294
-
1295
- let upgradeCount = 0;
1296
- /**
1297
- * Use `UpgradeAdapter` to allow AngularJS and Angular to coexist in a single application.
1298
- *
1299
- * The `UpgradeAdapter` allows:
1300
- * 1. creation of Angular component from AngularJS component directive
1301
- * (See [UpgradeAdapter#upgradeNg1Component()])
1302
- * 2. creation of AngularJS directive from Angular component.
1303
- * (See [UpgradeAdapter#downgradeNg2Component()])
1304
- * 3. Bootstrapping of a hybrid Angular application which contains both of the frameworks
1305
- * coexisting in a single application.
1306
- *
1307
- * @usageNotes
1308
- * ### Mental Model
1309
- *
1310
- * When reasoning about how a hybrid application works it is useful to have a mental model which
1311
- * describes what is happening and explains what is happening at the lowest level.
1312
- *
1313
- * 1. There are two independent frameworks running in a single application, each framework treats
1314
- * the other as a black box.
1315
- * 2. Each DOM element on the page is owned exactly by one framework. Whichever framework
1316
- * instantiated the element is the owner. Each framework only updates/interacts with its own
1317
- * DOM elements and ignores others.
1318
- * 3. AngularJS directives always execute inside AngularJS framework codebase regardless of
1319
- * where they are instantiated.
1320
- * 4. Angular components always execute inside Angular framework codebase regardless of
1321
- * where they are instantiated.
1322
- * 5. An AngularJS component can be upgraded to an Angular component. This creates an
1323
- * Angular directive, which bootstraps the AngularJS component directive in that location.
1324
- * 6. An Angular component can be downgraded to an AngularJS component directive. This creates
1325
- * an AngularJS directive, which bootstraps the Angular component in that location.
1326
- * 7. Whenever an adapter component is instantiated the host element is owned by the framework
1327
- * doing the instantiation. The other framework then instantiates and owns the view for that
1328
- * component. This implies that component bindings will always follow the semantics of the
1329
- * instantiation framework. The syntax is always that of Angular syntax.
1330
- * 8. AngularJS is always bootstrapped first and owns the bottom most view.
1331
- * 9. The new application is running in Angular zone, and therefore it no longer needs calls to
1332
- * `$apply()`.
1333
- *
1334
- * ### Example
1335
- *
1336
- * ```
1337
- * const adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module), myCompilerOptions);
1338
- * const module = angular.module('myExample', []);
1339
- * module.directive('ng2Comp', adapter.downgradeNg2Component(Ng2Component));
1340
- *
1341
- * module.directive('ng1Hello', function() {
1342
- * return {
1343
- * scope: { title: '=' },
1344
- * template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
1345
- * };
1346
- * });
1347
- *
1348
- *
1349
- * @Component({
1350
- * selector: 'ng2-comp',
1351
- * inputs: ['name'],
1352
- * template: 'ng2[<ng1-hello [title]="name">transclude</ng1-hello>](<ng-content></ng-content>)',
1353
- * directives:
1354
- * })
1355
- * class Ng2Component {
1356
- * }
1357
- *
1358
- * @NgModule({
1359
- * declarations: [Ng2Component, adapter.upgradeNg1Component('ng1Hello')],
1360
- * imports: [BrowserModule]
1361
- * })
1362
- * class MyNg2Module {}
1363
- *
1364
- *
1365
- * document.body.innerHTML = '<ng2-comp name="World">project</ng2-comp>';
1366
- *
1367
- * adapter.bootstrap(document.body, ['myExample']).ready(function() {
1368
- * expect(document.body.textContent).toEqual(
1369
- * "ng2[ng1[Hello World!](transclude)](project)");
1370
- * });
1371
- *
1372
- * ```
1373
- *
1374
- * @deprecated Deprecated since v5. Use `upgrade/static` instead, which also supports
1375
- * [Ahead-of-Time compilation](guide/aot-compiler).
1376
- * @publicApi
1377
- */
1378
- class UpgradeAdapter {
1379
- constructor(ng2AppModule, compilerOptions) {
1380
- this.ng2AppModule = ng2AppModule;
1381
- this.compilerOptions = compilerOptions;
1382
- this.idPrefix = `NG2_UPGRADE_${upgradeCount++}_`;
1383
- this.downgradedComponents = [];
1384
- /**
1385
- * An internal map of ng1 components which need to up upgraded to ng2.
1386
- *
1387
- * We can't upgrade until injector is instantiated and we can retrieve the component metadata.
1388
- * For this reason we keep a list of components to upgrade until ng1 injector is bootstrapped.
1389
- *
1390
- * @internal
1391
- */
1392
- this.ng1ComponentsToBeUpgraded = {};
1393
- this.upgradedProviders = [];
1394
- this.moduleRef = null;
1395
- if (!ng2AppModule) {
1396
- throw new Error('UpgradeAdapter cannot be instantiated without an NgModule of the Angular app.');
1397
- }
1398
- }
1399
- /**
1400
- * Allows Angular Component to be used from AngularJS.
1401
- *
1402
- * Use `downgradeNg2Component` to create an AngularJS Directive Definition Factory from
1403
- * Angular Component. The adapter will bootstrap Angular component from within the
1404
- * AngularJS template.
1405
- *
1406
- * @usageNotes
1407
- * ### Mental Model
1408
- *
1409
- * 1. The component is instantiated by being listed in AngularJS template. This means that the
1410
- * host element is controlled by AngularJS, but the component's view will be controlled by
1411
- * Angular.
1412
- * 2. Even thought the component is instantiated in AngularJS, it will be using Angular
1413
- * syntax. This has to be done, this way because we must follow Angular components do not
1414
- * declare how the attributes should be interpreted.
1415
- * 3. `ng-model` is controlled by AngularJS and communicates with the downgraded Angular component
1416
- * by way of the `ControlValueAccessor` interface from @angular/forms. Only components that
1417
- * implement this interface are eligible.
1418
- *
1419
- * ### Supported Features
1420
- *
1421
- * - Bindings:
1422
- * - Attribute: `<comp name="World">`
1423
- * - Interpolation: `<comp greeting="Hello {{name}}!">`
1424
- * - Expression: `<comp [name]="username">`
1425
- * - Event: `<comp (close)="doSomething()">`
1426
- * - ng-model: `<comp ng-model="name">`
1427
- * - Content projection: yes
1428
- *
1429
- * ### Example
1430
- *
1431
- * ```
1432
- * const adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
1433
- * const module = angular.module('myExample', []);
1434
- * module.directive('greet', adapter.downgradeNg2Component(Greeter));
1435
- *
1436
- * @Component({
1437
- * selector: 'greet',
1438
- * template: '{{salutation}} {{name}}! - <ng-content></ng-content>'
1439
- * })
1440
- * class Greeter {
1441
- * @Input() salutation: string;
1442
- * @Input() name: string;
1443
- * }
1444
- *
1445
- * @NgModule({
1446
- * declarations: [Greeter],
1447
- * imports: [BrowserModule]
1448
- * })
1449
- * class MyNg2Module {}
1450
- *
1451
- * document.body.innerHTML =
1452
- * 'ng1 template: <greet salutation="Hello" [name]="world">text</greet>';
1453
- *
1454
- * adapter.bootstrap(document.body, ['myExample']).ready(function() {
1455
- * expect(document.body.textContent).toEqual("ng1 template: Hello world! - text");
1456
- * });
1457
- * ```
1458
- */
1459
- downgradeNg2Component(component) {
1460
- this.downgradedComponents.push(component);
1461
- return downgradeComponent({ component });
1462
- }
1463
- /**
1464
- * Allows AngularJS Component to be used from Angular.
1465
- *
1466
- * Use `upgradeNg1Component` to create an Angular component from AngularJS Component
1467
- * directive. The adapter will bootstrap AngularJS component from within the Angular
1468
- * template.
1469
- *
1470
- * @usageNotes
1471
- * ### Mental Model
1472
- *
1473
- * 1. The component is instantiated by being listed in Angular template. This means that the
1474
- * host element is controlled by Angular, but the component's view will be controlled by
1475
- * AngularJS.
1476
- *
1477
- * ### Supported Features
1478
- *
1479
- * - Bindings:
1480
- * - Attribute: `<comp name="World">`
1481
- * - Interpolation: `<comp greeting="Hello {{name}}!">`
1482
- * - Expression: `<comp [name]="username">`
1483
- * - Event: `<comp (close)="doSomething()">`
1484
- * - Transclusion: yes
1485
- * - Only some of the features of
1486
- * [Directive Definition Object](https://docs.angularjs.org/api/ng/service/$compile) are
1487
- * supported:
1488
- * - `compile`: not supported because the host element is owned by Angular, which does
1489
- * not allow modifying DOM structure during compilation.
1490
- * - `controller`: supported. (NOTE: injection of `$attrs` and `$transclude` is not supported.)
1491
- * - `controllerAs`: supported.
1492
- * - `bindToController`: supported.
1493
- * - `link`: supported. (NOTE: only pre-link function is supported.)
1494
- * - `name`: supported.
1495
- * - `priority`: ignored.
1496
- * - `replace`: not supported.
1497
- * - `require`: supported.
1498
- * - `restrict`: must be set to 'E'.
1499
- * - `scope`: supported.
1500
- * - `template`: supported.
1501
- * - `templateUrl`: supported.
1502
- * - `terminal`: ignored.
1503
- * - `transclude`: supported.
1504
- *
1505
- *
1506
- * ### Example
1507
- *
1508
- * ```
1509
- * const adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
1510
- * const module = angular.module('myExample', []);
1511
- *
1512
- * module.directive('greet', function() {
1513
- * return {
1514
- * scope: {salutation: '=', name: '=' },
1515
- * template: '{{salutation}} {{name}}! - <span ng-transclude></span>'
1516
- * };
1517
- * });
1518
- *
1519
- * module.directive('ng2', adapter.downgradeNg2Component(Ng2Component));
1520
- *
1521
- * @Component({
1522
- * selector: 'ng2',
1523
- * template: 'ng2 template: <greet salutation="Hello" [name]="world">text</greet>'
1524
- * })
1525
- * class Ng2Component {
1526
- * }
1527
- *
1528
- * @NgModule({
1529
- * declarations: [Ng2Component, adapter.upgradeNg1Component('greet')],
1530
- * imports: [BrowserModule]
1531
- * })
1532
- * class MyNg2Module {}
1533
- *
1534
- * document.body.innerHTML = '<ng2></ng2>';
1535
- *
1536
- * adapter.bootstrap(document.body, ['myExample']).ready(function() {
1537
- * expect(document.body.textContent).toEqual("ng2 template: Hello world! - text");
1538
- * });
1539
- * ```
1540
- */
1541
- upgradeNg1Component(name) {
1542
- if (this.ng1ComponentsToBeUpgraded.hasOwnProperty(name)) {
1543
- return this.ng1ComponentsToBeUpgraded[name].type;
1544
- }
1545
- else {
1546
- return (this.ng1ComponentsToBeUpgraded[name] = new UpgradeNg1ComponentAdapterBuilder(name))
1547
- .type;
1548
- }
1549
- }
1550
- /**
1551
- * Registers the adapter's AngularJS upgrade module for unit testing in AngularJS.
1552
- * Use this instead of `angular.mock.module()` to load the upgrade module into
1553
- * the AngularJS testing injector.
1554
- *
1555
- * @usageNotes
1556
- * ### Example
1557
- *
1558
- * ```
1559
- * const upgradeAdapter = new UpgradeAdapter(MyNg2Module);
1560
- *
1561
- * // configure the adapter with upgrade/downgrade components and services
1562
- * upgradeAdapter.downgradeNg2Component(MyComponent);
1563
- *
1564
- * let upgradeAdapterRef: UpgradeAdapterRef;
1565
- * let $compile, $rootScope;
1566
- *
1567
- * // We must register the adapter before any calls to `inject()`
1568
- * beforeEach(() => {
1569
- * upgradeAdapterRef = upgradeAdapter.registerForNg1Tests(['heroApp']);
1570
- * });
1571
- *
1572
- * beforeEach(inject((_$compile_, _$rootScope_) => {
1573
- * $compile = _$compile_;
1574
- * $rootScope = _$rootScope_;
1575
- * }));
1576
- *
1577
- * it("says hello", (done) => {
1578
- * upgradeAdapterRef.ready(() => {
1579
- * const element = $compile("<my-component></my-component>")($rootScope);
1580
- * $rootScope.$apply();
1581
- * expect(element.html()).toContain("Hello World");
1582
- * done();
1583
- * })
1584
- * });
1585
- *
1586
- * ```
1587
- *
1588
- * @param modules any AngularJS modules that the upgrade module should depend upon
1589
- * @returns an `UpgradeAdapterRef`, which lets you register a `ready()` callback to
1590
- * run assertions once the Angular components are ready to test through AngularJS.
1591
- */
1592
- registerForNg1Tests(modules) {
1593
- const windowNgMock = window['angular'].mock;
1594
- if (!windowNgMock || !windowNgMock.module) {
1595
- throw new Error('Failed to find \'angular.mock.module\'.');
1596
- }
1597
- const { ng1Module, ng2BootstrapDeferred } = this.declareNg1Module(modules);
1598
- windowNgMock.module(ng1Module.name);
1599
- const upgrade = new UpgradeAdapterRef();
1600
- ng2BootstrapDeferred.promise.then((ng1Injector) => {
1601
- // @ts-expect-error
1602
- upgrade._bootstrapDone(this.moduleRef, ng1Injector);
1603
- }, onError);
1604
- return upgrade;
1605
- }
1606
- /**
1607
- * Bootstrap a hybrid AngularJS / Angular application.
1608
- *
1609
- * This `bootstrap` method is a direct replacement (takes same arguments) for AngularJS
1610
- * [`bootstrap`](https://docs.angularjs.org/api/ng/function/angular.bootstrap) method. Unlike
1611
- * AngularJS, this bootstrap is asynchronous.
1612
- *
1613
- * @usageNotes
1614
- * ### Example
1615
- *
1616
- * ```
1617
- * const adapter = new UpgradeAdapter(MyNg2Module);
1618
- * const module = angular.module('myExample', []);
1619
- * module.directive('ng2', adapter.downgradeNg2Component(Ng2));
1620
- *
1621
- * module.directive('ng1', function() {
1622
- * return {
1623
- * scope: { title: '=' },
1624
- * template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
1625
- * };
1626
- * });
1627
- *
1628
- *
1629
- * @Component({
1630
- * selector: 'ng2',
1631
- * inputs: ['name'],
1632
- * template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)'
1633
- * })
1634
- * class Ng2 {
1635
- * }
1636
- *
1637
- * @NgModule({
1638
- * declarations: [Ng2, adapter.upgradeNg1Component('ng1')],
1639
- * imports: [BrowserModule]
1640
- * })
1641
- * class MyNg2Module {}
1642
- *
1643
- * document.body.innerHTML = '<ng2 name="World">project</ng2>';
1644
- *
1645
- * adapter.bootstrap(document.body, ['myExample']).ready(function() {
1646
- * expect(document.body.textContent).toEqual(
1647
- * "ng2[ng1[Hello World!](transclude)](project)");
1648
- * });
1649
- * ```
1650
- */
1651
- bootstrap(element$1, modules, config) {
1652
- const { ng1Module, ng2BootstrapDeferred, ngZone } = this.declareNg1Module(modules);
1653
- const upgrade = new UpgradeAdapterRef();
1654
- // Make sure resumeBootstrap() only exists if the current bootstrap is deferred
1655
- const windowAngular = window['angular'];
1656
- windowAngular.resumeBootstrap = undefined;
1657
- ngZone.run(() => {
1658
- bootstrap(element$1, [ng1Module.name], config);
1659
- });
1660
- const ng1BootstrapPromise = new Promise((resolve) => {
1661
- if (windowAngular.resumeBootstrap) {
1662
- const originalResumeBootstrap = windowAngular.resumeBootstrap;
1663
- windowAngular.resumeBootstrap = function () {
1664
- windowAngular.resumeBootstrap = originalResumeBootstrap;
1665
- const r = windowAngular.resumeBootstrap.apply(this, arguments);
1666
- resolve();
1667
- return r;
1668
- };
1669
- }
1670
- else {
1671
- resolve();
1672
- }
1673
- });
1674
- Promise.all([ng2BootstrapDeferred.promise, ng1BootstrapPromise]).then(([ng1Injector]) => {
1675
- element(element$1).data(controllerKey(INJECTOR_KEY), this.moduleRef.injector);
1676
- this.moduleRef.injector.get(NgZone).run(() => {
1677
- // @ts-expect-error
1678
- upgrade._bootstrapDone(this.moduleRef, ng1Injector);
1679
- });
1680
- }, onError);
1681
- return upgrade;
1682
- }
1683
- /**
1684
- * Allows AngularJS service to be accessible from Angular.
1685
- *
1686
- * @usageNotes
1687
- * ### Example
1688
- *
1689
- * ```
1690
- * class Login { ... }
1691
- * class Server { ... }
1692
- *
1693
- * @Injectable()
1694
- * class Example {
1695
- * constructor(@Inject('server') server, login: Login) {
1696
- * ...
1697
- * }
1698
- * }
1699
- *
1700
- * const module = angular.module('myExample', []);
1701
- * module.service('server', Server);
1702
- * module.service('login', Login);
1703
- *
1704
- * const adapter = new UpgradeAdapter(MyNg2Module);
1705
- * adapter.upgradeNg1Provider('server');
1706
- * adapter.upgradeNg1Provider('login', {asToken: Login});
1707
- *
1708
- * adapter.bootstrap(document.body, ['myExample']).ready((ref) => {
1709
- * const example: Example = ref.ng2Injector.get(Example);
1710
- * });
1711
- *
1712
- * ```
1713
- */
1714
- upgradeNg1Provider(name, options) {
1715
- const token = options && options.asToken || name;
1716
- this.upgradedProviders.push({
1717
- provide: token,
1718
- useFactory: ($injector) => $injector.get(name),
1719
- deps: [$INJECTOR]
1720
- });
1721
- }
1722
- /**
1723
- * Allows Angular service to be accessible from AngularJS.
1724
- *
1725
- * @usageNotes
1726
- * ### Example
1727
- *
1728
- * ```
1729
- * class Example {
1730
- * }
1731
- *
1732
- * const adapter = new UpgradeAdapter(MyNg2Module);
1733
- *
1734
- * const module = angular.module('myExample', []);
1735
- * module.factory('example', adapter.downgradeNg2Provider(Example));
1736
- *
1737
- * adapter.bootstrap(document.body, ['myExample']).ready((ref) => {
1738
- * const example: Example = ref.ng1Injector.get('example');
1739
- * });
1740
- *
1741
- * ```
1742
- */
1743
- downgradeNg2Provider(token) {
1744
- return downgradeInjectable(token);
1745
- }
1746
- /**
1747
- * Declare the AngularJS upgrade module for this adapter without bootstrapping the whole
1748
- * hybrid application.
1749
- *
1750
- * This method is automatically called by `bootstrap()` and `registerForNg1Tests()`.
1751
- *
1752
- * @param modules The AngularJS modules that this upgrade module should depend upon.
1753
- * @returns The AngularJS upgrade module that is declared by this method
1754
- *
1755
- * @usageNotes
1756
- * ### Example
1757
- *
1758
- * ```
1759
- * const upgradeAdapter = new UpgradeAdapter(MyNg2Module);
1760
- * upgradeAdapter.declareNg1Module(['heroApp']);
1761
- * ```
1762
- */
1763
- declareNg1Module(modules = []) {
1764
- const delayApplyExps = [];
1765
- let original$applyFn;
1766
- let rootScopePrototype;
1767
- const upgradeAdapter = this;
1768
- const ng1Module = module_(this.idPrefix, modules);
1769
- const platformRef = platformBrowserDynamic();
1770
- const ngZone = new NgZone({ enableLongStackTrace: Zone.hasOwnProperty('longStackTraceZoneSpec') });
1771
- const ng2BootstrapDeferred = new Deferred();
1772
- ng1Module.constant(UPGRADE_APP_TYPE_KEY, 1 /* UpgradeAppType.Dynamic */)
1773
- .factory(INJECTOR_KEY, () => this.moduleRef.injector.get(Injector))
1774
- .factory(LAZY_MODULE_REF, [INJECTOR_KEY, (injector) => ({ injector })])
1775
- .constant(NG_ZONE_KEY, ngZone)
1776
- .factory(COMPILER_KEY, () => this.moduleRef.injector.get(Compiler))
1777
- .config([
1778
- '$provide', '$injector',
1779
- (provide, ng1Injector) => {
1780
- provide.decorator($ROOT_SCOPE, [
1781
- '$delegate',
1782
- function (rootScopeDelegate) {
1783
- // Capture the root apply so that we can delay first call to $apply until we
1784
- // bootstrap Angular and then we replay and restore the $apply.
1785
- rootScopePrototype = rootScopeDelegate.constructor.prototype;
1786
- if (rootScopePrototype.hasOwnProperty('$apply')) {
1787
- original$applyFn = rootScopePrototype.$apply;
1788
- rootScopePrototype.$apply = (exp) => delayApplyExps.push(exp);
1789
- }
1790
- else {
1791
- throw new Error('Failed to find \'$apply\' on \'$rootScope\'!');
1792
- }
1793
- return rootScopeDelegate;
1794
- }
1795
- ]);
1796
- if (ng1Injector.has($$TESTABILITY)) {
1797
- provide.decorator($$TESTABILITY, [
1798
- '$delegate',
1799
- function (testabilityDelegate) {
1800
- const originalWhenStable = testabilityDelegate.whenStable;
1801
- // Cannot use arrow function below because we need the context
1802
- const newWhenStable = function (callback) {
1803
- originalWhenStable.call(this, function () {
1804
- const ng2Testability = upgradeAdapter.moduleRef.injector.get(Testability);
1805
- if (ng2Testability.isStable()) {
1806
- callback.apply(this, arguments);
1807
- }
1808
- else {
1809
- ng2Testability.whenStable(newWhenStable.bind(this, callback));
1810
- }
1811
- });
1812
- };
1813
- testabilityDelegate.whenStable = newWhenStable;
1814
- return testabilityDelegate;
1815
- }
1816
- ]);
1817
- }
1818
- }
1819
- ]);
1820
- ng1Module.run([
1821
- '$injector', '$rootScope',
1822
- (ng1Injector, rootScope) => {
1823
- UpgradeNg1ComponentAdapterBuilder.resolve(this.ng1ComponentsToBeUpgraded, ng1Injector)
1824
- .then(() => {
1825
- // At this point we have ng1 injector and we have prepared
1826
- // ng1 components to be upgraded, we now can bootstrap ng2.
1827
- let DynamicNgUpgradeModule = class DynamicNgUpgradeModule {
1828
- ngDoBootstrap() { }
1829
- };
1830
- DynamicNgUpgradeModule = __decorate([
1831
- NgModule({
1832
- jit: true,
1833
- providers: [
1834
- { provide: $INJECTOR, useFactory: () => ng1Injector },
1835
- { provide: $COMPILE, useFactory: () => ng1Injector.get($COMPILE) },
1836
- this.upgradedProviders
1837
- ],
1838
- imports: [resolveForwardRef(this.ng2AppModule)],
1839
- entryComponents: this.downgradedComponents
1840
- })
1841
- ], DynamicNgUpgradeModule);
1842
- platformRef.bootstrapModule(DynamicNgUpgradeModule, [this.compilerOptions, { ngZone }])
1843
- .then((ref) => {
1844
- this.moduleRef = ref;
1845
- ngZone.run(() => {
1846
- if (rootScopePrototype) {
1847
- rootScopePrototype.$apply = original$applyFn; // restore original $apply
1848
- while (delayApplyExps.length) {
1849
- rootScope.$apply(delayApplyExps.shift());
1850
- }
1851
- rootScopePrototype = null;
1852
- }
1853
- });
1854
- })
1855
- .then(() => ng2BootstrapDeferred.resolve(ng1Injector), onError)
1856
- .then(() => {
1857
- let subscription = ngZone.onMicrotaskEmpty.subscribe({
1858
- next: () => {
1859
- if (rootScope.$$phase) {
1860
- if (typeof ngDevMode === 'undefined' || ngDevMode) {
1861
- console.warn('A digest was triggered while one was already in progress. This may mean that something is triggering digests outside the Angular zone.');
1862
- }
1863
- return rootScope.$evalAsync(() => { });
1864
- }
1865
- return rootScope.$digest();
1866
- }
1867
- });
1868
- rootScope.$on('$destroy', () => {
1869
- subscription.unsubscribe();
1870
- });
1871
- // Destroy the AngularJS app once the Angular `PlatformRef` is destroyed.
1872
- // This does not happen in a typical SPA scenario, but it might be useful for
1873
- // other use-cases where disposing of an Angular/AngularJS app is necessary
1874
- // (such as Hot Module Replacement (HMR)).
1875
- // See https://github.com/angular/angular/issues/39935.
1876
- platformRef.onDestroy(() => destroyApp(ng1Injector));
1877
- });
1878
- })
1879
- .catch((e) => ng2BootstrapDeferred.reject(e));
1880
- }
1881
- ]);
1882
- return { ng1Module, ng2BootstrapDeferred, ngZone };
1883
- }
1884
- }
1885
- /**
1886
- * Use `UpgradeAdapterRef` to control a hybrid AngularJS / Angular application.
1887
- *
1888
- * @deprecated Deprecated since v5. Use `upgrade/static` instead, which also supports
1889
- * [Ahead-of-Time compilation](guide/aot-compiler).
1890
- * @publicApi
1891
- */
1892
- class UpgradeAdapterRef {
1893
- constructor() {
1894
- /* @internal */
1895
- this._readyFn = null;
1896
- this.ng1RootScope = null;
1897
- this.ng1Injector = null;
1898
- this.ng2ModuleRef = null;
1899
- this.ng2Injector = null;
1900
- }
1901
- /* @internal */
1902
- _bootstrapDone(ngModuleRef, ng1Injector) {
1903
- this.ng2ModuleRef = ngModuleRef;
1904
- this.ng2Injector = ngModuleRef.injector;
1905
- this.ng1Injector = ng1Injector;
1906
- this.ng1RootScope = ng1Injector.get($ROOT_SCOPE);
1907
- this._readyFn && this._readyFn(this);
1908
- }
1909
- /**
1910
- * Register a callback function which is notified upon successful hybrid AngularJS / Angular
1911
- * application has been bootstrapped.
1912
- *
1913
- * The `ready` callback function is invoked inside the Angular zone, therefore it does not
1914
- * require a call to `$apply()`.
1915
- */
1916
- ready(fn) {
1917
- this._readyFn = fn;
1918
- }
1919
- /**
1920
- * Dispose of running hybrid AngularJS / Angular application.
1921
- */
1922
- dispose() {
1923
- this.ng1Injector.get($ROOT_SCOPE).$destroy();
1924
- this.ng2ModuleRef.destroy();
1925
- }
1926
- }
1927
-
1928
- /**
1929
- * @module
1930
- * @description
1931
- * Entry point for all public APIs of this package. allowing
1932
- * Angular 1 and Angular 2+ to run side by side in the same application.
1933
- */
1934
- // This file only re-exports content of the `src` folder. Keep it that way.
1935
-
1936
- // This file is not used to build this module. It is only used during editing
1937
-
1938
- /**
1939
- * Generated bundle index. Do not edit.
1940
- */
1941
-
1942
- export { UpgradeAdapter, UpgradeAdapterRef, VERSION };
1943
- //# sourceMappingURL=upgrade.mjs.map