Question

我正在安装PrimeNG以正确使用其富文本编辑器时遇到一些麻烦。我已经安装了我需要的所有东西，但它仍然无法正常工作。

这是我的package.json：

    {
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.1",
    "@angular/upgrade": "2.0.0-rc.1",
    "angular2-in-memory-web-api": "0.0.11",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.0",
    "lodash": "^4.15.0",
    "ng2-dropdown": "0.0.12",
    "primeng": "^1.0.0-beta.13",
    "primeui": "^4.1.15",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  }
}

我的typings.json：

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  },
  "dependencies": {
    "lodash": "registry:npm/lodash#4.0.0+20160723033700"
  }
}

我的index.html：

<!DOCTYPE html>
<html>
<head>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <title>My page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">



    <link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
    <link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />

  <link rel="stylesheet" href="/assets/css/styles.css">
  <!-- Polyfill(s) for older browsers -->
    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
    <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
    <script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>

    <script src="node_modules/primeui/primeui-ng-all.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('./app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app> 
  </body>
</html>

所以我在我{EditorModule, SharedModule}的{{1}}以及我希望看到此内容的组件中调用了directives;

app.components.ts

我在这个论坛的每个地方搜索，但无法弄清楚如何解决这个问题。有人可以建议吗？谢谢！

Answer 1

我在运行日历等方面遇到了很多麻烦。我终于通过查看演示示例index.html并确保我加载了所有加载的脚本来解决它。对primeUI和jquery等有依赖关系。有很多：

<link id="themeStyleSheet" rel="stylesheet" type="text/css" href="vendor/primeui/themes/pepper-grinder/theme.css" />
  <link rel="stylesheet" type="text/css" href="vendor/primeui/primeui-ng-all.min.css" />
  <link rel="stylesheet" href="../app/app.css">

  <!-- 1. Load libraries -->
  <!-- Polyfill(s) for older browsers -->
  <script src="vendor/core-js/client/shim.min.js"></script>
  <script src="vendor/zone.js/dist/zone.js"></script>
  <script src="vendor/reflect-metadata/Reflect.js"></script>
  <script src="vendor/systemjs/dist/system.src.js"></script>

  <!-- sweet alert -->
  <script src="vendor/ng2-sweetalert2/node_modules/sweetalert2/dist/sweetalert2.min.js"></script>

  <!-- Datetimepicker, Slider, Schedule -->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.min.js"></script>

  <!-- CodeHighligther -->
  <script src="../app/resources/js/prism.js" data-manual></script>

  <!-- Charts.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>

  <!-- Schedule -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.2/fullcalendar.min.js"></script>

  <!-- InputMask -->
  <script src="../app/resources/js/jquery.inputmask.bundle.js"></script>

我怎么能让PrimeNG工作

1 个答案: