Angular Pro
Agenda
- Advanced content generation
- Angular Elements
- Dependency Injection and Injectors
- Router Extras
- Angular Optimization
- Service Workers & Web Workers
- Angular 9, 10, 11 and next
- Angular Module Federation
- Scully
- Security
Advanced content generation
View vs Content
ContentChild/ViewChild
@ContentChild(selector)
exportAs
@Attribute()
Component Inheritance
Structural Directive
Dynamic Components
ngComponentOutlet
Real Dynamic Components
Impure pipe
Angular Elements
Dependency Injection and Injectors
Main parts
- Provider
- Injector
- Dependancy
Going deep with Injector
import { Injector} from '@angular/core';
import { MyService } from './my.service';
const injector = Injector.create([MyService]);
myService = injector.get(MyService);
Component Injector
componentInstance.injector
Node Injector (Element Injector) Tree
Child Injector
const injector = Injector.create([MyService]);
const childInjector = Injector.create([MyService], injector);
childInjector.get(MyService) !== injector.get(MyService)
What about Providers?
Token
Recipe |
{
}
- String
- Class
- InjectionToken
- useClass
- useExisting
- useFactory
- useValue
InjectionToken<UserService>(‘UserService_TOKEN’, {
providedIn: ‘root’
factory: () => new UserService()
});
, multi
How injection happens?
- constructor
- decorator
- parameters
- @Self / @SkipSelf
- @Host()
- @Optional()
providedIn?
- tree-shaking
- prevents duplication
- "root"
- "platform"
- "any"
viewProviders
Router Extras
Router Animations
Lazy Loading and Preloading Strategies
Angular Optimizations
What could be faster
- Loading/First screen
- Bundle Size Optimization
- AOT compilation
- SSR
- Lazy loading (+preloading)
- Service Workers
- Static Page Generation
- Runtime
- Change Detection
- onPush Strategy
- detach CD
- Web Workers
- Change Detection
Bundle Size Optimization
CD Explained
ExpressionChangedAfterItHasBeenCheckedError
- Shared Service
- Event Emitter
- Dynamic Component
Cases:
Solution:
- enableProdMode()
- setTimeout
- EventEmitter(true)
- detectChanges
enableProdMode()
Web Workers
Service Workers
What are Service Workers?
- can't access the DOM directly
- control how network requests from your page
- It's terminated when not in use (no own state)
- extensive use of promises
- HTTPS required
- Reliability
- Performance
- Push Notifications
Install with AngularCli
ng add @angular/pwa
- Adds @angular/service-worker as a dependency.
- Enables service worker builds in the Angular CLI.
- Imports and registers the service worker in the app module.
- Adds a web app manifest.
- Updates the index.html file to link to the manifest and set theme colors.
- Adds required icons for the manifest.
- Creates a config file ngsw-config.json, specifying caching behaviors and other settings.
Updates
Push Notifications
Angular Next
Angular 9
IVY
- Smaller bundle sized
- Better debugging
- ng object (properties, method, apply)
- better error stack trace
- Improved type checking
- fullTemplateTypeCheck (strictTemplates)
- Improved build errors
- AOT by default
- no entryComponents
- New components
- TypeScript 3.7 (optional chaining )
- TypeScript 3.8 (type-only imports, private fields, top-level await)
Angular 10
Bugfix
Angular 11 (11.1)
- TypeScript 3.9 not supported
- TypeScript 4.1
- removes IE 9, 10, and IE mobile support completely
- router improvements
- pipes improvements
- forms improvements
- Trusted Types
- ViewEncapsulation.Native has been removed. Use ShadowDom
- Webpack 5 (? Module Federation)
- Native Ivy Language Service
- Critical CSS Inlining
Bugfix
Module Federation and Angular
History
nice illustrations are taken from here
a bit more History
nice illustrations are taken from here
So what is Module Federation?
The main application(shell) is capable of loading a separately compiled and deployed microfrontend
What do we need for Module Federation?
Does Angular(11) support WebPack5?
no :(
"resolutions": {
"webpack": "5.0.0"
},
but with yarn:
How to do Module Federation for Angular?
@angular-architects/module-federation
Manfred Steyer (@ManfredSteyer)
How to inject Scully?
- ng add @scullyio/init
- ng generate @scullyio/init:blog
- ng generate @scullyio/init:post --name="This is my post1"
- ng build
- npm run scully
- npm run scully:serve
published: true
Security
Authorization based on JWT
JSON Web Token
Can you spot security issue here?
export class TokenInterceptor implements HttpInterceptor {
constructor(public auth: AuthService) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${this.auth.getToken()}`
}
});
return next.handle(request);
}
}
XSS
Post Data with malicious code
Store
Fetch
Open App
Get malicious code
Check
Angular against XSS
Sanitization out of box:
- HTML
- Styles
- Url
- Resource Url
bypassSecurityTrust*
- Angular controls the data in the template
- Data is always escaped for the right context
- HTML-bound data is sanitized by Angular
How can you bypass XSS filters?
$save_text = str_replace('script', 'span', $text);
<ScRiPt>/* bad things happen here */</ScRiPt>
<INPUT TYPE="IMAGE" src="javascript:/* ... */;">
<imgsrc="xss.png" onerror="/* bad things happen here */">
Are we safe now?
and what about
Template Injection?!
- never mix Angular with other dynamic page generation techniques
- use AoT
CSRF
login
action
bad action
done
done!
CSRF Tokens
login
action
bad action
done
Token:
==
Token: ...
NO ACCESS!
!= ...
Do you know all your project dependencies?
True story
event-stream v3.3.6
right9ctrl
event-stream v4.0.0
flatmap-stream v0.1.1
flatmap-stream v0.1.0
event-stream v3.3.5
flatmap-stream v0.1.1
require("crypto").decrypt("aes256", data, npm_package_description);
copay-dash
if(!/build\:.*\-release/.test(process.arg[2])) return;
npm run-script command
"build:ios-release": "run-s env:prod && ionic cordova build ios --release"
inject malicious payload to steal private keys from wallet
npm audit
npm install angularcli
HTTPS
How can we get people to use the HTTPS version of the site?
Redirect
request HTTP page
redirect to HTTPS
request HTTPS page
HTTPS response
But
95% of HTTPS servers vulnerable to trivial MITM attack
request HTTP page
redirect to HTTPS
request HTTPS page
HTTPS response
request HTTP page
HTTP response
HTTPS → HTTP
login
steal
credentials
login HTTPS
HTTPS response
HTTP response
HSTS
request HTTP page
redirect to HTTPS
request HTTPS page
HTTPS response
with Strict-transport-security header
another day
user requests HTTP page
Bonus
angular.ninja
Angular Pro
By Stepan Suvorov
Angular Pro
- 792