Angular2：PrimeNG - XHR错误（未找到404）

时间：2016-07-10 12:57:37

标签： angularjs typescript xmlhttprequest http-status-code-404 primeng

我想使用PrimeNG-Module的Dialog，但我总是得到错误：

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。

系统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 });

角-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'
    ]
  });
};

位置-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"
  }
}

3 个答案:

答案 0 :(得分：1)

我已降级为Angular2 RC3，现在可行了。 我不得不将system-config.ts中的'node_modules / primeng'更改为'vendor / primeng'。 然后我在angular-cli-build.js中添加primeng文件，然后使用“ng build”重建项目。

<强>系统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 });

<强>角-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"
  }
}

答案 1 :(得分：1)

尝试一次。

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));

答案 2 :(得分：0)

Basically follow the examples on how to install 3rd party libraries

  1. 通过npm
    2. 安装包
  2. OPTIONAL！安装库的类型
  3. 将包添加到angular-cli-build.js文件到vendorNpmFiles数组（非常重要）。它告诉在哪里找到将转到 dist 文件夹中 vendor 文件夹的文件。
  4. 配置 SystemJS映射以了解查找包的位置（其中所有文件都位于 dist 文件夹中）。
相关问题
最新问题