我想使用 PrimeNG-Module 中的对话框，但我总是收到错误:
Unhandled Promise rejection: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:4200/node_modules/primeng/primeng.js
我使用了 http://www.primefaces.org/primeng/#/setup 中的设置配置 但是我尝试过的一切都行不通。 我正在使用 Angular2 RC4。
系统配置.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"
}
}
最佳答案
我已经降级到 Angular2 RC3，现在可以使用了。 我不得不将 system-config.ts 中的“node_modules/primeng”更改为“vendor/primeng”。 然后我在 angular-cli-build.js 中添加 primeng 文件，然后使用“ng build”重建项目。
系统配置.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"
}
}
关于angularjs - Angular 2 : PrimeNG - XHR error (404 Not Found)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38292119/