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
我发现问题出在服务器端渲染,所以我删除了它。它适用于我,但如何在不转向服务器端渲染的情况下解决这个问题仍然很有趣。
<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>
根据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文件
我找到了一个解决方案,并得到它在我的宠物项目上的工作。
只需按照以下步骤(我跳过安装,因为你已经这样做了):
添加装载机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。
你能描述一下你采取的步骤吗?使用angular-cli对我来说工作正常。 –
@KlasMellbourn我更新了所有我已经做过的步骤。 –
在你的tsconfig中,你禁用了'lib.d.ts'吗? – harishr