Skip to content

Commit d51d39c

Browse files
alan-agius4atscott
authored andcommitted
docs: update docs to use new zone.js entry-points (angular#40823)
In CLI version 12, the old style of imports is no longer supported. PR Close angular#40823
1 parent 03de2f2 commit d51d39c

29 files changed

Lines changed: 51 additions & 44 deletions

File tree

aio/content/examples/http/src/main-specs.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ declare var jasmine;
66

77
import './polyfills';
88

9-
import 'zone.js/dist/zone-testing';
9+
import 'zone.js/testing';
1010

1111
import { getTestBed } from '@angular/core/testing';
1212
import {

aio/content/examples/testing/src/app/demo/async-helper.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ describe('Angular async helper', () => {
131131

132132
// #docregion fake-async-test-rxjs
133133
it('should get Date diff correctly in fakeAsync with rxjs scheduler', fakeAsync(() => {
134-
// need to add `import 'zone.js/dist/zone-patch-rxjs-fake-async'
134+
// need to add `import 'zone.js/plugins/zone-patch-rxjs-fake-async'
135135
// to patch rxjs scheduler
136136
let result = null;
137137
of('hello').pipe(delay(1000)).subscribe(v => {
@@ -156,7 +156,7 @@ describe('Angular async helper', () => {
156156
// #docregion fake-async-test-clock
157157
describe('use jasmine.clock()', () => {
158158
// need to config __zone_symbol__fakeAsyncPatchLock flag
159-
// before loading zone.js/dist/zone-testing
159+
// before loading zone.js/testing
160160
beforeEach(() => {
161161
jasmine.clock().install();
162162
});
@@ -180,7 +180,7 @@ describe('Angular async helper', () => {
180180
// do a jsonp call which is not zone aware
181181
}
182182
// need to config __zone_symbol__supportWaitUnResolvedChainedPromise flag
183-
// before loading zone.js/dist/zone-testing
183+
// before loading zone.js/testing
184184
it('should wait until promise.then is called', waitForAsync(() => {
185185
let finished = false;
186186
new Promise((res, rej) => {

aio/content/examples/testing/src/app/shared/canvas.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// Import patch to make async `HTMLCanvasElement` methods (such as `.toBlob()`) Zone.js-aware.
44
// Either import in `polyfills.ts` (if used in more than one places in the app) or in the component
55
// file using `HTMLCanvasElement` (if it is only used in a single file).
6-
import 'zone.js/dist/zone-patch-canvas';
6+
import 'zone.js/plugins/zone-patch-canvas';
77
// #enddocregion import-canvas-patch
88
// #docregion main
99
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

aio/content/examples/testing/src/main-specs.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ declare var jasmine;
66

77
import './polyfills';
88

9-
import 'zone.js/dist/zone-testing';
9+
import 'zone.js/testing';
1010

1111
import { getTestBed } from '@angular/core/testing';
1212
import {

aio/content/examples/universal/server.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import 'zone.js/dist/zone-node';
1+
import 'zone.js/node';
22

33
import { ngExpressEngine } from '@nguniversal/express-engine';
44
import * as express from 'express';

aio/content/guide/ivy.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ The following example shows how you modify the `server.ts` file to provide the `
142142
* Set `bootstrap: AppServerModuleNgFactory` in the `ngExpressEngine` call.
143143

144144
<code-example language="typescript" header="server.ts">
145-
import 'zone.js/dist/zone-node';
145+
import 'zone.js/node';
146146

147147
import { ngExpressEngine } from '@nguniversal/express-engine';
148148
import * as express from 'express';

aio/content/guide/testing-components-scenarios.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -371,7 +371,7 @@ value becomes available. The test must become _asynchronous_.
371371

372372
#### Async test with _fakeAsync()_
373373

374-
To use `fakeAsync()` functionality, you must import `zone.js/dist/zone-testing` in your test setup file.
374+
To use `fakeAsync()` functionality, you must import `zone.js/testing` in your test setup file.
375375
If you created your project with the Angular CLI, `zone-testing` is already imported in `src/test.ts`.
376376

377377
The following test confirms the expected behavior when the service returns an `ErrorObservable`.
@@ -453,7 +453,7 @@ If you use the Angular CLI, configure this flag in `src/test.ts`.
453453

454454
```
455455
(window as any)['__zone_symbol__fakeAsyncPatchLock'] = true;
456-
import 'zone.js/dist/zone-testing';
456+
import 'zone.js/testing';
457457
```
458458

459459
<code-example
@@ -463,7 +463,7 @@ import 'zone.js/dist/zone-testing';
463463

464464
#### Using the RxJS scheduler inside fakeAsync()
465465

466-
You can also use RxJS scheduler in `fakeAsync()` just like using `setTimeout()` or `setInterval()`, but you need to import `zone.js/dist/zone-patch-rxjs-fake-async` to patch RxJS scheduler.
466+
You can also use RxJS scheduler in `fakeAsync()` just like using `setTimeout()` or `setInterval()`, but you need to import `zone.js/plugins/zone-patch-rxjs-fake-async` to patch RxJS scheduler.
467467
<code-example
468468
path="testing/src/app/demo/async-helper.spec.ts"
469469
region="fake-async-test-rxjs">
@@ -583,7 +583,7 @@ Then you can assert that the quote element displays the expected text.
583583

584584
#### Async test with _waitForAsync()_
585585

586-
To use `waitForAsync()` functionality, you must import `zone.js/dist/zone-testing` in your test setup file.
586+
To use `waitForAsync()` functionality, you must import `zone.js/testing` in your test setup file.
587587
If you created your project with the Angular CLI, `zone-testing` is already imported in `src/test.ts`.
588588

589589
<div class="alert is-helpful">

aio/content/guide/upgrade-setup.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -308,7 +308,7 @@ So when IE is refreshed (manually or automatically by `ng serve`), sometimes the
308308

309309
## Appendix: Test using `fakeAsync()/waitForAsync()`
310310

311-
If you use the `fakeAsync()/waitForAsync()` helper function to run unit tests (for details, read the [Testing guide](guide/testing-components-scenarios#fake-async)), you need to import `zone.js/dist/zone-testing` in your test setup file.
311+
If you use the `fakeAsync()/waitForAsync()` helper function to run unit tests (for details, read the [Testing guide](guide/testing-components-scenarios#fake-async)), you need to import `zone.js/testing` in your test setup file.
312312

313313
<div class="alert is-important">
314314
If you create project with `Angular/CLI`, it is already imported in `src/test.ts`.
@@ -317,12 +317,12 @@ If you create project with `Angular/CLI`, it is already imported in `src/test.ts
317317
And in the earlier versions of `Angular`, the following files were imported or added in your html file:
318318

319319
```
320-
import 'zone.js/dist/long-stack-trace-zone';
321-
import 'zone.js/dist/proxy';
322-
import 'zone.js/dist/sync-test';
323-
import 'zone.js/dist/jasmine-patch';
324-
import 'zone.js/dist/async-test';
325-
import 'zone.js/dist/fake-async-test';
320+
import 'zone.js/plugins/long-stack-trace-zone';
321+
import 'zone.js/plugins/proxy';
322+
import 'zone.js/plugins/sync-test';
323+
import 'zone.js/plugins/jasmine-patch';
324+
import 'zone.js/plugins/async-test';
325+
import 'zone.js/plugins/fake-async-test';
326326
```
327327

328328
You can still load those files separately, but the order is important, you must import `proxy` before `sync-test`, `async-test`, `fake-async-test` and `jasmine-patch`. And you also need to import `sync-test` before `jasmine-patch`, so it is recommended to just import `zone-testing` instead of loading those separated files.

aio/content/guide/user-input.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ Angular also supports passive event listeners. For example, you can use the foll
323323

324324
```
325325
import './zone-flags';
326-
import 'zone.js/dist/zone'; // Included with Angular CLI.
326+
import 'zone.js'; // Included with Angular CLI.
327327
```
328328

329329
After those steps, if you add event listeners for the `scroll` event, the listeners will be `passive`.

aio/content/guide/zone.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,7 @@ If you are using the Angular CLI, this step is done automatically, and you will
352352
/***************************************************************************************************
353353
* Zone JS is required by default for Angular itself.
354354
*/
355-
import 'zone.js/dist/zone'; // Included with Angular CLI.
355+
import 'zone.js'; // Included with Angular CLI.
356356
```
357357

358358
Before importing the `zone.js` package, you can set the following configurations:
@@ -380,7 +380,7 @@ Next, import `zone-flags` before you import `zone.js` in the `polyfills.ts`:
380380
* Zone JS is required by default for Angular.
381381
*/
382382
import `./zone-flags`;
383-
import 'zone.js/dist/zone'; // Included with Angular CLI.
383+
import 'zone.js'; // Included with Angular CLI.
384384
```
385385
386386
For more information about what you can configure, see the [Zone.js](https://github.com/angular/angular/tree/master/packages/zone.js) documentation.
@@ -406,7 +406,7 @@ To remove Zone.js, make the following changes.
406406
/***************************************************************************************************
407407
* Zone JS is required by default for Angular itself.
408408
*/
409-
// import 'zone.js/dist/zone'; // Included with Angular CLI.
409+
// import 'zone.js'; // Included with Angular CLI.
410410
```
411411
412412
2. Bootstrap Angular with the `noop` zone in `src/main.ts`:

0 commit comments

Comments
 (0)