asp.net核心，角度2，PrimeNG

Question

我使用aspnetcore-spa template作为创建管理面板的起点。接下来我添加PrimeNG库来使用它的组件。

不幸的是，当我将ButtonModule导入到app.module.ts并刷新时，我收到错误'Event is undefined'。我无法弄清楚几天的原因是什么，所以有人可以帮助我吗？

UPDATE

• 首先，我用yo aspnetcore-spa生成存根
• 下一个npm install font-awesome primeng --save
• 然后我将font-awesome和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'
  ]

• 重建供应商依赖关系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)

更新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

我找到了一个解决方案并让它在我的宠物项目上工作。

只需按照以下步骤操作（我已跳过安装，因为您已经完成了此操作）：

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。

Answer 3

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

服务器端呈现存在限制。值得注意的是，您的应用程序代码不能仅仅假设它始终在浏览器中运行。如果你试图直接引用浏览器的DOM，那么当它运行服务器端时，你会得到一个错误，例如窗口是未定义的。幸运的是，这很少是一个问题，因为在一个架构良好的Angular应用程序（或React等）中，框架真的不希望你直接搞乱DOM，所以你不应该假设浏览器原语而不管服务器边渲染。

查看primeng中的javascript文件，一些控件正在操作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';

如果你打开accordion.d.ts，AccordionModule依赖于BlockUI，所以我们也必须导入它

它适用于我而不删除预渲染

然后转到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.config.vendor.js，vendor部分中添加

'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文件