Skip to content

Commit cced6fd

Browse files
authored
feat(docs): added FAQ for removing NgZone
1 parent 04ef04f commit cced6fd

File tree

1 file changed

+58
-49
lines changed

1 file changed

+58
-49
lines changed

stories/howto.md

Lines changed: 58 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ ng test app-confirm
4343
```
4444

4545
#### How to implement test spec using Angular Test Bed(ATB)?
46+
4647
> https://codecraft.tv/courses/angular/unit-testing/angular-test-bed/
4748
> https://codecraft.tv/courses/angular/unit-testing/asynchronous/
4849
@@ -77,19 +78,24 @@ how to implement MODULE_INITIALIZER like APP_INITIALIZER?
7778

7879
#### How to Cut a Release?
7980

80-
semantic-release is a fully automated library/system for versioning, changelog generation, git tagging, and publishing to the npm registry.
81+
> `semantic-release` is a fully automated library/system for versioning, changelog generation, git tagging, and publishing to the npm registry.
8182
82-
> [refer](https://blog.greenkeeper.io/introduction-to-semantic-release-33f73b117c8)
83+
<details>
84+
<summary>MORE</summary>
8385

84-
https://adrianperez.codes/enforcing-commit-conventions/
86+
> Read [introduction-to-semantic-release](https://blog.greenkeeper.io/introduction-to-semantic-release-33f73b117c8)
8587
86-
https://medium.com/@schalkneethling/automate-package-releases-with-semantic-release-and-commitizen-d7d4c337f04f
88+
https://adrianperez.codes/enforcing-commit-conventions/
8789

88-
```bash
89-
export GH_TOKEN=<my_github_token>
90-
export CI=true
91-
npm run semantic-release
92-
```
90+
https://medium.com/@schalkneethling/automate-package-releases-with-semantic-release-and-commitizen-d7d4c337f04f
91+
92+
```bash
93+
export GH_TOKEN=<my_github_token>
94+
export CI=true
95+
npm run semantic-release
96+
```
97+
98+
</details>
9399

94100
#### How to cleanup git tags?
95101

@@ -135,50 +141,53 @@ NODE_DEBUG=request npm run api:start:dev
135141

136142
#### How to remove zone.js dependency?
137143

138-
> for `Web Components build` with `Angular Elements`, it might be overhead using NgZone
139-
and sometime conflict with host app if it host also built with `Angular`
144+
> for `Web Components` build with `Angular Elements`, it might be overhead using NgZone
145+
and sometimes conflict with host app if host app also built with `Angular`
140146

141147
<details>
142-
<summary>Howto</summary>
143-
<p>
144-
1. let’s first remove dependency on zone.js. Remove the following import from `polyfils.ts` file:
145-
```js
146-
/* Zone JS is required by Angular itself. */
147-
import 'zone.js/dist/zone'; // Included with Angular CLI.
148-
```
149-
2. Configure Angular to use the noop Zone implementation like this:
150-
```js
151-
platformBrowserDynamic()
152-
.bootstrapModule(AppModule, {
153-
ngZone: 'noop'
154-
});
155-
```
156-
3. Trigger change detection manually as we dont have Zone
157-
> `ChangeDetectorRef.detectChanges` runs change detection for a specific component
158-
```js
159-
export class AppComponent {
160-
name = 'Angular';
161-
constructor(cd: ChangeDetectorRef) {
162-
setTimeout(() => {
163-
this.name = 'updated';
164-
cd.markForCheck();
165-
}, 1000);
166-
}
148+
<summary>HOWTO REMOVE ZONE</summary>
149+
150+
1. let’s first remove dependency on zone.js.
151+
> Remove the following import from `polyfils.ts` file:
152+
```js
153+
/* Zone JS is required by Angular itself. */
154+
import 'zone.js/dist/zone'; // Included with Angular CLI.
155+
```
156+
157+
2. Configure Angular to use the `noop` Zone implementation like this:
158+
```js
159+
platformBrowserDynamic()
160+
.bootstrapModule(AppModule, {
161+
ngZone: 'noop'
162+
});
163+
```
164+
165+
3. Trigger change detection manually as we dont have Zone
166+
> `ChangeDetectorRef.detectChanges` runs change detection for a specific component
167+
```js
168+
export class AppComponent {
169+
name = 'Angular';
170+
constructor(cd: ChangeDetectorRef) {
171+
setTimeout(() => {
172+
this.name = 'updated';
173+
cd.markForCheck();
174+
}, 1000);
167175
}
168-
```
169-
> `ApplicationRef.tick` cause change detection on the whole application.
170-
```js
171-
export class AppComponent {
172-
name = 'Angular';
173-
constructor(app: ApplicationRef) {
174-
setTimeout(() => {
175-
this.name = 'updated';
176-
app.tick();
177-
}, 1000);
178-
}
176+
}
177+
```
178+
179+
> `ApplicationRef.tick` cause change detection on the whole application.
180+
```js
181+
export class AppComponent {
182+
name = 'Angular';
183+
constructor(app: ApplicationRef) {
184+
setTimeout(() => {
185+
this.name = 'updated';
186+
app.tick();
187+
}, 1000);
179188
}
180-
```
181-
</p>
189+
}
190+
```
182191

183192
</details>
184193

0 commit comments

Comments
 (0)