ng2-slim-loading-bar | Angular 2 component shows slim loading bar | Frontend Framework library

I am making web application with Angular8 and Firebase(db, functions, hosting) with Angularfire.

In non-production mode all works as expected. But when i try to build (or even serve) the app project in production mode the app throws following error in browser's console:

After updating to Angular 6.0.1, I get the following error on ng serve:

I am moving my app from angularjs to angular2. I was using Angular Loading Bar which is

An automatic loading bar using angular interceptors. It works automatically, so simply include it as a dependency and it will automatically display the progress of your $http requests.

More info

I am trying to find similar plugin in angular2. I came across a few like ng2-slim-loading-bar but here I have to manually manage the progress. For every http request, I have to manually start the progress bar and then finish it.

So, are there any existing plugin available which can do exactly what Angular Loading Bar does in angularjs. Or how can I modify any existing plugin to behave like this.

I've just installed ng-bootstrap in my Angular project and after that I've include its modules. But my CLI shows me an error.

"WARNING in ./node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js 9853:57-75 "export 'ɵɵdefineInjectable' was not found in '@angular/core'"

app.module

I'm getting this error when I tried ng build --prod with Angular 7.2.9

I've set up an Angular development workflow using Docker. However, building the docker and serving the Angular app is a bit slow and takes around ~7 minutes (considering all base images pre-downloaded).

./package.json:

I took some code from another repository and decided to start my project using the already provided parent and child component in that repository. In the repository that I took there is a main component which is parent component while it's children are login, register and about component. Moving on, there is a navbar design in main component which is appearing on every other child page. The parent component is also the start up page so whenever I run the applicantion the main Component gets triggered. Now i need to design a homepage and I want that page to be the startup page and user should be able to navigate from that page to the other pages like sign in,register etc. But if I change the maiComponent to homeComponent in app.routing module then the homepage does appear in.startup but the navbar design disappears. If I make the homepage as a child component then how can I also make it to appear on startup?

app-routing.module.ts file

I am using ng2-admin dashboard library, I have updated to latest version before a week, seems from last few days I am unable to run my application in IE11 but its opened and run in Chrome and Mozilla browser.

below is my files relates to this issue,polyfills.ts and package.json and error,

1. error:

DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337 my-comp-list HTML1300: Navigation occurred. my-comp-list SCRIPT5007: Unable to get property 'apply' of undefined or null reference vendor.bundle.js (23012,5)

1. package.json: `{ "name": "ng2-admin", "version": "1.0.0", "description": "Angular and Bootstrap 4 Admin Template.", "author": "Akveo ", "homepage": "http://akveo.github.io/ng2-admin/", "repository": { "type": "git", "url": "https://github.com/akveo/ng2-admin.git" }, "bugs": { "url": "https://github.com/akveo/ng2-admin/issues" }, "license": "MIT", "scripts": { "ng": "ng", "rimraf": "rimraf", "changelog": "standard-changelog", "start": "ng serve --deploy-url \"http://localhost:4200/\"", "start:hmr": "ng serve --hmr", "start:aot": "ng serve --aot", "start:prod": "ng serve --prod", "start:prod:aot": "ng serve --prod --aot", "build": "npm run clean:dist && ng build && gulp default", "build:prod": "npm run build -- --prod", "build:prod:aot": "npm run build:prod -- --aot", "build:ci": "npm run build:prod && npm run build:prod:aot", "build:demo": "npm run build:prod:aot -- --base-href \"http://akveo.com /ng2-admin/\"", "test": "ng test -sr", "test:coverage": "npm run clean:coverage && ng test -sr -cc", "lint": "ng lint", "lint:styles": "stylelint ./src/app/**/*.scss", "lint:ci": "npm run lint && npm run lint:styles", "pree2e": "webdriver-manager update --standalone false --gecko false", "e2e": "ng e2e", "clean:dist": "npm run rimraf -- dist", "clean:coverage": "npm run rimraf -- coverage", "docs:deploy": "wintersmith build -C docs && gh-pages -d docs/build", "docs:serve": "wintersmith preview -C docs" }, "private": true, "dependencies": { "@angular/animations": "4.1.0", "@angular/common": "4.1.0", "@angular/compiler": "4.1.0", "@angular/core": "4.1.0", "@angular/forms": "4.1.0", "@angular/http": "4.1.0", "@angular/platform-browser": "4.1.0", "@angular/platform-browser-dynamic": "4.1.0", "@angular/platform-server": "4.1.0", "@angular/router": "4.1.0", "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.25", "@ngx-translate/core": "6.0.1", "@ngx-translate/http-loader": "0.0.3", "amcharts3": "github:amcharts/amcharts3", "ammap3": "github:amcharts/ammap3", "angular2-datatable": "0.6.0", "animate.css": "3.5.2", "bootstrap": "4.0.0-alpha.6", "chart.js": "1.1.1", "chartist": "0.10.1", "chroma-js": "1.3.3", "ckeditor": "4.6.2", "core-js": "2.4.1", "easy-pie-chart": "2.1.7", "font-awesome": "4.7.0", "fullcalendar": "3.3.1", "google-maps": "3.2.1", "ionicons": "2.0.1", "jquery": "3.2.1", "jquery-slimscroll": "1.3.8", "leaflet": "0.7.7", "leaflet-map": "0.2.1", "lodash": "4.17.4", "ng2-ckeditor": "1.1.6", "ng2-completer": "1.3.1", "ng2-handsontable": "0.48.0", "ng2-slim-loading-bar": "4.0.0", "ng2-smart-table": "1.0.3", "ng2-tree": "2.0.0-alpha.5", "ngx-uploader": "2.2.5", "normalize.css": "6.0.0", "roboto-fontface": "0.7.0", "rxjs": "5.1.1", "zone.js": "0.8.5",

   "@ng-idle/core": "", "@ng-idle/keepalive": "", "moment": "", "ng2-toastr": "", "owasp-password-strength-test": "*" }, "devDependencies": { "@angular/cli": "1.0.1", "@angular/compiler-cli": "4.1.0", "@types/fullcalendar": "2.7.40", "@types/jasmine": "2.5.38", "@types/jquery": "2.0.41", "@types/jquery.slimscroll": "1.3.30", "@types/lodash": "4.14.61", "@types/node": "6.0.69", "codelyzer": "2.0.0", "gh-pages": "0.12.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", "npm-run-all": "4.0.2", "protractor": "5.1.0", "rimraf": "2.6.1", "standard-changelog": "1.0.1", "stylelint": "7.10.1", "ts-node": "2.0.0", "tslint": "4.5.0", "tslint-eslint-rules": "3.5.1", "tslint-language-service": "0.9.2", "typescript": "2.3.2", "typogr": "0.6.6", "underscore": "1.8.3", "wintersmith": "2.2.5", "wintersmith-sassy": "1.1.0",

   ...

I'm trying to develop an angular application which is working with python flask API. When I'm developing the I needed to show some result which is passing from the backend. For that, I have developed an angular service.

This is the angular service