asp.netコア、角2、PrimeNG

Question

私はaspnetcore-spa templateを開始点として管理パネルを作成します。 次に、そのコンポーネントを使用するためにPrimeNGライブラリを追加します。

残念ながら、ButtonModuleをapp.module.tsにインポートして更新すると、「イベントは未定義です」というエラーが表示されます。私は数日の理由は何かを理解できないので誰でも私を助けることができますか？私はyo aspnetcore-spa

でスタブを生成するすべてのだから、最初

UPDATE

• 次npm install font-awesome primeng --save

• それから私はwebpack.config.vendor.js

  vendor: [ 
      '@angular/common', 
      '@angular/compiler', 
      '@angular/core', 
      '@angular/http', 
      '@angular/platform-browser', 
      '@angular/platform-browser-dynamic', 
      '@angular/router', 
      '@angular/platform-server', 
      'angular2-universal', 
      'angular2-universal-polyfills', 
      'bootstrap', 
      'bootstrap/dist/css/bootstrap.css', 
      'es6-shim', 
      'es6-promise', 
      'event-source-polyfill', 
      'jquery', 
      'zone.js',    
      'font-awesome/css/font-awesome.css', 
      'primeng/resources/themes/sunny/theme.css', 
      'primeng/resources/primeng.css' 
  ] 
  

にフォント素晴らしいとPrimeNG CSSファイルを追加

• ベンダーdependeのリビルド私はアプリを起動した場合ncies webpack --config webpack.config.vendor.js

• は、その後、私は今

をapp.module.tsするButtonModuleをインポートする私は、コード

__decorate([ 
    core_1.HostListener('mouseenter', ['$event']), 
    __metadata('design:type', Function), 
    __metadata('design:paramtypes', [Event]), 
    __metadata('design:returntype', void 0) 

のこのフラグメントに例外

例外ポイントを取得します

更新2

問題はサーバーサイドのレンダリングであることがわかったため、削除しました。それは私にとってはうまくいくが、サーバーサイドレンダリングを使わなくてもこれを解決する方法はまだ興味深い。

Answer 1

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app> 
 

 
<app>Loading...</app>

あなたは、事前index.cshtmlから、サーバー側からのレンダリングを無効にする必要があります。

<app>Loading...</app> 

Answer 2

へ

変更

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app> 

http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

によると、サーバー側のレンダリングとの制限があります。特に、アプリケーションコードは、常にブラウザで実行されると想定できるだけではありません。ブラウザーのDOMを直接参照しようとすると、サーバー側で実行されているときにwindowが未定義になるなどのエラーが発生します。うまく設計されたAngularアプリケーション（またはReactなど）では、フレームワークは実際にはDOMを直接混乱させたくないため、幸い、問題はほとんどありません。したがって、サーバーに関係なくブラウザプリミティブを想定するべきではありませんサイドレンダリング。primeng内のJavaScriptファイルでLookimng

、一部のコントロールでは、次の操作を行う場合は、あなたが

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app> 

を保つことができるよう

私は同じテンプレートを使用していますDOMツリーを操作しています答えはやる代わりに

import { AccordionModule } from 'primeng/primeng'; 

を行うための、ある

あなたが開いaccordion.d.ts場合

import { AccordionModule } from 'primeng/components/accordion/accordion'; 
import { BlockUIModule } from 'primeng/components/blockui/blockui'; 

AccordionModuleはBlockUIに依存しているので、我々としても、それをインポートする必要が

それはweb.config.vendorに行く

その後、事前レンダリングを削除せずに私の作品

.js、web.coにも

module: { 
    loaders: [ 
     { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, 
     { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }, 
     { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } } 
    ] 
}, 

に

module: { 
    loaders: [ 
     { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, 
     { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) } 
    ] 
}, 

を変更nfig.vendor.js、ベンダー・セクション、そして、Visual Studioコマンドプロンプトを開き、ソリューションのパス

webpack --config web.config.vendor.js 

に移動

'font-awesome/css/font-awesome.min.css', 
     'primeng/resources/primeng.min.css', 
     'primeng/resources/themes/bootstrap/theme.css', 

を追加しかし、まだエラーがスローされますいくつかのコントロールがあります この場合、jsファイルを変更する以外の方法はありません

Answer 3

私は解決策を見つけ出し、自分のペットプロジェクトに取り組んでいます。

ちょうど（あなたがすでにあることをやったので、私はインストールをスキップ）次の手順を実行します。

loaders: [ 
    ... 
    { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } } 
] 

：彼らは、関連 cssファイルで必要とされているので

の1-はgifファイル用のローダーを追加します。

2 -は、あなたのwebpack.config.vendor.jsにスタイルを追加します。

vendor: [ 
    ... 
    'font-awesome/css/font-awesome.css', 
    'primeng/resources/themes/lightness/theme.css', 
    'primeng/resources/primeng.css' 
] 

、3-app.module.tsのトップにしたいモジュールを追加：

import { AccordionModule } from 'primeng/components/accordion/accordion'; 
import { BlockUIModule } from 'primeng/components/blockui/blockui'; 

、4-は同様にあなたのimportsにそれを追加します。

imports: [ 
    UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. 
    RouterModule.forRoot([ 
     { path: '', redirectTo: 'home', pathMatch: 'full' }, 
     { path: 'home', component: HomeComponent }, 
     { path: 'counter', component: CounterComponent }, 
     { path: 'fetch-data', component: FetchDataComponent }, 
     { path: '**', redirectTo: 'home' } 
    ]), 
    AccordionModule 
] 

出来上がり...

を

作業コードhereがあります。