Angular2: PrimeNG - Error Retrieving Data (404 Not Found)

I'm facing an issue with using Dialog from the PrimeNG Module. The error message I keep getting is:

Unhandled Promise rejection: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:4200/node_modules/primeng/primeng.js

I followed the setup configuration provided on http://www.primefaces.org/primeng/#/setup However, no matter what I try, nothing seems to work. I am currently working with Angular2 RC4.

system-config.ts

/** Map relative paths to URLs. */
const map: any = {
  'firebase': 'vendor/firebase/firebase.js',
  'angularfire2': 'vendor/angularfire2',
  'primeng': 'node_modules/primeng'
};

/** User packages configuration. */
const packages: any = {
  angularfire2: {
    defaultExtension: 'js',
    main: 'angularfire2.js'
  },
  'primeng': { defaultExtension: 'js' }
  };

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

angular-cli-build.js

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'angularfire2/**/*.js',
      'firebase/*.js',
      'primeng/*.js'
    ]
  });
};

location-component.ts

import {Component} from "@angular/core";
import {LocationGridComponent} from "./location-grid/location-grid.component";
import {LocationDetailComponent} from "./location-detail/location-detail.component";
import {Dialog} from "primeng/primeng";


@Component({
  selector: 'app-location',
  templateUrl: 'app/location/location.component.html',
  styleUrls: ['app/orienteering/orienteering.component.css', 'app/location/location.component.css'],
  directives: [LocationGridComponent, LocationDetailComponent, Dialog]
})

export class LocationComponent {

  display: boolean = false;

  showDialog() {
    this.display = true;
  }

}

package.json

{
  "name": "digitaler-lerngarten",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "postinstall": "typings install",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.0.0-rc.4",
    "@angular/compiler": "^2.0.0-rc.4",
    "@angular/core": "^2.0.0-rc.4",
    "@angular/forms": "^0.2.0",
    "@angular/http": "^2.0.0-rc.4",
    "@angular/platform-browser": "^2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.4",
    "@angular/router": "^3.0.0-beta.2",
    "angular-cli": "^1.0.0-beta.9",
    "codelyzer": "0.0.25",
    "es6-shim": "^0.35.1",
    "karma": "^1.1.1",
    "karma-chrome-launcher": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "latest-version": "^2.0.0",
    "primeng": "^1.0.0-beta.9",
    "primeui": "^4.1.12",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "^0.19.31",
    "ts-node": "^0.9.3",
    "tslint": "^3.13.0",
    "typings": "^1.3.1",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "angular-cli": "^1.0.0-beta.9",
    "codelyzer": "^0.0.25",
    "ember-cli-inject-live-reload": "^1.4.0",
    "jasmine-core": "^2.4.1",
    "jasmine-spec-reporter": "^2.5.0",
    "karma": "^1.1.1",
    "karma-chrome-launcher": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "protractor": "^3.3.0",
    "ts-node": "^0.9.3",
    "tslint": "^3.11.0",
    "typescript": "^1.8.10",
    "typings": "^1.3.1"
  }
}
angularjstypescriptxmlhttprequesthttp-status-code-404primeng

Answer №1

After switching back to Angular2 RC3, I managed to get it working. I made a modification in system-config.ts by changing 'node_modules/primeng' to 'vendor/primeng'. Additionally, I included the primeng files in angular-cli-build.js and then rebuilt the project using "ng build".

system-config.ts

// Updated SystemJS configuration file
// Additional user configurations

const map: any = {
    'firebase': 'vendor/firebase/firebase.js',
    'angularfire2': 'vendor/angularfire2',
  'primeng': 'vendor/primeng'
};

const packages: any = {
    angularfire2: {
      defaultExtension: 'js',
      main: 'angularfire2.js'
    },
    primeng: { defaultExtension: 'js' }
};

...

/** All CLI-managed configurations here */

// Application of user's configuration
System.config({ map, packages });

angular-cli-build.js

// Modified Angular-CLI build configuration file
// Included necessary node_modules files for build

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'angularfire2/**/*.js',
      'firebase/*.js',
      'primeng/**/*.js',
      'primeui/**/*.css'
    ]
  });
};

package.json

{
  // Updated package.json with version information
}

Answer №2

Give it a shot.

System.config({     
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          },
          'node_modules/primeng': {
            format: 'cjs',
            defaultExtension: 'js'
          }
         },
         map: {
          "primeng": "node_modules/primeng"
        }
      });
      System.import('app/js/components/main')
            .then(null, console.error.bind(console));

Answer №3

Simply follow the provided examples to successfully install third-party libraries

  1. Use npm to install the package
  2. If needed, install typings for the library
  3. Include the package in the angular-cli-build.js file within the vendorNpmFiles array (this step is crucial as it specifies where to locate the files that will be placed in the vendor folder inside the dist folder)
  4. Configure SystemJS mappings to indicate where to find the package (where all files will reside in the dist folder)

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

Comprehensive compilation of Typescript error codes along with solutions

