8

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

不幸的是，当我将 ButtonModule 导入到 app.module.ts 并刷新时，我收到错误消息“事件未定义”。好几天不知道是什么原因，谁能帮帮我？

更新

  • 所以首先我生成存根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

现在，如果我启动应用程序，我会得到异常 错误页面：ReferenceError：未定义事件

指向这段代码的异常点

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

更新 2

我发现问题出在服务器端渲染中，所以我将其删除。它对我有用，但是如何在不打开服务器端渲染的情况下解决这个问题仍然很有趣。

4

3 回答 3

3 

<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-25T02:51:05.247 回答
2

根据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';

如果您打开手风琴.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，供应商部分，添加

'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-19T08:28:56.983 回答
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
]

瞧……

您可以在此处找到工作代码。

于 2017-02-19T11:06:27.910 回答