Use Case

Update Angular App with Infragistics Ignite UI components from v16 to v18.

Source Code

Product demo
Sravz source code for personal/academic use
Collaborative license for Startup use
Commercial license

Session 1:

Topics Discussed:
1. Major breaking change: Due to the removal of the Angular Compatibility Compiler (ngcc) in v16, projects on v16 and later no longer support View Engine libraries.
2. Commands used to Update the Application
3. Changes made to package.json/angular.json by ng update
4. Update from angular http to httpClient service
  - No need to use map function to parse the data to JSON
  - Default is JSON
  - Get/POST etc are generic, they take a type
5. Many changes to angular-auth-oidc-client
  - High level discussion
  - Set up angular OIDC in auth module
  - Set up external auth provider
  - External login will call the redirect url
  - Redirect URL will get the user info from the external auth provider
  - Pass the external user to backend to get the backend user
  - Shows the landing page

Video explanation of the code

Source Code

	export ANGULAR_VERSION=16
	export NODE_OPTIONS=--max_old_space_size=8048
	rm -rf /workspace/node_modules \|\| true
	# Upgrade to 1 higher version at a time
	# Shows what needs to update
	ng update
	# Upgrades everything including angular core
	ng update @infragistics/igniteui-angular@$(ANGULAR_VERSION) --force
	# Should already be upgraded but retry
	ng update @angular/core@$(ANGULAR_VERSION) --force
	# Upgrades angular cli
	ng update @angular/cli@$(ANGULAR_VERSION) --force
	# Upgrade charts
	ng update igniteui-angular-charts@$(ANGULAR_VERSION) --force
	ng update igniteui-angular-guages@$(ANGULAR_VERSION) --force
	ng update igniteui-angular-maps@$(ANGULAR_VERSION) --force

view raw command.sh hosted with ❤ by GitHub

	{
	"name": "src2",
	"version": "0.0.0",
	"scripts": {
	"ng": "ng",
	"start": "ng serve --host 0.0.0.0 --disable-host-check --aot=true --watch",
	"build": "ng build --prod --aot=true",
	"test": "ng test",
	"lint": "ng lint",
	"server": "node node_modules/ngf-server/server.js",
	"e2e": "ng e2e",
	"gzip": "rm -rf ${npm_config_outputdir}/*-gzip && gzipper c --verbose --output-file-format [filename].[ext].gz ${npm_config_outputdir} ${npm_config_outputdir} && gzipper c --verbose --output-file-format [filename].[ext] ${npm_config_outputdir} ${npm_config_outputdir}-gzip",
	"build-gzip": "ng build --prod --aot=true && rm -rf /dist/${npm_config_environment}/*-gzip && gzipper --verbose --output-file-format [filename].[ext] /dist/${npm_config_environment}/sravz-frontend-ng /dist/${npm_config_environment}/sravz-frontend-ng-gzip"
	},
	"private": true,
	"dependencies": {
	"@angular/animations": "^16.2.12",
	"@angular/cdk": "^16.2.12",
	"@angular/common": "^16.2.12",
	"@angular/compiler": "^16.2.12",
	"@angular/core": "^16.2.12",
	"@angular/forms": "^16.2.12",
	"@angular/material": "^14.2.7",
	"@angular/platform-browser": "^16.2.12",
	"@angular/platform-browser-dynamic": "^16.2.12",
	"@angular/router": "^16.2.12",
	"@angular/service-worker": "^16.2.12",
	"@angular/upgrade": "^16.2.12",
	"@fortawesome/angular-fontawesome": "^0.10.1",
	"@fortawesome/fontawesome-svg-core": "^1.2.35",
	"@fortawesome/free-brands-svg-icons": "^5.15.3",
	"@fortawesome/free-solid-svg-icons": "^5.15.3",
	"@igniteui/material-icons-extended": "^2.10.0",
	"@infragistics/igniteui-angular": "^16.1.7",
	"@nebular/auth": "^12.0.0",
	"@nebular/security": "^12.0.0",
	"@nebular/theme": "^12.0.0",
	"@ng-select/ng-select": "^11.2.0",
	"@types/hammerjs": "^2.0.39",
	"ajv": "^8.5.0",
	"angular-auth-oidc-client": "^16.0.1",
	"bootstrap": "^5.0.1",
	"chart.js": "^2.9.4",
	"core-js": "^3.6.5",
	"font-awesome": "^4.7.0",
	"igniteui-angular-charts": "^16.1.1",
	"igniteui-angular-core": "^16.1.1",
	"igniteui-angular-gauges": "^16.1.1",
	"igniteui-angular-maps": "^16.1.1",
	"igniteui-theming": "^3.3.3",
	"jquery": "^3.6.0",
	"jszip": "^3.5.0",
	"minireset.css": "^0.0.7",
	"ng-recaptcha": "^12.0.2",
	"ng2-file-upload": "^5.0.0",
	"ngx-disqus": "^3.0.1",
	"ngx-socket-io": "^4.5.0",
	"ngx-toastr": "^17.0.2",
	"popper.js": "^1.16.1",
	"resize-observer-polyfill": "^1.5.1",
	"rxjs": "^7.5.2",
	"tslib": "^2.1.0",
	"zone.js": "~0.13.3"
	},
	"devDependencies": {
	"@angular-devkit/build-angular": "^16.2.10",
	"@angular/cli": "^16.2.10",
	"@angular/compiler-cli": "^16.2.12",
	"@angular/language-service": "^16.2.12",
	"@igniteui/angular-schematics": "^14.1.1005",
	"@types/angular": "^1.7.3",
	"@types/facebook-js-sdk": "^2.8.6",
	"@types/jasmine": "^3.5.14",
	"@types/jasminewd2": "^2.0.8",
	"@types/node": "^12.12.62",
	"codelyzer": "^5.2.2",
	"gzipper": "^4.4.0",
	"include-media": "^1.4.10",
	"jasmine-core": "^3.6.0",
	"jasmine-spec-reporter": "^4.2.1",
	"karma": "^6.3.2",
	"karma-chrome-launcher": "^3.1.0",
	"karma-cli": "^2.0.0",
	"karma-coverage-istanbul-reporter": "^2.1.1",
	"karma-jasmine": "^2.0.1",
	"karma-jasmine-html-reporter": "^1.5.4",
	"protractor": "^7.0.0",
	"rxjs-tslint": "^0.1.8",
	"sass": "^1.63.2",
	"ts-node": "~8.3.0",
	"tslint": "^6.1.3",
	"typescript": "4.9.5"
	},
	"browserslist": [
	"last 5 Chrome versions",
	"last 5 ChromeAndroid versions",
	"last 3 Safari versions",
	"last 3 iOS versions",
	"last 5 Firefox versions",
	"last 5 FirefoxAndroid versions",
	"Firefox ESR",
	"last 2 Edge versions",
	"not dead"
	]
	}

view raw package.json hosted with ❤ by GitHub

Use Case

Source Code

Session 1:

Video explanation of the code

Source Code

References