I'm facing an issue with Angular2 where I am unable to include a component from

I recently downloaded an angular component from npmjs called ng2-easy-table (I actually created this component, so there may have been some mistakes in its development).

package.json

{
  "name": "untitled",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run styles\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings"
  },
  "dependencies": {
    "angular2": "2.0.0-beta.13",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.0",
    "ng2-easy-table": "0.0.12",
    "node-sass": "^3.4.2",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "0.19.24",
    "zone.js": "^0.6.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.8.7",
    "typings": "^0.7.5"
  },
  "author": "",
  "license": "ISC"
}

Next, I proceeded to create a simple app.component.ts file to insert the ng2-easy-table directive.

app.component.ts

import {Component} from 'angular2/core';

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from 'ng2-easy-table/app/app.component';

@Component({
  selector: 'app',
  templateUrl: 'app/index.html',
  directives: [AppComponent]
})

export class IndexComponent { }

bootstrap(IndexComponent, []);

Within the node_modules directory, it is structured as shown below: https://i.sstatic.net/LnCEH.png

And System.config

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
    System.import('app/app.component')
            .then(null, console.error.bind(console));
</script>

However, upon launching the application with npm start, the console message displayed is:

GET http://localhost:3002/ng2-easy-table/app/app.component 404 (Not Found)

Error: XHR error (404 Not Found) loading http://localhost:3002/ng2-easy-table/app/app.component(…)

https://i.sstatic.net/J1dlH.png

EDIT

Upon integrating Config.style provided by @Thierry Templier, the current issue seems to be resolved: https://i.sstatic.net/EyFr3.png

Answer №1

To properly configure SystemJS for your project, make sure to include a map block specifically for the library you are using. Here is an example setup:

<script>
    System.config({
        map: {
          'my-library': 'node_modules/my-library'
        },
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            },
            'my-library': {
                format: 'register',
                defaultExtension: 'js'
            } 
        }
    });
    System.import('app/app.component')
            .then(null, console.error.bind(console));

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

Refreshing the AngularJS application by re-rendering the view without the need for a full reload

I am currently working on an application that heavily utilizes the ng-include directive, and one thing I cannot stand is having to reload the entire application just to see a simple HTML update. I have experimented with manually replaying the XHR in the N ...

"I am looking to retrieve the properties of an object that belongs to the EChartsOption type in TypeScript when working with Angular and ECharts. How

Currently, I am exploring how to access a property of an EChartOptions object in Angular 16.0.2, which may be undefined as I am still new to TypeScript. List of npm packages: eapp/src$ npm list <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

Message within the boundary of the input field

Click here to view the image It would be great to have the text "text name" displayed on the border of the input box. Here is the HTML code - <input type="text" id="text creator" class="form-control" placeholder="text creator" na ...

What is the technique for using JavaScript to implement styling on a <td> within an HTML table?

Can someone help me with applying JavaScript to an entire column in an HTML table? Here is the script I am currently using: I want to insert a line break after each comma in the Message column of the table. Can anyone point out what I'm doing wrong? ...

Brand new installation of npm and nodePackageManager

I've recently delved into Angular 2 development, but I'm facing some challenges running the Angular 2 Quickstart project smoothly. The culprit seems to be a slew of npm dependency errors. Is there a way for me to globally uninstall all previousl ...

Implementing conditional data binding in Angular with ngIf directive

I've been struggling to showcase recipes from a specific food category. I'm attempting to iterate through an array of recipes within a parent component. <div class="row"> <div class="col-xs-8" *ngIf="{{ recipe.category }} === mexican" ...

Concealing a div based on the checkbox's updated selection

Hello, I am currently working on a project that involves using both Angular and jQuery with checkbox controls. In this particular scenario, I have two checkboxes where selecting one checkbox should display its respective div, as each checkbox is associat ...

How to format numbers with commas in AngularJS to make them easier to read

One of my variables looks like this: $scope.numbers = 1234567. When I apply the filter {{numbers| number : 0}}, the result is 1,234,567. Is it possible to get a result like 12,34,567 instead? Thank you in advance. ...

Generating a dynamic SQL Insert statement based on an array object

I am currently working on a Typescript project where I am looking to optimize my Insert function by creating one Insert statement for all the elements in an object, rather than generating multiple Inserts for each array item. Here is the code snippet of m ...

Issue with Angular 2 DI: Not all parameters can be resolved

I developed a simple app using Angular 2, but I'm facing an issue where I cannot inject a service into one of my components through a module. Upon compiling with webpack, I encounter the following error message: "Angular 2 DI - Can't resolve all ...

Getting information from JSON using Angularjs - a step by step guide

var app = angular.module("app", []); app.controller('emp', ['$scope', 'empService', function($scope, empService){ $scope.doSearch = function(){ empService.findEmployeeById($scope.searchempno, function(r){ ...

Develop a mapping system using enums that ensures compiler errors are enforced

I am struggling to enforce a mapping on an object in TypeScript. My goal is to define a type or interface that maps from ANIMAL_PLACE to ANIMAL_TYPE. I want the type to ensure that any object created with these mappings includes both the ANIMAL_PLACE and A ...

Do you need to use NextPage when developing NextJS applications with TypeScript?

When looking at the NextJS examples, particularly the one demonstrating how to incorporate TypeScript with NextJS, I noticed that they do not utilize the NextPage type. The specific file I am referring to can be found here: https://github.com/vercel/next- ...

Exploring the power of Typescript alongside Styled Components and Material UI

Working with Typescript in conjunction with MUI and Styled-Components may lead to the need to pass props directly to MUI elements to address type errors... const Index = () => { return ( <StyledButton variant="contained" > ...

The AngularJS UiBoostrap Accordion is experiencing an issue. The controller 'uibAccordion' that is needed for the directive 'uibAccordionGroup' cannot be located

Currently, I am developing a project using AngularJS. Within my index.html file, following the body tag, I have included the following scripts: <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/a ...

AngularJS : What is the best way to nest a view inside a parent state while passing parameters?

I've been working with the Ionic Framework to develop a mobile application, and I've encountered some challenges with the UI Router. While I've managed to get a few screens functioning correctly, I'm struggling to implement nested views ...

creating a responsive form with angular flex layout

We are currently utilizing the following library: https://github.com/angular/flex-layout Our current code for achieving fxlayout is as follows, however, it is not functioning correctly on mobile devices. <div fxLayout="column" id="width& ...

Issue with accessing $index.$parent in function parameter within ng-repeat in AngularJS

Can anyone with more experience please explain to me why this particular code compiles successfully: <li class="btn dropdown top-stack breadcrumb-btn" ng-repeat="nodeName in selectedNodeNames"> <a class="dropdown-toggle btn-anchor"> ...

How can I rename an event function in Angular 2?

Is it possible to dynamically change the function associated with an event? I attempted to do so like this: (click) = "{{myFunction}}" However, I encountered an error stating "Parser Error: Got interpolation ({{}}) where expression was expected". I am lo ...

AngularJS Alert: [$injector:unpr] Provider Not Recognized

After setting up the URL routes for the sportsStore app from an AngularJS book to learn, I'm encountering the following errors: Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirect ...