Skip to content

Commit 0d4bb09

Browse files
xmlkingxmlking
committed
feat(docs): added FAQ for removing NgZone
1 parent cced6fd commit 0d4bb09

File tree

1 file changed

+154
-110
lines changed

1 file changed

+154
-110
lines changed

‎stories/howto.md

Lines changed: 154 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,118 @@
11
# How to
22

3-
#### hot to make IntelliJ default to es6 for javascript?
4-
> To set the default language level for JavaScript, go to File > Other Settings > Default Settings > Languages and Frameworks > JavaScript Version --> ECMAScript 6
5-
6-
#### hot to make IntelliJ ignore generated files and recognise assets as Resources?
7-
8-
Right click on `apps/webapp/src/styles` in project vie --> Make Directory as --> Resources Root.
9-
Right click on `apps/webapp/src` in project vie --> Make Directory as --> Resources Root.
10-
Right click on `docs` in project view --> Make Directory as --> Excluded.
11-
Right click on `dist` in project view --> Make Directory as --> Excluded.
12-
Right click on `coverage` in project view --> Make Directory as --> Excluded.
13-
14-
#### How to configure `Jest` to test code that is importing `esm modules`?
15-
1. Add `transformIgnorePatterns` to `jest.config.js`
16-
```js
17-
module.exports = {
18-
name: 'ngx-utils',
19-
preset: '../../jest.config.js',
20-
transformIgnorePatterns: ['node_modules/(?!date-fns)'],
21-
coverageDirectory: '../../coverage/libs/ngx-utils',
22-
};
23-
```
24-
2. Add `"allowJs": true` to `compilerOptions` in `tsconfig.spec.json`
25-
26-
#### How to release/deploy?
27-
28-
using travis CI/CD
29-
30-
> Commits that have [ci skip] or [skip ci] anywhere in the commit messages are ignored by Travis CI.
31-
32-
> [refer](http://dev.topheman.com/continuous-deployment-with-travis-ci/)
33-
34-
35-
how to upgrade an old module to use jest instead of Karma?
36-
37-
delete `karma.conf.js`, `test.ts`, and `tsconfig.spec.json` and remove the `test` target for this module from `angular.json`
38-
> [refer](https://blog.nrwl.io/nrwl-nx-6-3-faster-testing-with-jest-20a8ddb5064)
39-
```bash
40-
ng generate jest-project --project app-confirm
41-
# test upgraded module
42-
ng test app-confirm
43-
```
44-
45-
#### How to implement test spec using Angular Test Bed(ATB)?
46-
47-
> https://codecraft.tv/courses/angular/unit-testing/angular-test-bed/
48-
> https://codecraft.tv/courses/angular/unit-testing/asynchronous/
3+
<details>
4+
<summary>
495

50-
How to migrate project to newer versions?
6+
#### hot to make IntelliJ default to es6 for javascript?
7+
</summary>
518

52-
> [refer](https://update.angular.io/)
9+
> To set the default language level for JavaScript, go to File > Other Settings > Default Settings > Languages and Frameworks > JavaScript Version --> ECMAScript 6
10+
</details>
5311
54-
how to implement MODULE_INITIALIZER like APP_INITIALIZER?
12+
<details>
13+
<summary>
5514

56-
> [refer](https://www.bennadel.com/blog/3180-ngmodule-constructors-provide-a-module-level-run-block-in-angular-2-1-1.htm)
15+
#### hot to make IntelliJ ignore generated files and recognise assets as Resources?
16+
</summary>
5717

58-
#### How to commit code?
18+
Right click on `apps/webapp/src/styles` in project vie --> Make Directory as --> Resources Root.
19+
Right click on `apps/webapp/src` in project vie --> Make Directory as --> Resources Root.
20+
Right click on `docs` in project view --> Make Directory as --> Excluded.
21+
Right click on `dist` in project view --> Make Directory as --> Excluded.
22+
Right click on `coverage` in project view --> Make Directory as --> Excluded.
23+
</details>
5924

60-
```bash
61-
git status
62-
# stage your changes
63-
# if you want to stage the modified and deleted files only.
64-
git add -u
65-
# or stage all modified/deleted/ newly added files
66-
git add .
67-
# use git-cz interactive helper tool to commit
68-
npm run commit
69-
# or use following command if you install commitizen globally
70-
git cz
71-
# or skip git hooks with
72-
git cz --no-verify
73-
```
25+
<details>
26+
<summary>
27+
28+
#### How to configure `Jest` to test code that is importing `esm modules`?
29+
</summary>
30+
31+
1. Add `transformIgnorePatterns` to `jest.config.js`
32+
```js
33+
module.exports = {
34+
name: 'ngx-utils',
35+
preset: '../../jest.config.js',
36+
transformIgnorePatterns: ['node_modules/(?!date-fns)'],
37+
coverageDirectory: '../../coverage/libs/ngx-utils',
38+
};
39+
```
40+
2. Add `"allowJs": true` to `compilerOptions` in `tsconfig.spec.json`
41+
</details>
7442

75-
> Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
43+
<details>
44+
<summary>
45+
46+
#### How to release/deploy?
47+
</summary>
48+
49+
using travis CI/CD
50+
51+
> Commits that have [ci skip] or [skip ci] anywhere in the commit messages are ignored by Travis CI.
52+
53+
> [refer](http://dev.topheman.com/continuous-deployment-with-travis-ci/)
54+
55+
56+
how to upgrade an old module to use jest instead of Karma?
57+
58+
delete `karma.conf.js`, `test.ts`, and `tsconfig.spec.json` and remove the `test` target for this module from `angular.json`
59+
> [refer](https://blog.nrwl.io/nrwl-nx-6-3-faster-testing-with-jest-20a8ddb5064)
60+
```bash
61+
ng generate jest-project --project app-confirm
62+
# test upgraded module
63+
ng test app-confirm
64+
```
65+
</details>
7666

67+
<details>
68+
<summary>
69+
70+
#### How to implement test spec using Angular Test Bed(ATB)?
71+
</summary>
72+
73+
> https://codecraft.tv/courses/angular/unit-testing/angular-test-bed/
74+
> https://codecraft.tv/courses/angular/unit-testing/asynchronous/
75+
76+
How to migrate project to newer versions?
77+
78+
> [refer](https://update.angular.io/)
79+
80+
how to implement MODULE_INITIALIZER like APP_INITIALIZER?
81+
82+
> [refer](https://www.bennadel.com/blog/3180-ngmodule-constructors-provide-a-module-level-run-block-in-angular-2-1-1.htm)
83+
</details>
7784
85+
<details>
86+
<summary>
87+
88+
#### How to commit code?
89+
</summary>
90+
91+
```bash
92+
git status
93+
# stage your changes
94+
# if you want to stage the modified and deleted files only.
95+
git add -u
96+
# or stage all modified/deleted/ newly added files
97+
git add .
98+
# use git-cz interactive helper tool to commit
99+
npm run commit
100+
# or use following command if you install commitizen globally
101+
git cz
102+
# or skip git hooks with
103+
git cz --no-verify
104+
```
105+
106+
> Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
107+
</details>
78108
79-
#### How to Cut a Release?
109+
<details>
110+
<summary>
80111

81-
> `semantic-release` is a fully automated library/system for versioning, changelog generation, git tagging, and publishing to the npm registry.
112+
#### How to Cut a Release?
113+
</summary>
82114

83-
<details>
84-
<summary>MORE</summary>
115+
> `semantic-release` is a fully automated library/system for versioning, changelog generation, git tagging, and publishing to the npm registry.
85116
86117
> Read [introduction-to-semantic-release](https://blog.greenkeeper.io/introduction-to-semantic-release-33f73b117c8)
87118
@@ -94,58 +125,72 @@ how to implement MODULE_INITIALIZER like APP_INITIALIZER?
94125
export CI=true
95126
npm run semantic-release
96127
```
97-
98128
</details>
99129

100-
#### How to cleanup git tags?
101-
102-
```bash
103-
# Delete all local tags and get the list of remote tags:
104-
105-
git tag -l | xargs git tag -d
106-
git fetch
107-
108-
#Remove all remote tags
109-
110-
git tag -l | xargs -n 1 git push --delete origin
130+
<details>
131+
<summary>
111132

112-
# Clean up local tags
113-
git tag -l | xargs git tag -d
114-
```
133+
#### How to cleanup git tags?
134+
</summary>
115135

136+
```bash
137+
# Delete all local tags and get the list of remote tags:
138+
139+
git tag -l | xargs git tag -d
140+
git fetch
141+
142+
#Remove all remote tags
143+
144+
git tag -l | xargs -n 1 git push --delete origin
145+
146+
# Clean up local tags
147+
git tag -l | xargs git tag -d
148+
```
149+
</details>
116150

117-
#### linting affected?
118-
```bash
119-
npm run affected:lint -- --base=origin/master --base=HEAD
120-
npm run affected:lint -- --uncommitted --fix
121-
npm run affected:lint -- --untracked
122-
npm run affected:lint -- --untracked --fix
123-
ng lint home --fix
124-
```
151+
<details>
152+
<summary>
125153

126-
```bash
127-
npm run format:check -- --uncommitted
128-
npm run format:write -- --uncommitted
154+
#### linting affected?
155+
</summary>
129156

130-
# And you want to do the following in the CI:
131-
npm run format:check --base=master --head=HEAD
132-
npx nx format:check --base=master --head=HEAD
133-
```
157+
```bash
158+
npm run affected:lint -- --base=origin/master --base=HEAD
159+
npm run affected:lint -- --uncommitted --fix
160+
npm run affected:lint -- --untracked
161+
npm run affected:lint -- --untracked --fix
162+
ng lint home --fix
163+
```
164+
165+
```bash
166+
npm run format:check -- --uncommitted
167+
npm run format:write -- --uncommitted
168+
169+
# And you want to do the following in the CI:
170+
npm run format:check --base=master --head=HEAD
171+
npx nx format:check --base=master --head=HEAD
172+
```
173+
</details>
134174

135-
#### How to enable debug for node?
136-
```bash
137-
NODE_DEBUG=request npm run api:start:dev
138-
```
175+
<details>
176+
<summary>
139177

178+
#### How to enable debug for node?
179+
</summary>
140180

181+
```bash
182+
NODE_DEBUG=request npm run api:start:dev
183+
```
184+
</details>
141185

142-
#### How to remove zone.js dependency?
186+
<details>
187+
<summary>
143188

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`
189+
#### How to remove zone.js dependency?
190+
</summary>
146191

147-
<details>
148-
<summary>HOWTO REMOVE ZONE</summary>
192+
> for `Web Components` build with `Angular Elements`, it might be overhead using NgZone
193+
and sometimes conflict with host app if host app also built with `Angular`
149194

150195
1. let’s first remove dependency on zone.js.
151196
> Remove the following import from `polyfils.ts` file:
@@ -188,6 +233,5 @@ and sometimes conflict with host app if host app also built with `Angular`
188233
}
189234
}
190235
```
191-
192236
</details>
193237

0 commit comments

Comments
 (0)