web-dev-qa-db-ja.com

Angular 2-PrimeNgスタイルが機能しない

私はnpm install primeng --saveを実行し、次に必要なものをapp.module.tsファイルにインポートすることにより、primegingをインストールするための指示に従いました。次に例を示します。

import {CheckboxModule} from 'primeng/primeng';  

...

imports: [
    CheckboxModule,
  ],...

次に、スタイルシートをindex.htmlファイルに追加します。

<head>
  ...
    <link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/omega/theme.css" />
    <link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/primeng.min.css" />
    <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.min.css" />
</head>

私のIDEは、Ctrlキーを押しながらhref値をクリックすることで）ファイルの場所を見つけることができますが、ブラウザでは見つかりません（404エラー）。

チェックボックスの例（ http://www.primefaces.org/primeng/#/checkbox ）をコピーしてコンポーネントの1つに追加しましたが、スタイルは通常のチェックボックスと同じです。

また、他のエラーはスローされません。

スタイルを別のファイルに追加する必要がありますか？なぜ機能しないのかわかりません。

angularprimeng
10
ToDo

私は、PrimeNgとAngular CLIを使用する tutorial を見つけました。

font-awesome.min.cssスタイルシートをindex.htmlに追加しました。

次に、"../node_modules/primeng/resources/themes/omega/theme.css",セクションのangular-cli.jsonファイルに、必要なテーマ（例："styles" [...]）を追加します。

11
ToDo

の中に style.cssファイル、インポートを追加します。例：

 @import '../node_modules/primeng/resources/themes/omega/theme.css'

primeNGを正しくダウンロードすれば、今すぐ機能するはずです。

少しだけ注意：PrimeNGモジュールを正しい場所にインポートしたことを確認してください（実際には、コンポーネントではなくモジュールをインポートしています。注意してください）。

10
Smaillns

Index.htmlからrel="stylesheet" type="text/css"を削除し、styles.cssへのインポートの下に追加して、問題を解決します。

@import '~primeicons/primeicons.css';
@import '~primeng/resources/themes/nova-light/theme.css';
@import '~primeng/resources/primeng.min.css';
7
Ankita

セットアップ手順 に従って、以下を使用する必要があります。

<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" />

パスが次で始まることに注意してください：

href="/node_modules/primeng/resources/themes/omega/theme.css"

ない：

href="../node_modules/primeng/resources/themes/omega/theme.css"

お役に立てれば！ :)

4
AJT82

プロジェクト構造に何を使用しているか、cliを使用している場合は、それらをstyles.cssに追加する必要があります。全体としては、バンドルに入れる必要があります。

1
Mertcan Diken

PrimeNG 6.1.6にアップグレードしただけで、このエラーが発生しました。

今回のリリースでは、theme.scssが優先され、theme.cssの使用が中止されたようです。したがって、angular.jsonの "styles"セクションで "node_modules/primeng/resources/themes/omega/theme.scss"（ "theme.css"ではなく）を参照する必要があります。そして…

Node-sassをnpm再構築する必要があります。

1
ChicagoJohnnyVegas