asp.net核心，角2，PrimeNG

我使用aspnetcore-spa template作爲創建管理面板的起點。接下來我添加PrimeNG庫來使用它的組件。asp.net核心，角2，PrimeNG

不幸的是，當我將ButtonModule導入到app.module.ts並刷新時，出現錯誤'Event is undefined'。我無法弄清楚幾天的原因，所以任何人都可以幫助我？

UPDATE

所以首先我生成存根yo aspnetcore-spa
下一頁npm install font-awesome primeng --save

然後，添加字體真棒，PrimeNG CSS文件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' 
]

重建供應商依賴ncies webpack --config webpack.config.vendor.js
於是我進口ButtonModule到app.module.ts

現在，如果我啓動應用程序，我會得到異常

異常點的代碼將該片段

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

UPDATE 2

我發現問題出在服務器端渲染，所以我刪除了它。它適用於我，但如何在不轉向服務器端渲染的情況下解決這個問題仍然很有趣。

來源

2016-11-04 Eugen Kotov

你能描述一下你採取的步驟嗎？使用angular-cli對我來說工作正常。 –

@KlasMellbourn我更新了所有我已經做過的步驟。 –

在你的tsconfig中，你禁用了'lib.d.ts'嗎？ – harishr

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

 
<app>Loading...</app>

你需要禁用前從服務器端渲染，從index.cshtml。

變化

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

到

<app>Loading...</app>

來源

2017-01-25 02:51:05

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

有與服務器端渲染的限制。值得注意的是，你的應用程序代碼不能假設它總是在瀏覽器中運行。如果您嘗試直接引用瀏覽器的DOM，則會在運行服務器端時出現類似窗口的錯誤。幸運的是，這很少是一個問題，因爲在架構良好的Angular應用程序（或React等）中，框架實際上並不希望您直接混淆DOM，所以不應該假設瀏覽器基元不管服務器邊渲染。

在primeng JavaScript文件Lookimng，一些控制操作DOM樹

我現在用的是相同的模板，你，如果你做到以下幾點，你可以保持

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

答案是不是做

import { AccordionModule } from 'primeng/primeng';

，做

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

AccordionModule取決於BlockUI如果你打開accordion.d.ts，所以我們必須將其導入以及

這對我的作品不刪除預渲染

然後去web.config.vendor .js文件，修改

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

到

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 } } 
    ] 
},

也web.co nfig.vendor.js，供應商部分，添加

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

然後打開Visual Studio命令提示，並導航到溶液路徑

webpack --config web.config.vendor.js

然而，也有一些這將仍然引發錯誤控制在這種情況下，別無選擇，只能修改js文件

來源

2017-02-19 08:28:56

我找到了一個解決方案，並得到它在我的寵物項目上的工作。

只需按照以下步驟（我跳過安裝，因爲你已經這樣做了）：

添加裝載機gif文件，因爲它們是在相關css文件要求：

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

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。

來源

2017-02-19 11:06:27 Yaser

asp.net核心，角2，PrimeNG

回答

相關問題