We have an Angular 5 application that uses Auth0 to handle all of our authorization requirements. It has been in development for about a year now. So we initially started with Angular2 and have upgraded to 3, 4, and now 5 respectively. The slow load times has always been an issue.
We use the npm auth0 sdk inside our project. It is hosted on a s3 bucket. The project uses angular-cli to build with webpack.
Has anyone else experienced this? Is there a known solution? We use uglify to minify everything. The lock screen shows up quickly, but then the entire process of submitting your username/password to hit the callback/server-auth and then load the dashboard takes anywhere from 20-30 seconds. It feels like a lifetime.
I will attach our angular-cli.json file and our package.json file to give you an idea of what's all in the application.
angular-cli.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "ng2angle"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"app/core/preloader/preloader.scss",
"styles.scss"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"app/core/preloader/preloader.js",
"../node_modules/flot/jquery.flot.js",
"../node_modules/jquery.flot.tooltip/js/jquery.flot.tooltip.js",
"../node_modules/flot/jquery.flot.resize.js",
"../node_modules/flot/jquery.flot.pie.js",
"../node_modules/flot/jquery.flot.time.js",
"../node_modules/flot/jquery.flot.categories.js",
"../node_modules/easy-pie-chart/dist/easypiechart.js",
"../node_modules/chart.js/dist/Chart.bundle.js",
"../node_modules/bootstrap/js/modal.js",
"../node_modules/bootstrap/js/dropdown.js",
"../node_modules/bootstrap/js/tooltip.js",
"../node_modules/summernote/dist/summernote.js",
"../node_modules/moment/min/moment-with-locales.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"staging": "environments/environment.staging.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
},
"build": {
"showCircularDependencies": false
}
}
}
package.json
{
"name": "moleadaggregation",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build-staging": "ng build --env=staging --aot=false --target=development && node ./build-post.js",
"build-prod": "ng build --prod --aot=false --target=production && node ./build-post.js",
"build-docs": "./node_modules/.bin/compodoc -d docs -p src/tsconfig.app.json --disableSourceCode --theme readthedocs -n \"Mo Lead Aggregation\"",
"test": "ng test",
"lint": "ng lint",
"modernizr": "modernizr -c modernizr-config.json -d src/modernizr.js",
"postinstall": "node ./node_modules/protractor/bin/webdriver-manager update && npm rebuild node-sass",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.4.6",
"@angular/common": "^4.4.6",
"@angular/compiler": "^4.4.6",
"@angular/core": "^4.4.6",
"@angular/forms": "^4.4.6",
"@angular/http": "^4.4.6",
"@angular/platform-browser": "^4.4.6",
"@angular/platform-browser-dynamic": "^4.4.6",
"@angular/router": "^4.4.6",
"@ngx-translate/core": "6.0.1",
"@ngx-translate/http-loader": "0.0.3",
"angular2-datatable": "0.6.0",
"angular2-jwt": "^0.2.3",
"angular2-modal": "^3.0.2",
"angular2-toaster": "3.0.1",
"auth0-js": "^8.10.1",
"auth0-lock": "^10.20.0",
"bootstrap": "3.3.7",
"chart.js": "2.5.0",
"classlist.js": "1.1.20150312",
"core-js": "2.4.1",
"easy-pie-chart": "2.1.7",
"flot": "flot/flot#v0.8.3",
"font-awesome": "4.7.0",
"intl": "1.2.5",
"jquery": "3.2.1",
"jquery-slimscroll": "1.3.8",
"jquery.browser": "0.1.0",
"jquery.flot.tooltip": "github:krzysu/flot.tooltip",
"lodash": "4.17.4",
"modernizr": "3.5.0",
"moment": "2.18.1",
"moment-timezone": "^0.5.13",
"ng2-charts": "1.6.0",
"ng2-dnd": "4.0.2",
"ng2-file-upload": "1.2.1",
"ng2-nouislider": "^1.6.1",
"ng2-table": "1.3.2",
"ng2-validation": "4.1.0",
"ngx-bootstrap": "1.6.6",
"ngx-modialog": "^3.0.4",
"node-sass": "^4.5.3",
"nouislider": "^10.1.0",
"rxjs": "^5.5.2",
"simple-line-icons": "2.4.1",
"spinkit": "1.2.5",
"summernote": "0.8.3",
"sweetalert": "1.1.3",
"web-animations-js": "2.2.2",
"whirl": "github:jh3y/whirl",
"zone.js": "0.8.4"
},
"devDependencies": {
"@angular/cli": "^1.4.9",
"@angular/compiler-cli": "^4.4.6",
"@compodoc/compodoc": "^1.0.4",
"@types/jasmine": "2.5.38",
"@types/lodash": "4.14.61",
"@types/moment": "2.13.0",
"@types/node": "6.0.60",
"codelyzer": "2.0.0",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "3.2.0",
"karma": "1.4.1",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "0.2.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"karma-read-json": "1.1.0",
"loaders.css": "0.1.2",
"protractor": "5.1.0",
"ts-node": "2.0.0",
"tslint": "4.5.0",
"typescript": ">=2.1.0 <2.4.0",
"webdriver-manager": "10.2.5"
}
}
I would also like to add some screenshots of the waterfall so we can show where the lag is. One of the screenshots shows external fonts, and two others screenshots show separate calls to our API. One for accounts and one for contacts.
Our API is really fast when I use something standalone like, Google POSTman, or just call it in the Browser directly. Although the images may look like it is our API, I just don't buy it. I use our API often enough to know that it moves quickly. It is a lack of experience with Angular that I am reaching out for help.
external font found in callback from Auth0
The call to the 'my' account route
The call to the 'contacts' route
If there is anything else that you need to see, or I could add to improve this post please let me know. I feel like this is enough for someone who has worked through this before to know how to help.
Thank you!