cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs-infra): simplify image styles and remove figure references (#33748)

Browse Source 
Reference #33259
Removes figures elements as AIO is not typically using captions or image groups where figures would be necessary or appropriate

PR Close #33748
This commit is contained in:
Stefanie Fluin
2019-11-11 14:47:51 -08:00
committed by Alex Rickabaugh
parent 72b9276ec9
commit fe4447d568
47 changed files with 521 additions and 870 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
aio/content/guide/lazy-loading-ngmodules.md
View File

@ -91,11 +91,9 @@ ng serve
Then go to `localhost:4200` where you should see “customer-app” and three buttons.
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/lazy-loading-ngmodules/three-buttons.png" width="300" alt="three buttons in the browser">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/lazy-loading-ngmodules/three-buttons.png" width="300" alt="three buttons in the browser">
</div>
These buttons work, because the CLI automatically added the routes to the feature modules to the `routes` array in `app.module.ts`.
@ -137,30 +135,24 @@ The other feature module's routing module is configured similarly.
You can check to see that a module is indeed being lazy loaded with the Chrome developer tools. In Chrome, open the dev tools by pressing `Cmd+Option+i` on a Mac or `Ctrl+Shift+j` on a PC and go to the Network Tab.
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/lazy-loading-ngmodules/network-tab.png" width="600" alt="lazy loaded modules diagram">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/lazy-loading-ngmodules/network-tab.png" width="600" alt="lazy loaded modules diagram">
</div>
Click on the Orders or Customers button. If you see a chunk appear, everything is wired up properly and the feature module is being lazy loaded. A chunk should appear for Orders and for Customers but will only appear once for each.
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/lazy-loading-ngmodules/chunk-arrow.png" width="600" alt="lazy loaded modules diagram">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/lazy-loading-ngmodules/chunk-arrow.png" width="600" alt="lazy loaded modules diagram">
</div>
To see it again, or to test after working in the project, clear everything out by clicking the circle with a line through it in the upper left of the Network Tab:
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/lazy-loading-ngmodules/clear.gif" width="200" alt="lazy loaded modules diagram">
</div>
</figure>
<div class="lightbox">
<img src="generated/images/guide/lazy-loading-ngmodules/clear.gif" width="200" alt="lazy loaded modules diagram">
</div>
Then reload with `Cmd+r` or `Ctrl+r`, depending on your platform.