Where can I find a comprehensive list of Typescript error codes and their corresponding fixes? I frequently encounter errors during compilation, such as: data_loader_service.ts(10,13): error TS1005: '=>' expected. data_loader_service.ts(10,24 ...

typescript

Using the combination of PHP, AJAX, and MySQL, one can create a select filter that utilizes xmlhttp.open

After following the example from http://www.w3schools.com/php/php_ajax_database.asp, I successfully created a table echoing data from a database. However, my attempts to implement the datatables plugin on the table have been unsuccessful. Despite setting ...

phpjqueryajaxxmlhttprequestdatatables

Using AngularJS ui-router ui-sref results in the error message "Uncaught TypeError: Cannot read property '0' of undefined."

I am currently working on an angularJS component that utilizes ui-router with 2 straightforward route states. export default function Routes($stateProvider, $urlRouterProvider, $locationProvider) { $stateProvider .state('details', { ...

javascriptangularjsangular-ui-routerpage.js

iOS PhoneGap event registration not triggering as expected

My app performs perfectly on android, but I encounter an issue when testing it on a real iOS device. I am unable to register the device in order to obtain the device token. Below is the code snippet: .run(function($ionicPlatform, $rootScope) { $ionicP ...

androidiosangularjscordovaphonegap-plugins

Creating an index signature in TypeScript without having to use union types for the values - a comprehensive guide

Is it possible to define an index signature with strict type constraints in TypeScript? interface Foo { [index: string]: number | string } However, I require the value type to be either number or string specifically, not a union of both types (number | ...

typescript

Angular Protectors: Stop unauthorized access to a URL while allowing authorized refresh

I've developed a Protection feature that blocks users from directly accessing a specific URL, and it's functioning correctly. However, the issue arises when I try to refresh the page as the Protection feature ends up redirecting me. Below is th ...

angulartypescriptangular-routingangular-router-guards

Angularjs - Navigating the Depths of OrderBy: Effective Strategies for Handling Complex Sorting Structures

I have a collection of Incidents (displayed as an array below) that I need to sort meticulously by State, Priority, and Start_date. Specifically, I want them ordered in the sequence of Initial > Ongoing > InReview > Resolved for State, then Priori ...

javascriptangularjs

Event when a panel menu in PrimeNG is clicked

<p-panelMenu [model]="items" [style]="{'width':'300px'}" (click)="clicked($event)"></p-panelMenu>`<p-dialog header="Title" [(visible)]="display"> page 1 ` this is my ts ` click: any; display: boolean = false; ...

angularprimeng

Comparing Input and Output Event Binding

Can you provide reasons why using @Output for events is more advantageous than passing an @Input function in Angular 2+? Utilizing @Input: Parent Template: <my-component [customEventFunction]=myFunction></my-component> Inside parent-compone ...

angulartypescriptangular2-componentsangular5typescript-decorator

Invoking a C# class file using Typescript

Incorporating TypeScript and Kendo Grid into my project, I am seeking guidance on how to invoke a method within a C# class object (specifically the ProcessData method in the Utility.cs object) from TypeScript. Can someone please advise me on how to accom ...

c#typescript

What steps can I take to correct my code so that it only shows a single table?

I'm facing an issue while trying to display my dynamic JSON data. It's rendering a table for each result instead of all results in the same table. My array data is coming from the backend API. const arr = [ { "Demo": [ ...

javascriptreactjstypescript

AngularJS Material design with flexible layout scheme

I've designed a layout featuring three columns with flex values of 44, 20, and 44 respectively. This results in three distinct columns on the page. <div flex="44"> </div> <div flex="20" class="rightcol"> </div> <div flex= ...

angularjsmaterial-design

Using 3 dots argument in Angular 5 to assign values to an array

I stumbled upon this line of code in Angular. Can someone explain its meaning? this.columns = [...this.columns, col]; My guess is that this relates to the immutable concept of arrays. ...

arraystypescriptangular5angular-changedetection

What is the best way to import multiple classes from a module folder in Angular2 using TypeScript?

In my Angular2 application, I have organized my modules as follows: /app /content /models resource.ts container.ts entity-type.ts index.ts /services /whatever ...

typescriptmoduleangular

Leveraging TypeScript alongside body-parser to access properties within req.body

I'm currently developing a web application using TypeScript and integrating the body-parser middleware to handle JSON request bodies. I've encountered type errors while attempting to access properties on the Request.body object. For instance, wh ...

typescriptbody-parser

Implementing text truncation in JavaScript

I am seeking to transform the INPUT I have into a desired OUTPUT format. pieChart.js stackedColumnChart.js table.js and i want OUTPUT like that(wanna remove .js from ) pieChart stackedColumnChart table ...

javascriptjqueryangularjs

Using AngularJS to execute jQuery code after the page has finished loading

I have a carousel of images on my website: Here is the code I am using: <div id="carousel"> <ul class="bjqs"> <li ng-repeat="image in dealer.images"><img src="{{image}}" alt="{{image}}" /></li> </ul& ...

jquerysliderangularjs

Utilizing a shared service for multiple JSON datasets in AngularJS: A beginner's guide

After successfully creating a service that retrieves data from a local JSON file and uses it in a controller to display it in the browser, everything seems to be working well. Here is the code snippet: JavaScript Code: var myApp = angular.module("myApp", ...

javascriptjsonangularjs

The curious behavior of $viewContentLoaded in Angular

For my jQuery code, I wanted it to run immediately after the template view was loaded and the DOM was modified. To achieve this, I initially used the $viewContentLoaded event in my controller. $scope.$on('$viewContentLoaded', function(){ // ...

javascriptjqueryangularjsangularjs-scope

How should one properly utilize the $stateProvider in AngularJS?

I am relatively new to Angular and currently exploring the correct usage of $stateProvider in my project. Below is my current setup: $stateProvider .state('users_orders', { url: '/users/:userId/orders', templ ...

angularjsangular-ui-router