asp.net rdzeń, kątowy 2, PrimeNG

Question

Używam aspnetcore-spa template jako punktu wyjścia do utworzenia panelu administracyjnego. Następnie dodam bibliotekę PrimeNG, aby używać jej składników.

Niestety, po zaimportowaniu, np. ButtonModule do app.module.ts i odświeżeniu, pojawia się komunikat "Event is undefined". Nie wiem, co jest przyczyną kilku dni, więc czy ktoś może mi pomóc?

UPDATE

• Więc przede wszystkim generować okrojoną z yo aspnetcore-spa
• Następny npm install font-awesome primeng --save

• Następnie dodaję font-niesamowite i plików css PrimeNG do 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' 
  ] 
  

• Odbuduj zależność od dostawcy ncies webpack --config webpack.config.vendor.js

• Potem importować ButtonModule do app.module.ts

Teraz gdybym uruchomić aplikację Wezmę wyjątkiem

punkt wyjątek od tego fragmentu kodu

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

UPDATE 2

Zorientowałem się, że problem dotyczy renderowania po stronie serwera, więc usunąłem go. Działa to dla mnie, ale wciąż jest interesujące, jak rozwiązać ten problem, bez obracania renderowania po stronie serwera.

Answer 1

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

 
<app>Loading...</app>

trzeba wyłączyć wstępne renderowanie po stronie serwera, z index.cshtml.

zmiana

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

do

<app>Loading...</app> 

Answer 2

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

Istnieją ograniczenia ze strony serwera renderingu. Warto zauważyć, że twój kod aplikacji nie może po prostu założyć, że zawsze działa w przeglądarce. Jeśli spróbujesz odwołać się bezpośrednio do DOM przeglądarki, otrzymasz komunikat o błędzie, że okno nie jest zdefiniowane, gdy działa po stronie serwera. Na szczęście to rzadko jest problem, ponieważ w dobrze zaprojektowanej aplikacji Angular (lub React itp.), Framework naprawdę nie chce, abyś bał się bezpośrednio z DOM, więc nie powinieneś zakładać prymitywów przeglądarki niezależnie od serwera - rendering po stronie zewnętrznej.

Lookimng w pliku JavaScript, primeng niektóre kontrola jest manipulowanie drzewa DOM

używam tego samego szablonu jak ty, jeśli nie następuje, można zachować

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

odpowiedź jest, zamiast robić

import { AccordionModule } from 'primeng/primeng'; 

zrobić

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

AccordionModule zależy od BlockUI jeśli otwierania accordion.d.ts, więc musimy go importować także

To działa na mnie bez wyjmowania wstępne renderowanie

następnie przejść do web.config.vendor js, modyfikować

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

do

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

również w web.co nfig.vendor.js sekcja sprzedawca, dodać

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

następnie otworzyć wiersz polecenia Visual Studio i przejdź do ścieżki rozwiązanie

webpack --config web.config.vendor.js 

Jednak istnieją pewne kontrole, które nadal będą rzucać błąd W tym przypadku nie ma innego wyjścia, jak zmodyfikować plik js

Answer 3

Dowiedziałem się o rozwiązaniu i pracowałem nad jednym z moich domowych projektów.

Wystarczy wykonać następujące kroki (I pominąć instalację, ponieważ zostało to już zrobione, że):

1- Dodaj ładowarka dla gif plików, ponieważ są one wymagane w pokrewnych css plików:

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

2- Dodaj style do webpack.config.vendor.js:

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

3- dodać moduły chcesz górze app.module.ts:

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

4- go dodać do imports także:

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 
] 

i voila ...

Możesz znaleźć działający kod here.