asp.net核心，角2，PrimeNG

我使用aspnetcore-spa template作为创建管理面板的起点。接下来我添加PrimeNG库来使用它的组件。asp.net核心，角2，PrimeNG

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

UPDATE

所以首先我生成存根yo aspnetcore-spa
下一页npm install font-awesome primeng --save

然后，添加字体真棒，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' 
]

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

UPDATE 2

我发现问题出在服务器端渲染，所以我删除了它。它适用于我，但如何在不转向服务器端渲染的情况下解决这个问题仍然很有趣。

来源

2016-11-04 Eugen Kotov

你能描述一下你采取的步骤吗？使用angular-cli对我来说工作正常。 –

@KlasMellbourn我更新了所有我已经做过的步骤。 –

在你的tsconfig中，你禁用了'lib.d.ts'吗？ – harishr

<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-25 02:51:05

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

有与服务器端渲染的限制。值得注意的是，你的应用程序代码不能假设它总是在浏览器中运行。如果您尝试直接引用浏览器的DOM，则会在运行服务器端时出现类似窗口的错误。幸运的是，这很少是一个问题，因为在架构良好的Angular应用程序（或React等）中，框架实际上并不希望您直接混淆DOM，所以不应该假设浏览器基元不管服务器边渲染。

在primeng JavaScript文件Lookimng，一些控制操作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',

然后打开Visual Studio命令提示，并导航到溶液路径

webpack --config web.config.vendor.js

然而，也有一些这将仍然引发错误控制在这种情况下，别无选择，只能修改js文件

来源

2017-02-19 08:28:56

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

只需按照以下步骤（我跳过安装，因为你已经这样做了）：

添加装载机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。

来源

2017-02-19 11:06:27 Yaser

asp.net核心，角2，PrimeNG

回答

相关问题