ngx-uploader | Angular File Uploader | File Upload library

I'm trying to upload a file from a Angular client to my ASP.NET Core 2 WebAPI service. When I call the service, I get back an Internal Server Error. That's the error I'm getting:

The component I'm using client-side is this one: ngx-uploader

In my request options, i set them as you can see here:

I'm not sure why I lead my heroku logs command to this state.

It kept showing old logs.

I tried to fix it by attempting these :

I am using ngx-uploader and with the data section inside the uploadInput, I pass additional data:

Angular 4 routes not working after page refresh. It's worked before. Currently when page refresh route is going to login page(default Route) it should stay on same route.

localhost:4200/dashboard if we refresh this page it's going to localhost:4200/login

I don't know whats changes is made in project suddenly it's stopped working. Please help.

Package.json

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",

   ...

Heyy peeps, i've been using ngx-uploader in angular2, in response i'm sending file name thats generated on backend. Response is only sent when file is fully uploaded. So how could i track uploading process which is done by event emitter and looks like this:

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

I find myself in a situation where I want/have to edit a template of a component, package imported by npm into my angular2 project.

I know that editing it inside /node_modules folder is a big 'no-no'. I would lose all my edits on 'npm install' or i have to add the whole /node_modules folder to my GIT project.

So how should i tackle this challenge.

In java world, I would extend the class, add and/or override stuff, and use my own 'child' class where I need it.

But what about angular 2 component templates??...

EDIT:

To clarify my comment @lexith:

If you worked with Angular2 you should know what a component template is. The file with the same name but with .HTML extension. Now if I add a component through npm (ex.: ng-bootstrap, ngx-uploader....), and I need to edit the template or maybe the behavior(.ts file) a bit, how should one tackle that kind of challenge.

I could provide the code and specific package name, but how would this help? With the question, I try to understand the concept and implement it in several situations.

EDIT2:

I found a similar question here on SO. And I think I will implement the solution as proposed there.

Fork => Edit => Push => Import (from my git fork).`

But what a pain in the ass just to rearrange some HTML tags. Is this the only way to Rome?

I am upgrading to Angular 6

Following the upgrade guide, I encounter the following problem: