Having trouble with Angular 2 and ng2-file-upload when trying to load it using SystemJS

Currently, I am utilizing systemJS for package management in my project. In order to configure systemJS, I have included the following lines in the configuration file:

{
  map: { 'ng2-file-upload': 'node_modules/ng2-file-upload' },
  packages: {
    'ng2-file-upload': {
        main: './ng2-file-upload/ng2-file-upload.js', // also tried with './ng2-file-upload.js'
        defaultExtension: 'js'
    },
  }
}

To import ng2-file-upload, I use the syntax 

import { FileDrop, FileUploader } from 'ng2-file-upload';
.

However, upon importing this module, my application crashes: although my TypeScript compiler appears to be functioning correctly (as indicated by other logs), the changes are no longer transpiled, rendering the application non-executable. There are no error logs directly related to ng2-file-upload (apart from numerous instances of Duplicate identifiers).

Any suggestions on how to resolve this issue?

UPDATE: To troubleshoot, I relocated the package from node_modules to a directory adjacent to my app (vendor) and attempted to use a relative path for importing FileDrop and FileUploader. Unfortunately, systemJS failed to import them, generating the error message:

Error: SyntaxError: Unexpected token <(…)

UPDATE 2: Here are additional specifics regarding my setup. My application is structured within a public directory containing two sub-folders: src and build. TypeScript code is authored in src (obviously) and the transpiled files are stored in build. Presently, there is no bundling implemented, thus the hierarchy within build mirrors that of src.

Interestingly, during the transpilation process, TSC inexplicably creates a node_modules/ng2-file-upload folder within build. See below for the directory structure:

public
|-- build
|    |-- core
|    |-- modules
|    |-- styles
|    |-- node_modules
|    |    |-- ng2-file-upload
+-- src
    |-- core
    |-- modules
    |-- styes

The reason behind TSC transpiling this package remains unknown. It is worth mentioning that node_modules have been excluded in my tsconfig.ts.

file-uploadtypescriptangularsystemjs

Answer №1

Below is the systemjs.config implementation that I have successfully tested:

      var map = {
    'app': 'app', // 'dist',
    'rxjs': 'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular': 'node_modules/@angular',
    'ng2-file-upload': 'node_modules/ng2-file-upload'
};


var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'ng2-file-upload': { main: 'ng2-file-upload.js', defaultExtension: 'js' }
};

Answer №2

Here is a potential configuration to consider:

{
  mapping: { 'ng2-file-upload': 'node_modules/ng2-file-upload' },
  modules: {
    'ng2-file-upload': {
      defaultExtension: 'js'
    },
    (...)
  }
}

To use this configuration, you can import it in the following manner:

import { FileDrop, FileUploader } from 'ng2-file-upload/ng2-file-upload';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering the nesting of keys in Typescript.Unlock the secrets of

I encountered a situation where the following code snippet was causing an issue: class Transform<T> { constructor(private value: T) {} } class Test<T extends object> { constructor(private a: T) {} transform(): { [K in keyof T]: Transfo ...

typescript

Managing dependencies and automating setup processes can be tricky when incorporating Typescript into a

Query: How can I easily set up Typescript with Symfony without making extensive changes to Symphony's configuration files? Here are the key requirements for the solution: Typescript MVC Pattern should be set up in a private typescript directory: ...

symfonytypescriptwebpacktypescript2.0symfony-3.1

Evaluating h1 content in HTML using Angular Protactor testing

I am completely new to end-to-end testing. I have a login page in my application that should be displayed to users when they log out. However, I am facing an issue with retrieving the text from a specific div element containing an h1 tag, leading to unexpe ...

htmlangularseleniumprotractorend-to-end

Angular applications encountering issues with Express delete-route functionality

For some reason, I am having trouble with Delete routes in my Angular applications. They seem to work perfectly when tested using Postman, but fail to function when called from within the Angular app. //Attempting to call a delete route from an Angular app ...

node.jsangulartypescriptexpresspostman

Exploring the world of Jasmine and Angular: How to effectively mock nested methods within the Class being tested

Hello esteemed community... I have encountered a perplexing issue that appears straightforward, but has eluded my attempts at resolution... The challenge I am facing involves testing a Controller-Class in Angular. This particular codebase is laden with d ...

angularunit-testingjasmine

Angular Material Mat-List-Option to display a collection of checkboxes and retrieve information

Here is a list of shoes I have: <mat-selection-list #shoes> <mat-list-option *ngFor="let size of customer.productsizes"> {{size .sizeName}} </mat-list-option> ...

angularangular-material

Issue with calling the component I've built in Angular

I recently developed a new component, but I am facing issues with it not appearing in the app. In my main component file (app.component.html), the code looks like this: <h1>First App</h1> <app-red-light></app-red-light> On the oth ...

angular

Guide to dynamically configuring ViewEncapsulation for a Web Component

When initializing a component, I am facing an issue with setting up Shadow DOM based on the browser type (since IE does not support Shadow DOM). To handle this, I check if the browser is IE11 and then configure the encapsulation as Emulated for IE and Sha ...

angularweb-component

Can you advise on how to generate a key to access an environment.ts value within a *ngFor loop? Specifically, I am trying to locate keys that follow the pattern 'environment.{{region}}_couche_url' within the loop

I currently have a block of HTML code that is repeated multiple times. <!-- Metropolitan Map --> <div> <app-map [name] = "(( environment.metropole_name ))" [layer_url] = "(( environment.metropole_layer_url ))" ...

htmlangularngfor

Utilizing React TypeScript: Leveraging useRef for Linking purposes

Implementing useRef to Handle Link Clicks import {Link} from 'react-router-dom'; const myLinkRef = useRef<HTMLAnchorElement>(null); ... myLinkRef.current.click() ... <Link to={{pathname: '/terms'}} id='myLink' ref= ...

reactjstypescript

What is the best way to show TypeScript code using "<code>" tags within an Angular application?

I am looking to showcase some TypeScript (angular code) as plain text on my website using prismjs. However, the Angular framework is executing the code instead. How can I prevent it from running? I have attempted enclosing it within pre and code tags wit ...

htmlangulartypescript

Using TypeScript and Angular to remove properties from an object

My RandomValue class and WeatherForecast class are causing me some trouble. The WeatherForecast class is functioning properly, populating the table with data as expected. However, the RandomValues class/interface appears to be returning a list of objects w ...

c#jsonangulartypescriptobject-properties

"PrimeNG Dropdown: The 'Showclear' option reveals the clear icon right from

In my Angular 7 application, I've been utilizing PrimeNG's Dropdown component which has been performing well. Typically, I set the showClear property to true to display a small "x" button on the right side of the dropdown control. Clicking on thi ...

angularprimengprimeng-dropdowns

Component that wraps around children elements and passes props to their render function

I'm currently working on coding a wrapper component that takes a title prop and a children prop which must be a function. All the other props passed to the wrapper should be used as arguments when rendering the children: import React, { ReactNode, Inp ...

reactjstypescript

IonInput and IonLabel are not adjacent to each other

I'm encountering an issue with this code snippet <ion-list> <ion-list-header> Input list: </ion-list-header> <ion-item *ngFor="let att of anArray; let idx = index"> <ion-label color="primary" flo ...

angularionic2ionic3

Is it possible to integrate a personalized theme into react-dates?

Attempting to customize the styling of my react-dates DayPickerRangeController in Typescript using react-with-styles and Aphrodite. I have implemented the following code, mirroring the code found at https://github.com/airbnb/react-dates#interfaces: const ...

reactjstypescriptreact-datesaphroditereact-with-styles

Multiple occurrences of Angular @HostListener event being triggered

I am currently working on an Ionic 3 application where I have created an "auto-complete" directive. This directive triggers an auto-complete dialog when the element is focused. The implementation of this in the directive looks like this: @HostListener(&ap ...

angulareventsionic3

The NgFor is unable to iterate over an array because it is being treated as an

When attempting to call a new endpoint for displaying data, I noticed that the previous set of data is wrapped with an extra pair of brackets '[]', which seems to be causing a problem. The new endpoint does not format the data in this way when I ...

javascripthtmlangular

When using RXJS, the method BehaviorSubject.next() does not automatically notify subscribers

In my project, I have a service set up like this: @Injectable({ providedIn: 'root' }) export class MyService { private mySubject = new BehaviorSubject({}); public currentData = this.mySubject.asObservable(); updateData(data: any) { ...

angulartypescriptrxjs

Unable to transfer the form value to the service and City value cannot be updated

I am new to the world of Angular and I am attempting to create a basic weather application. However, I am encountering issues when trying to pass the city value from the form on ngSubmit to the API service. I have attempted to use an Emitter Event to trans ...

angulartypescript