2016-11-04 29 views
8

Ich verwende aspnetcore-spa template als Ausgangspunkt, um Admin-Panel zu erstellen. Als nächstes füge ich PrimeNG Bibliothek hinzu, um seine Komponenten zu verwenden.asp.net Kern, eckig 2, PrimeNG

Leider, wenn ich z. B. ButtonModule zu app.module.ts importieren und aktualisieren, erhalte ich eine Fehlermeldung "Event is undefined". Ich kann nicht herausfinden, was der Grund für mehrere Tage ist, kann mir also jemand helfen?

UPDATE

  • Also zunächst einmal generiere ich die Stummel mit yo aspnetcore-spa
  • Weiter npm install font-awesome primeng --save
  • Dann füge ich font-awesome und PrimeNG CSS-Dateien zu 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' 
    ] 
    
  • Rebuild Anbieter abhängig ncies webpack --config webpack.config.vendor.js

  • Dann importiere ich ButtonModule app.module.ts

Nun, wenn ich die app starten werde ich Ausnahme Error page: ReferenceError: Event is not defined

Ausnahme Punkt zu diesem Code-Fragment erhalten

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

UPDATE 2

Ich habe herausgefunden, dass das Problem im serverseitigen Rendering war, also habe ich es entfernt. Es funktioniert für mich, aber es ist immer noch interessant, wie Sie dies ohne serverseitige Rendering zu lösen.

+0

Könnten Sie die Schritte beschreiben Sie ein bisschen mehr nehmen? Mit Winkel-cli funktioniert es für mich in Ordnung. –

+0

@KlasMellbourn Ich aktualisierte Post mit allen Schritten, die ich gemacht habe. –

+0

in Ihrer tsconfig, haben Sie 'lib.d.ts' deaktiviert? – harishr

Antwort

3

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

 
<app>Loading...</app>

Sie müssen die Pre Render von der Server-Seite deaktivieren, von index.cshtml.

Änderung

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

zu

<app>Loading...</app> 
2

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

Es gibt Einschränkungen mit serverseitige Rendering. Bemerkenswerterweise kann Ihr Anwendungscode nicht einfach davon ausgehen, dass er immer in einem Browser ausgeführt wird. Wenn Sie versuchen, direkt auf das Browser-DOM zu verweisen, erhalten Sie einen Fehler wie Fenster ist nicht definiert, wenn es serverseitig ausgeführt wird. Glücklicherweise ist das selten ein Problem, da das Framework in einer gut strukturierten Angular-App (oder React, etc.) wirklich nicht will, dass Sie sich direkt mit dem DOM anfreunden, also sollten Sie keine Browser-Primitive unabhängig vom Server annehmen -Seiten-Rendering.

in der JavaScript-Datei in primeng Lookimng, eine gewisse Kontrolle manipuliert den DOM-Baum

ich die gleiche Vorlage bin mit, wie Sie, wenn Sie die folgende tun kann halten Sie die

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

die Antwort ist, statt

import { AccordionModule } from 'primeng/primeng'; 

tun tun

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

AccordionModule ist abhängig von BlockUI, wenn Sie offen accordion.d.ts, also müssen wir es

als auch importieren

Es funktioniert für mich, ohne dass die Pre-Rendering zu Entfernen

dann gehen Sie zu web.config.vendor Js, ändern

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

zu

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

auch in web.co nfig.vendor.js, Kreditoren Abschnitt fügen

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

dann Visual Studio-Eingabeaufforderung öffnen und navigieren Sie zu dem Lösungsweg

webpack --config web.config.vendor.js 

Allerdings gibt es einige Steuerelemente, die noch einen Fehler werfen in diesem Fall aber keine andere Wahl, die JS-Datei zu ändern

2

ich eine Lösung gefunden und habe es auf einem meiner Lieblingsprojekt arbeiten.

Folgen Sie einfach diesen Schritten (ich die Installation überspringen, da Sie bereits getan haben, dass):

1- den Loader für gif Dateien hinzufügen, da sie in verwandten css Dateien erforderlich sind:

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

2- Fügen Sie die Stile zu Ihrem webpack.config.vendor.js:

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

3- die Module hinzufügen, die Sie nach oben wollen der app.module.ts:

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

4- Fügen Sie es zu Ihrem imports auch:

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 
] 

Und voila ...

Sie können die Arbeits Code here finden.