Why Lazy Loading ?
Purpose: Render only what’s useful for the user
ie: A normal user shouldn’t have to wait for the admin module !
● Smaller files to load on application startup
● Faster loading
Lazy Loading in Angular
Easy as 1, 2, 3 !
1. Make sure you don’t import same providers in many places
2. Use loadChildren in your route config
3. Remove your Module imports from AppModule
The importance of a Core Module
Angular will create one provider instance per Lazy Loaded Modules if your import
your providers into them.
This can be annoying if you think your providers as singletons !
● Import your singletons providers in a Core Module
● Import this Core Module only in your App Module
A Core Module is already present in JHipster 5 !
Feature Module B
Feature Module A
Core Module Providers are accessibl
from Lazy Loaded Modules via the
root injection tree
Jest vs Karma/Jasmine
Uses a Virtual DOM Uses a real browser
Run tests in parallel Run tests one by one
All In One (Runner, framework, coverage) One tool for each thing
Uses preprocessor Uses webpack
Jest Migration in JHipster
Remove webpack.test.js and karma.conf.js
Add Jest Config file from a fresh generated app
Use jest-codemods to migrate from Jasmine to Jest
JHipster PR: https://github.com/jhipster/generator-jhipster/pull/7663/files
First run 15s 37s
Second run 10s 37s
What about “real browser” tests ?
Jest uses a virtual DOM (jsdom) instead of a real browser
You can still have end-to-end tests with Protractor with various real browsers
The point of Unit Tests is to test your code, not the browser
TypeScript already compiles your code into ES5 so it will be compatible with most