【问题标题】:How am I supposed to make PrimeNG work我应该如何让 PrimeNG 工作
【发布时间】:2017-01-06 20:35:45
【问题描述】:

我在正确安装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>

所以我在我的app.components.ts 和我想看到的组件的directives 中调用了{EditorModule, SharedModule}

   <p-editor [style]="{'height':'320px'}">
    <header>
      <span class="ql-format-group">
        <span title="Bold" class="ql-format-button ql-bold"></span>
        <span class="ql-format-separator"></span>
        <span title="Italic" class="ql-format-button ql-italic"></span>
        <span class="ql-format-separator"></span>
        <span title="Underline" class="ql-format-button ql-underline"></span>
        <span class="ql-format-separator"></span>
        <span title="Strikethrough" class="ql-format-button ql-strike"></span>
      </span>
    </header>
  </p-editor>

我在这个论坛上到处搜索,但不知道如何解决这个问题。有人可以提出任何建议吗?谢谢!

【问题讨论】:

  • 我在运行日历等事情时遇到了很多麻烦。我终于通过查看演示示例 index.html 并确保我正在加载它们加载的所有脚本来解决它。有很多。
  • 我有他们提到的index.html 中的所有内容,我不知道为什么它仍然不起作用

标签: html json twitter-bootstrap angular typescript


【解决方案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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-06-07
    • 1970-01-01
    • 2011-06-20
    • 2017-07-04
    • 1970-01-01
    • 2022-10-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多