Question

我已经做了三天的角度，最后得到了一个登录页面仪表板并运行了一个web api解决方案，效果很好，所以我的下面的问题很可能是我的愚蠢，请耐心等待。

我无法加载PrimeNG DataTableModule来处理我的组件，我搜索关于我的错误的类似帖子，我收集的是以下错误可能有两个原因：无法绑定到＆＃39 ;值＆＃39;因为它不是'p-dataTable＆＃39;的已知属性。

可能有两个原因： 1）模块未在app.module.ts中定义。 2）或财产不存在。

我的第一个问题：为什么我的解决方案让我的app.module.ts吐出三个ts文件[app.module.client.ts,app.module.server.ts和一个应用程序.module.shared.ts]？

我的第二个问题将DataTableModule添加到app.module.client.ts时出现此错误：无法绑定到＆＃39; value＆＃39;因为它不是'p-dataTable＆＃39;的已知属性。将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' }
        ]),
    ]
};

我正在尝试实现datagrid的页面 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

中定义的模块的错误消息

异常：调用节点模块失败，错误：错误：模板解析错误：无法绑定到＆＃39;值＆＃39;因为它不是一个已知的财产＆p; p-dataTable＆＃39;。 1.如果＆p-dataTable＆＃39;是一个Angular组件，它具有“价值”和＃39;输入，然后验证它是否是该模块的一部分。 2.如果＆p-dataTable＆＃39;是一个Web组件，然后添加＆＃39; CUSTOM_ELEMENTS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;这个组件压制此消息。

在app.module.server.ts或app.module.shared.ts中定义的模块上出现错误消息

异常：调用节点模块失败并显示错误：预渲染失败因为错误：ReferenceError：未定义事件主server.js：50676：38）

Answer 1

您是否尝试将DataTableModule和SharedModule导入添加到sharedConfig NgModule中？

我不熟悉三个拆分的app.module文件，因此我无法对此发表评论。

这是旁白，但正如PrimeNG所说，如果你使用这样的导入语句：

import {AccordionModule} from 'primeng/primeng';

然后它导入所有可能不是你想要的组件。在这里看到他们的评论： https://www.primefaces.org/primeng/#/setup

Answer 2

所以问题是服务器端预渲染没有找到工具集的依赖关系，因此解决方案是改变app.module.shared.ts中的导入模块部分，仅使用：

import { DataTableModule, SharedModule } from 'primeng/primeng';

到

import { DataTableModule } from 'primeng/components/datatable/datatable';
import { BlockUIModule } from 'primeng/components/blockui/blockui';

所以现在工具集在服务器端也有一个完整路径，我仍然可以在服务器上使用预呈现。

归功于这篇文章：asp.net core, angular 2, PrimeNG

Angular2将PrimeNG添加到未定义的解决方案标记

2 个答案: