未加载primeng样式的Ionic 2
是指在Ionic 2应用中未正确加载primeng样式的情况。primeng是一个基于Angular的UI组件库，提供了丰富的可重用组件，用于构建现代化的Web应用程序。
解决未加载primeng样式的问题，可以按照以下步骤进行操作：
- 确保已正确安装primeng库：在项目根目录下执行以下命令安装primeng和其依赖库：
npm install primeng --save
npm install primeicons --save
- 在项目的
angular.json文件中添加primeng样式文件的引用。找到styles数组，并添加以下内容：
"styles": [
"node_modules/primeng/resources/themes/nova-light/theme.css", "node_modules/primeng/resources/primeng.min.css", "src/styles.css"]
这样可以确保primeng的样式文件被正确加载。
- 重新启动Ionic 2应用：在命令行中执行以下命令重新启动应用：
ionic serve
这样应用将会重新编译并加载primeng的样式。
未加载primeng样式可能会导致应用中的primeng组件无法正常显示样式，解决该问题可以确保primeng样式文件被正确引用和加载。
对于Ionic 2应用中的其他问题，可以参考Ionic官方文档和社区资源进行解决。腾讯云提供了云计算相关的产品和服务，可以通过腾讯云官方网站获取更多信息和文档：
- 腾讯云官方网站：https://cloud.tencent.com/
- 腾讯云产品介绍：https://cloud.tencent.com/product
- 腾讯云文档中心：https://cloud.tencent.com/document/product
请注意，以上答案仅供参考，具体解决方法可能因个人环境和需求而异。
相关·内容
3回答
我想在Ionic 4应用程序中使用PrimeNG组件。我进行了如下工作。我创建了一个空白的Ionic 4应用程序：
ionic start myApp blank
接下来，我将下载PrimeNG到该项目：
npm install primeng@7.0.0 --save
npm install primeicons@1.0.0 --save
接下来，我将第一个PrimeNG UI组件(ButtonModule)导入为app.module.ts中的模块：
import { NgModule } from '@angular/core';
import { Browser
浏览 2提问于2019-03-07得票数 1
回答已采纳
1回答
只是想知道当使用一个主要的NG主题，例如“Omega”.角cli配置中样式表的正确排序是什么。在主要的ng文档中列出了以下内容：
<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css
浏览 1提问于2017-10-11得票数 2
回答已采纳
我正在尝试在我的Angualr4应用程序中使用PrimeNG Treeview控件(项目是使用Visual Studio2017 .Net核心2.0和Angular模板创建的)。当尝试加载所需的css依赖项时，我得到404错误。Node_modules are和PrimeNG都安装好了，文件位置也很准确，我甚至试着把同样的文件复制到本地文件夹(不是从Font )，但还是没有成功。
<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" />
浏览 1提问于2017-10-26得票数 0
1回答
我可以获取<button pButton type="button" class="ui-button-danger"></button>，但它不会对其进行样式设置。我已经在我的index.html中链接了primeng.min.css。但我假设我的.angular-cli.json文件有问题，因为样式部分是空的。
编辑:控制台错误说:无法加载资源:服务器在<link rel="stylesheet" type="text/css" href="/node_modules/primeng/re
浏览 0提问于2017-09-15得票数 4
1回答
我使用的是PrimeNG TabView，我启用了选项卡内容内的垂直滚动，问题是当我更改选项卡时，内容的水平位置与前一个相同。我只使用JS/TS，CSS，HTML，PrimeNG选项卡和Ionic框架。
我希望新选择的选项卡的内容处于初始状态，“展开”。
浏览 18提问于2022-11-16得票数 0
我遇到了一个小问题，我定义我的组件如下：
@Component({
selector: 'documents',
styleUrls: ['./documents.scss', '../../../../node_modules/primeng/resources/primeng.min.css', '../../../../node_modules/primeng/resources/themes/omega/theme.css', '../../../../node_modules/font-aweso
浏览 0提问于2017-07-20得票数 1
回答已采纳
(角度尚不成熟，需要帮助.)
问题
我正在使用最新的，截至2018年2月，角5.2.1和它的CLI 1.7.0。
如果我试图在我的项目中包括PrimeNg，我会失败( webpack，我想)：
与此类似的错误：
ERROR in ........ CssSyntaxError: <my_path>/node_modules/primeng/resources/primeng.css:5542:16: Can't resolve './images/line.gif'
我是怎么犯这个错误的
首先，我安装组件：
npm install --save font
浏览 0提问于2018-02-18得票数 0
回答已采纳
我是从PrimeNG开始的，但我没有得到很酷的风格。但是，我没有看到ng服务或浏览器日志中的错误。
组件(我有一个日历和3个按钮)会出现，但是看起来很枯燥。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
im
浏览 3提问于2019-12-13得票数 0
回答已采纳
1回答
我正在使用PrimeNG日历组件。如何(如果可能)删除或更改日期选择头和日期选择器本身之间的行/分隔符的颜色？
带有PrimeNG日历的基本Stackblitz (全部包括分隔符： )
PrimeNG的github中的日历组件：
浏览 4提问于2022-11-04得票数 0
回答已采纳
1回答
我在我的项目中使用primeng组件。但是我想对paginator组件的模板做一些修改。我创建了一个新组件，它扩展了paginator组件的primeng，并在@Component中添加了新的模板。但是其他一些primeng组件使用paginator组件进行分页，就像dataview一样。这些组件是否可以使用这个新的扩展版本组件？
浏览 1提问于2018-11-26得票数 0
我想使用PrimeNG的，并试图简单地复制这个示例：
<div class="p-grid">
<div class="p-col">1</div>
<div class="p-col">2</div>
<div class="p-col">3</div>
</div>
它应该输出相邻的数字1 2 3。遗憾的是，它没有，但只是输出：
1
2
3
我可以使用PrimeNG的按钮风格。然而，我确保导入了中提到的css
浏览 0提问于2018-12-25得票数 2
回答已采纳
我正在寻找一个关于角度风格的解释。 我正在使用Angular 10和Prime-ng，我已经添加了一个自定义样式，它应该覆盖Prime-ng组件，但是当为应用程序提供测试时，样式不会覆盖它，它会将包含原始样式的标签直接放在
(1)包含要在p进度条(即高度: 10px；)上应用的css规则(在angular.json样式节点上注入)。
(2) Primeng组件的默认样式来自Primeng库，因为我在我的一个应用程序组件上使用了这个组件：
<p-progressBar [value]="value"></p-progressBar>
浏览 12提问于2021-08-25得票数 0
我添加了一个PrimeNG确认对话框(遵循官方文档中的示例)：
component.html
<p-confirmDialog appendTo="body" #cd>
<p-footer>
<button type="button" pButton class="btn btn-primary btn-normal mr-4" label="Print or save" (click)="cd.accept()"></button>
浏览 10提问于2018-08-30得票数 0
回答已采纳
1回答
我使用primeNG (Angular2)来显示模式：
<p-dialog appendTo="body" [(visible)]="displayCreateGateway" modal]="true" [width]="700">
当我在移动视图(小于声明的700 am )模式不能正确显示。例如:我有窗口宽度500 px，但模态生成在700 px (适当的宽度:100%)。我认为这不是我的代码的错，因为在官方网站primeNG的情况是一样的。
你知道如何解决这个问题吗？最简单的方法可能是在css中添加媒体查询，但是
浏览 2提问于2017-06-30得票数 3
回答已采纳
我在angular.json样式数组中包含了一些样式，如下所示：
"styles": [
"src/styles.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/omega/theme.css",
"node_modules/primeng/resources/themes/bootst
浏览 1提问于2018-08-24得票数 9
我有一个角度应用程序，它的结构方式是将每个不同的特性构建为一个库，并与宿主应用程序集成。因此，对于休假管理，我有一个库，用于用户管理、项目管理等。现在，在开发阶段，我使用下面的命令来构建库。
ng build --project my-ng-lib-project-management --watch
这显示了以下输出
Building Angular Package
------------------------------------------------------------------------------
Building entry point 'my-ng-li
浏览 14提问于2022-07-22得票数 2
我使用的是表Primeng datatable，并且需要实现对列的过滤。 问题是我启用了ViewEncapsulation.ShadowDom，但没有为过滤器提供样式，就像根本没有css一样。但是对于表，您可以在我的历史记录中看到一些样式-changes.Component.css，我导入了样式。 @import '~bootstrap/dist/css/bootstrap.min.css';
@import '~primeng/resources/themes/saga-blue/theme.css';
@import '~primeng/resou
浏览 23提问于2021-09-09得票数 0
9回答
下面是我安装PrimeNG的步骤：
npm install primeng --save npm install primeui --save
更新Index.html：(我不得不将目录primeng和primeui从node_modules复制到资产文件夹，以消除404文件未找到的错误)
更新test.component.ts：
从‘././资产/primeng/primeng’导入{Calendar}；.导出类TestComponent { dateValue:string；}
更新test.component.html
结果:页面上没有显示任何内容。
，我
浏览 10提问于2016-07-01得票数 12
当从PrimeNG 9升级到PrimeNG X时，样式就会中断。ui-s样式被重命名为p-s。控制台中没有错误，某些组件的行为也得到了改进(例如，p-inputNumber) --所以看起来这只是一个样式问题。
样式有了很大的改进，但是如果我在样式中添加一个主题: angular.json："node_modules/primeng/resources/themes/nova/theme.css"，那么样式仍然会很糟糕。
如果有人能就如何解决这一问题提供一些指导，我将不胜感激：
逐个修正样式(这就像再次为整个应用程序创建样式一样)
等待PrimeNG社区修复一些
浏览 2提问于2020-09-16得票数 2
回答已采纳
7回答
我遵循了安装primeng的指令，运行npm install primeng --save，然后导入app.module.ts文件中所需的内容，例如：
import {CheckboxModule} from 'primeng/primeng';
...
imports: [
CheckboxModule,
],...
然后将样式表添加到index.html文件中：
<head>
...
<link rel="stylesheet" type="text/css" href="../nod
浏览 11提问于2017-02-02得票数 17
回答已采纳
1回答
我们在项目中使用了PrimeNG 5.2.x和Bootstrap 4.2.x。但是，PrimeNG组件未正确显示。当我们在文件.angular-cli.json中删除对bootstrap.min.css的引用时，PrimeNG组件可以正确显示。
有没有办法同时使用这两种方法？PrimeNG和Bootstrap是否可以共存？
谢谢
浏览 1提问于2018-05-07得票数 0
我目前正在研究一个企业角度应用程序。我正在考虑使用正确的组件库。我找到了两个选择：
1角Material2
2- PrimeNG
角质材料有大约35个高质量的部件。PrimeNg配备了大约87个不同的组件。我喜欢遵循谷歌标准的Material2设计和造型。我更喜欢它，但是稍后我们将需要更高级的组件，而这些组件是不可用的。我的问题是同时使用Material2和PrimeNg是个好主意吗？或者这会导致开销、冲突和减慢应用程序的速度？我应该只去PrimeNg吗？
浏览 1提问于2019-02-03得票数 15
回答已采纳
1回答
我目前正在开发一个使用Angular 4，Angular Material和PrimeNG组件的用户界面。
我遇到的最新组件是来自PrimeNG的MultiSelect组件：
我只是想让组件的宽度适合父组件的100%。
编辑此组件的CSS类是否需要遵循特定的流程？文档中说对内联使用"Style“--这是不是意味着：
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100
浏览 6提问于2017-08-04得票数 4
回答已采纳
我在尝试通过scss加载primeng主题时遇到了困难(最终我可以定制它)。我能够为引导做到这一点，但是primeng不起作用。webpack当前没有出现错误，其输出日志报告了发出的字体文件，但这些样式没有应用于控件。
我最初的问题是加载位于primeng\resources\themes\omega\fonts.中的字体我通过使用resolve-url-loader，、sourceMap参数(在sass-loader中)以及url和文件加载器来发出字体文件(根据我在网上找到的一些解决方案)。我还在/.(png|jpg|jpeg|gif|svg)$/测试中添加了“排除”，以确保它跳过字体目录。
浏览 1提问于2017-12-12得票数 0
回答已采纳
你好，我在我的Angular项目中使用了PrimeNg组件。根据PrimeNg文档和Angular文档，我尝试了':host ::ng-deep'，':host-context()。但是什么都不起作用。
自定义css的PrimeNg文档：
Angular文档：
请建议我为PrimeNg组件添加自定义样式的最好方法。
浏览 0提问于2021-03-25得票数 0
我用的是角13和PrimeNG 13.4.1。我想让标签直接放在文本字段的上方，所以我创建了
<div class="ui-fluid" style="padding-top: 200px; padding-bottom: 200px;">
<div class="p-field">
<span class="p-float-label">
<input type="text" formControlName="
浏览 11提问于2022-07-15得票数 0
回答已采纳
我被指派从最近离开公司的其他开发人员那里获取一些乱七八糟的代码。
我好奇地问，是否有一些Visual代码的插件或其他方法可以帮助我们快速有效地整理和组织导入和引用？
例如，可能有数百种类似的进口产品。
import { AutoCompleteModule,InputSwitchModule } from 'primeng/primeng';
import { ListboxModule } from 'primeng/primeng';
可以转换成类似的
import { AutoCompleteModule,
InputSwitchModu
浏览 4提问于2017-10-13得票数 297
回答已采纳
我已经在做一个Angular 2项目，到目前为止，GMap和Chartjs都可以工作。
但现在我遇到了一个问题，如果我包含一个Accordeon，它就不能正确地格式化。
我包括primeng和primeui通过
npm install primeng --save
npm install primeui --save
而且字体也很棒，通过
npm install font-awesome -save
这是我的angular-cli.json
"styles": [
"styles.css",
"..
浏览 13提问于2017-02-04得票数 1
1回答
我在学角。我在做一个项目。我决定从<p-calendar>添加一个primeng组件。我还安装了软件包。这些版本是：
"primeicons": "^2.0.0",
"primeng": "^5.2.7",
我的一切都很完美。见此：
但现在我只想过几个月。我想把它改成月选机。在做了一些研究之后，我才知道在primeng: ^5.2.7中只有一个月是没有选择器的。所以我升级到：
"primeicons": "^2.0.0",
"primeng": "6.1.6
浏览 1提问于2019-11-17得票数 2
1回答
我是Ionic的新手，我正在尝试创建一个教程中所示的ion-nav-view。我已经创建了2个页面，并设置了一个angular conf文件。加载时，我在浏览器中得到以下错误：XMLHttpRequest cannot load file:///C:/Users/ITAI/Development/Ionic/LaughWithMe/www/templates/register.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chro
浏览 3提问于2014-12-09得票数 1
在ionic 4中，ionic serve成功完成。当我在浏览器中打开应用程序时，我得到下面的错误，并且没有任何内容被加载。
AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Class constructor EventEmitter cannot be invoked without 'new'
at new BackButtonEmitter (platform.js:17)
at new Platform (platform.js:32)
at _createClass (core.j
浏览 5提问于2018-10-17得票数 0
我正试图将PrimeNG加载到Webpack捆绑的Angular2应用程序中。
首先，我安装了npm：
npm install primeng --save
npm install primeui --save
这在我的package.json中增加了以下两行：
+ "primeng": "^1.0.0-beta.8",
+ "primeui": "^4.1.12",
接下来，如angular2-webpack入门版中的所示，我向venders.ts添加了一个导入。
import 'script!primeui
浏览 7提问于2016-06-13得票数 3
回答已采纳
1回答
我正在研究PrimeNG组件。但是我对浏览器上的UI显示有问题。
现在，我想显示静态下拉列表。我参考了的资料。下面的代码将显示该组件。
HTML文件
<h3 class="first">Single</h3>
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City"></p-dropdown>
<p>Selected City: {{selectedCity
浏览 1提问于2017-10-03得票数 2
回答已采纳
有没有可能用PrimeNG的p- 来做一些多选？
浏览 17提问于2018-02-28得票数 2
回答已采纳
我有一个下拉列表，其中包含在特定条件下从angular函数动态加载的100+元素。 此加载需要几秒钟。没有挂起的http调用，该时间由priming组件(dropdown)用于delete和create元素(选项)。 我会尝试使用primeng v7中的新功能virtualScroll。 我的项目有angular 4.x和primeng v6。我还没有找到primeng 7的基本要求。我试图升级到项目7，但项目仍然失败。 是否有从primeng 6迁移到primeng 7的文档？或者有没有可能在primeng 6中使用virtualscroll？
浏览 22提问于2019-07-03得票数 0
2回答
我正在尝试在我的Ionic 2应用程序中加载一个简单的传单地图。不幸的是，在移动地图之前，并不是所有的瓦片都是直接加载的。
this.map = new L.Map('mainmap', {
zoomControl: false,
center: new L.LatLng(40.731253, -73.996139),
zoom: 12,
minZoom: 4,
maxZoom: 19,
layers: [this.mapService.baseMaps.OpenStreetMap],
attr
浏览 2提问于2016-08-08得票数 10
2回答
我在尝试实现PrimeNg Inputnumber元素时遇到了问题：https://www.primefaces.org/primeng/showcase/#/inputnumber 根据其文档，有两个属性可用于设置输入元素的样式，最著名的是styleClass和inputStyleClass。不幸的是，它们都不起作用，相反，它们被完全忽略了。 component.html： <p-inputNumber
inputStyleClass="form-control-inputnumber" [(ngModel)]="subwinFld.orderAdd.d
浏览 28提问于2021-10-13得票数 0
回答已采纳
2回答
我有一个基本的Ionic应用程序，并希望应用基于用户输入的三种不同的样式表之一。
该页面将使用基本样式预加载，然后用户可以选择另外两个选项，到目前为止，原始样式已经加载，我可以控制台记录变量中的更改，但页面没有更新。这是我的代码：
HTML索引：
<!DOCTYPE html>
<html ng-app="greenwichFitness" ng-controller='SettingsCtrl'>
<head>
<meta charset="utf-8">
<meta n
浏览 11提问于2015-07-21得票数 1
回答已采纳
我正在尝试将我的Ionic应用程序设置为使用Ionic Pro "Deploy“更新服务，但在实际安装更新和应用程序尝试重新加载时挂起。
我在我的Android 8.0平板电脑上安装了一个基本的应用程序，并将该应用程序的略微更新版本推送到了Ionic Pro deploy服务。我可以在Ionic Pro仪表板上看到此更新。我的应用程序可以查看更新、下载和解压。
但只要我触发"reloadApp()“函数，它就会显示一个白色屏幕，并且应用程序无法加载。在Chrome的远程设备工具中，控制台上没有出现错误。控制台显示"Ionic Native: deviceready“事件
浏览 0提问于2018-11-08得票数 0
我想在Angular 2中实现PrimeNG DataTable LazyLoading，但在互联网上找不到实时的例子。
我已经提到了下面的PrimeNG站点，它显示了使用虚拟数据的延迟加载：
是否有人通过调用BE服务来实现？请帮帮忙。
浏览 4提问于2017-08-11得票数 2
1回答
在尝试在Angular 4.1项目中使用PrimeNG时，我遇到了一些问题。
下面是我遵循的文档：
我正在测试TreeTable特性，但UI中的输出为空。它会显示没有内容的单元格，并显示“未定义”的have class=。
app.component.html：
<p-treeTable *ngIf="treeNode" [value]="treeNode">
<p-column field="id" header="ID"></p-column>
<p-column f
浏览 11提问于2017-06-23得票数 5
我在做一个Ionic 1项目，里面有一个切换开关。你知道：
<ion-toggle>hello</ion-toggle>
它看起来与iOS不同，我更喜欢iOS。我知道在Ionic 2中，我可以做到：
<ion-toggle mode="ios">hello</ion-toggle>
但这是一个Ionic 1项目，我不想把它转换成Ionic 2只是为了这个。我运气不好吗？
浏览 0提问于2018-03-31得票数 2
回答已采纳
我创建了一个新的Angular 10应用程序(也尝试了ng 8和9)： primeng-menu>ng new primeng-menu 已安装PrimeNG模块： npm install primeng --save和npm install primeicons --save package.json： "dependencies": {
"@angular/animations": "~10.1.1",
"@angular/common": "~10.1.1",
"@angular/
浏览 35提问于2020-09-16得票数 1
回答已采纳
1回答
我解压缩了一个角应用程序，并做了一个npm install，它运行得很好，后来做了ng serve，但是当我打开它的时候，我得到了下面的问题
我还安装了node-sass并清除了节点缓存，删除了node_nodules &已删除的package-lock.json并重新安装，问题仍然存在。
我正在使用primeng 8.0,boostrap5.1.1,angular8,gojs
本地开发设置信息使用
角12，节点14
angular.json
"projectType": "application",
"schematics
浏览 1提问于2021-09-26得票数 0
我用webpack让带有PrimeNG的Angular2运行。PrimeNG依赖于本身使用主题的PrimeUI，其中一个主题(主题较暗)缺少一个图像(它只适用于旧浏览器)。
但是现在，当我使用webpack加载css文件时，它告诉我“找不到模块:错误:无法解析' file‘或'directory’...
如何从外部控制css加载器或sass加载器(不确定最后由谁处理)应该忽略它？
谢谢!
浏览 4提问于2016-03-17得票数 1
1回答
当我使用命令Ionic serve时，我的项目将在浏览器中加载，并在控制台中显示以下错误。
Uncaught :无法读取属性'innerHTML‘的null(…)
加载资源失败: net::ERR_CONTENT_LENGTH_MISMATCH
net::ERR_CONTENT_LENGTH_MISMATCH
怎么修呢？
浏览 6提问于2016-11-15得票数 0
我有一个带有PrimeNg库的Angular项目，我想使用p-dropdown组件，我将其导入到app.module文件中，如下所示：
import { DropdownModule } from "primeng/dropdown";
imports: [
DropdownModule,
],
当我在html文件上使用它时：
<div class="charts-dropdown">
<p-dropdown [options]="chartsDropdownLookup" [(ngModel)]=&#
浏览 31提问于2020-05-21得票数 0
2回答
离子4选项卡图标显示不正确
、、、、
最近，我更新了角，科多瓦和离子版本，从那时起，标签图标显示部分。假设我有4个选项卡，在加载应用程序时会显示第一个和第三个图标。然后，如果我触摸一个“不可见”的图标，这意味着如果选择一个选项卡，图标就会出现。当触摸另一个选项卡时，它再次消失。显示所有的选项卡标题。
任何帮助都是非常感谢的。
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Ro
浏览 1提问于2018-11-02得票数 1
回答已采纳
在PrimeNg的帮助下，我展示了来自angular 2应用程序的表格数据。
当我单击该链接以显示该表时，它显示“未找到任何记录”，即使数据仍在加载到表中，最终在数据加载完成后，数据也会显示在表中。
我想避免显示“找不到任何记录”，而想显示“数据加载...”在数据加载时在页面上显示，然后在整个数据加载完成后显示PrimeNg DataTable。
实现这一目标的一些提示是热切期望的。
浏览 2提问于2017-10-11得票数 1
在惰性加载模式下滚动时，primeng表显示为空单元格，并且所有单元格边界都可见。但在我的应用程序中尝试时，我只能看到当前加载的单元格。只有在加载完内容后，表格才会显示整个单元格，如图所示： ? 如何做到这一点？ ? 我使用的是primeng示例中的标准p表，没什么特别的。和src\styles.css看起来像这样： <p-table [columns]="cols" [value]="virtualCars" [scrollable]="true" [rows]="20" scrollHeight="45
浏览 37提问于2019-03-25得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
