Angular2: PrimeNG - XHR error (404 Not Found) - angularjs

Question

I want to use Dialog from PrimeNG-Module, but i always get the Error:
Unhandled Promise rejection: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:4200/node_modules/primeng/primeng.js
I used the setup configuration from http://www.primefaces.org/primeng/#/setup
But everything that i've tried, will not work.
I'm using 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"
}
}

Answer 1

I've downgraded to Angular2 RC3, and now it works.
I had to change 'node_modules/primeng' in system-config.ts to 'vendor/primeng'.
Then i add the primeng-files in angular-cli-build.js and then rebuilding the project with "ng build".
system-config.ts
// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
'firebase': 'vendor/firebase/firebase.js',
'angularfire2': 'vendor/angularfire2',
'primeng': 'vendor/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
// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs
/* 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',
'primeui/**/*.css'
]
});
};
package.json
{
"name": "digitaler-lerngaraten",
"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.3",
"#angular/compiler": "2.0.0-rc.3",
"#angular/core": "2.0.0-rc.3",
"#angular/forms": "0.2.0",
"#angular/http": "2.0.0-rc.3",
"#angular/platform-browser": "2.0.0-rc.3",
"#angular/platform-browser-dynamic": "2.0.0-rc.3",
"#angular/router": "3.0.0-alpha.8",
"angularfire2": "^2.0.0-beta.2",
"es6-shim": "0.35.1",
"firebase": "^3.2.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.26",
"zone.js": "0.6.12"
},
"devDependencies": {
"angular-cli": "1.0.0-beta.9",
"codelyzer": "0.0.20",
"ember-cli-inject-live-reload": "1.4.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "0.13.22",
"karma-chrome-launcher": "0.2.3",
"karma-jasmine": "0.3.8",
"protractor": "3.3.0",
"ts-node": "0.5.5",
"tslint": "3.11.0",
"typescript": "1.8.10",
"typings": "0.8.1"
}
}

Answer 2

Try it once.
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

Basically follow the examples on how to install 3rd party libraries
Install package via npm
OPTIONAL! Install typings for library
Add package to angular-cli-build.js file to vendorNpmFiles array (very important). It tells where to find the files which will go to the vendor folder inside the dist folder.
Configure SystemJS mappings to know where to look for package (where all the files will be in the dist folder).