Angular2 将 PrimeNG 添加到我未定义的解决方案标签
Angular2 adding PrimeNG to my solution tag not defined
我已经 angular 三天了,终于建立了登录页面仪表板和 运行 网络 api 解决方案并且效果很好,所以我的以下问题最多可能是我的愚蠢,请多多包涵。
我无法加载 PrimeNG DataTableModule 来处理我的组件,我搜索类似 post 关于我的错误,我收集到的是以下错误可能有两个原因:无法绑定到 'value',因为它不是 'p-dataTable' 的已知 属性。
可能有两个原因:
1) app.module.ts 中没有定义模块。
2) 或 属性 不存在。
我的第一个问题:为什么我的解决方案将我的 app.module.ts 吐成三个 ts 文件 [app.module.client.ts、app.module.server.ts 和一个app.module.shared.ts] ?
我的第二个问题 将 DataTableModule 添加到 app.module.client.ts 时出现此错误:无法绑定到 'value',因为它不是已知 属性 个 'p-dataTable'。
将 DataTableModule 添加到共享或服务器模块文件时,我得到:预呈现因错误而失败:ReferenceError:事件未定义
我做错了什么?
这是我的代码:
app.module.client.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { sharedConfig } from './app.module.shared';
import { AuthManager } from './auth/auth.manager';
import { UserIdentity } from './auth/user.identity';
import { UserService } from './services/user.service';
import { DataTableModule, SharedModule } from 'primeng/primeng';
@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
DataTableModule,
SharedModule,
BrowserModule,
FormsModule,
...sharedConfig.imports,
],
providers: [
{ provide: 'ORIGIN_URL', useValue: location.origin },
AuthManager,
UserIdentity,
UserService
],
})
export class AppModule {
}
app.module.server.ts
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { FormsModule } from '@angular/forms';
import { sharedConfig } from './app.module.shared';
import { AuthManager } from './auth/auth.manager';
import { UserIdentity } from './auth/user.identity';
import { UserService } from './services/user.service';
@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
ServerModule,
FormsModule,
...sharedConfig.imports
],
providers: [ AuthManager,
UserIdentity,
UserService]
})
export class AppModule {
}
app.module.shared.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { DashboardComponent } from './components/dashboad/dashboad.component';
import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { LoginComponent } from './components/login/login.component';
import { AdminComponent } from './components/admin/admin.component';
import { SettingComponent } from './components/admin/settings/setting.component';
import { UserComponent } from './components/admin/users/user.component';
import { AuthManager } from './auth/auth.manager';
export const sharedConfig: NgModule = {
bootstrap: [AppComponent],
declarations: [
DashboardComponent,
AdminComponent,
UserComponent,
SettingComponent,
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
LoginComponent,
HomeComponent,
],
imports: [
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{
path: 'dashboard', component: DashboardComponent, children: [
{ path: 'home', component: HomeComponent, canActivate: [AuthManager] },
{ path: 'admin', component: AdminComponent, canActivate: [AuthManager], children: [
{ path: 'users', component: UserComponent, canActivate: [AuthManager] },
{ path: 'settings', component: SettingComponent, canActivate: [AuthManager] },
]},
{ path: 'fetch-data', component: FetchDataComponent, canActivate: [AuthManager] },
]
},
{ path: '**', redirectTo: 'home' }
]),
]
};
我正在尝试实现数据网格的页面
user.component.html
<p-dataTable [value]="users">
<p-column field="Email" header="Email"></p-column>
<p-column field="Name" header="Name"></p-column>
<p-column field="Surname" header="Surname"></p-column>
<p-column field="Cellphone" header="Cellphone"></p-column>
<p-column field="Telephone" header="Telephone"></p-column>
</p-dataTable>
user.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService, UserViewModel } from '../../../services/user.service';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import { DataTableModule, SharedModule } from 'primeng/primeng';
@Component({
selector: 'user',
templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {
users: UserViewModel[];
constructor(private userService: UserService) {
}
ngOnInit() {
this.userService.getUsers().subscribe(users => {
this.users = users;
});
}
}
app.module.client.ts
中定义的模块出现错误消息
Exception: Call to Node module failed with error: Error: Template
parse errors: Can't bind to 'value' since it isn't a known property
of 'p-dataTable'.
1. If 'p-dataTable' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'p-dataTable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component
to suppress this message.
app.module.server.ts 或 app.module.shared.ts
中定义的模块出现错误消息
Exception: Call to Node module failed with error: Prerendering failed
because of error: ReferenceError: Event is not defined
main-server.js:50676:38)
您是否尝试过将 DataTableModule 和 SharedModule 导入添加到 sharedConfig NgModule 中?
我不熟悉这三个拆分 app.module 文件,所以我无法对此发表评论。
这是题外话,但正如 PrimeNG 所说,如果您使用这样的导入语句:
import {AccordionModule} from 'primeng/primeng';
然后它会导入所有可能不是您想要的组件。在这里查看他们对此的评论:
https://www.primefaces.org/primeng/#/setup
所以问题是服务器端预渲染找不到工具集的依赖项,所以解决方案是将 app.module.shared.ts 中的导入模块部分从仅使用更改为:
import { DataTableModule, SharedModule } from 'primeng/primeng';
到
import { DataTableModule } from 'primeng/components/datatable/datatable';
import { BlockUIModule } from 'primeng/components/blockui/blockui';
所以现在工具集在服务器端也有一个完整路径,我仍然可以在服务器上使用预渲染。
归功于此 post:asp.net core, angular 2, PrimeNG
我已经 angular 三天了,终于建立了登录页面仪表板和 运行 网络 api 解决方案并且效果很好,所以我的以下问题最多可能是我的愚蠢,请多多包涵。
我无法加载 PrimeNG DataTableModule 来处理我的组件,我搜索类似 post 关于我的错误,我收集到的是以下错误可能有两个原因:无法绑定到 'value',因为它不是 'p-dataTable' 的已知 属性。
可能有两个原因: 1) app.module.ts 中没有定义模块。 2) 或 属性 不存在。
我的第一个问题:为什么我的解决方案将我的 app.module.ts 吐成三个 ts 文件 [app.module.client.ts、app.module.server.ts 和一个app.module.shared.ts] ?
我的第二个问题 将 DataTableModule 添加到 app.module.client.ts 时出现此错误:无法绑定到 'value',因为它不是已知 属性 个 'p-dataTable'。 将 DataTableModule 添加到共享或服务器模块文件时,我得到:预呈现因错误而失败:ReferenceError:事件未定义 我做错了什么?
这是我的代码: app.module.client.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { sharedConfig } from './app.module.shared';
import { AuthManager } from './auth/auth.manager';
import { UserIdentity } from './auth/user.identity';
import { UserService } from './services/user.service';
import { DataTableModule, SharedModule } from 'primeng/primeng';
@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
DataTableModule,
SharedModule,
BrowserModule,
FormsModule,
...sharedConfig.imports,
],
providers: [
{ provide: 'ORIGIN_URL', useValue: location.origin },
AuthManager,
UserIdentity,
UserService
],
})
export class AppModule {
}
app.module.server.ts
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { FormsModule } from '@angular/forms';
import { sharedConfig } from './app.module.shared';
import { AuthManager } from './auth/auth.manager';
import { UserIdentity } from './auth/user.identity';
import { UserService } from './services/user.service';
@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
ServerModule,
FormsModule,
...sharedConfig.imports
],
providers: [ AuthManager,
UserIdentity,
UserService]
})
export class AppModule {
}
app.module.shared.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { DashboardComponent } from './components/dashboad/dashboad.component';
import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { LoginComponent } from './components/login/login.component';
import { AdminComponent } from './components/admin/admin.component';
import { SettingComponent } from './components/admin/settings/setting.component';
import { UserComponent } from './components/admin/users/user.component';
import { AuthManager } from './auth/auth.manager';
export const sharedConfig: NgModule = {
bootstrap: [AppComponent],
declarations: [
DashboardComponent,
AdminComponent,
UserComponent,
SettingComponent,
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
LoginComponent,
HomeComponent,
],
imports: [
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{
path: 'dashboard', component: DashboardComponent, children: [
{ path: 'home', component: HomeComponent, canActivate: [AuthManager] },
{ path: 'admin', component: AdminComponent, canActivate: [AuthManager], children: [
{ path: 'users', component: UserComponent, canActivate: [AuthManager] },
{ path: 'settings', component: SettingComponent, canActivate: [AuthManager] },
]},
{ path: 'fetch-data', component: FetchDataComponent, canActivate: [AuthManager] },
]
},
{ path: '**', redirectTo: 'home' }
]),
]
};
我正在尝试实现数据网格的页面 user.component.html
<p-dataTable [value]="users">
<p-column field="Email" header="Email"></p-column>
<p-column field="Name" header="Name"></p-column>
<p-column field="Surname" header="Surname"></p-column>
<p-column field="Cellphone" header="Cellphone"></p-column>
<p-column field="Telephone" header="Telephone"></p-column>
</p-dataTable>
user.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService, UserViewModel } from '../../../services/user.service';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import { DataTableModule, SharedModule } from 'primeng/primeng';
@Component({
selector: 'user',
templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {
users: UserViewModel[];
constructor(private userService: UserService) {
}
ngOnInit() {
this.userService.getUsers().subscribe(users => {
this.users = users;
});
}
}
app.module.client.ts
中定义的模块出现错误消息Exception: Call to Node module failed with error: Error: Template parse errors: Can't bind to 'value' since it isn't a known property of 'p-dataTable'. 1. If 'p-dataTable' is an Angular component and it has 'value' input, then verify that it is part of this module. 2. If 'p-dataTable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
app.module.server.ts 或 app.module.shared.ts
中定义的模块出现错误消息Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: Event is not defined main-server.js:50676:38)
您是否尝试过将 DataTableModule 和 SharedModule 导入添加到 sharedConfig NgModule 中?
我不熟悉这三个拆分 app.module 文件,所以我无法对此发表评论。
这是题外话,但正如 PrimeNG 所说,如果您使用这样的导入语句:
import {AccordionModule} from 'primeng/primeng';
然后它会导入所有可能不是您想要的组件。在这里查看他们对此的评论: https://www.primefaces.org/primeng/#/setup
所以问题是服务器端预渲染找不到工具集的依赖项,所以解决方案是将 app.module.shared.ts 中的导入模块部分从仅使用更改为:
import { DataTableModule, SharedModule } from 'primeng/primeng';
到
import { DataTableModule } from 'primeng/components/datatable/datatable';
import { BlockUIModule } from 'primeng/components/blockui/blockui';
所以现在工具集在服务器端也有一个完整路径,我仍然可以在服务器上使用预渲染。
归功于此 post:asp.net core, angular 2, PrimeNG