asp.net core, угловой 2, PrimeNG

Question

Я использую aspnetcore-spa template в качестве отправной точки для создания панели администратора. Далее я добавляю библиотеку PrimeNG, чтобы использовать ее компоненты.

К сожалению, когда я импортирую i.e. ButtonModule в app.module.ts и обновляюсь, я получаю сообщение об ошибке «Событие не определено». Я не могу понять, в чем причина нескольких дней, так может кто-нибудь мне помочь?

UPDATE

• Поэтому в первую очередь я генерировать заглушки с yo aspnetcore-spa
• Следующая npm install font-awesome primeng --save

• Затем я добавляю шрифта удивительным и CSS файлы PrimeNG в 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

Теперь, если я запустить приложение я получить за исключением

точку Exception для этого фрагмента кода

__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 asp-prerender-module="ClientApp/dist/main-server">Loading...</app> 

в

<app>Loading...</app> 

Answer 2

Согласно http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

Существует ограничение с серверным рендерингом. Примечательно, что ваш код приложения не может просто предполагать, что он всегда работает в браузере. Если вы попытаетесь напрямую ссылаться на DOM браузера, вы получите ошибку, так как окно не определено при запуске сервера. К счастью, это редко бывает проблемой, потому что в хорошо укомплектованном Angular приложении (или React и т. Д.) Структура действительно не хочет, чтобы вы все равно взаимодействовали с DOM, поэтому вы не должны принимать примитивы браузера, независимо от сервера -средняя визуализация.

Lookimng на файл JavaScript в primeng, некоторые управления манипулируют дерева 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', 

затем откройте визуальную командную строку студии, и перейти к пути решения

webpack --config web.config.vendor.js 

Однако, есть некоторые элементы управления, которые будут по-прежнему бросают ошибку В этом случае нет выбора, кроме как изменить файл js.

Answer 3

Я нашел решение и получил его работу над одним моим проектом для домашних животных.

Просто выполните следующие действия (я пропустить установку, так как вы уже сделали это):

1- Добавить загрузчик для 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.