Question

你知道，我花了更多的时间来设置与Angular一起工作的东西，而不是用Angular实际开发。必须有一个更简单的方式...... :(

目前，我正在使用aspnetcore-spa模板，使用命令“dotnet new angular”创建项目 - 这是版本1.0.3，它将Angular 4.1.2添加到npm依赖项中。这很适合让项目快速运行。但现在我想添加PrimeNG以利用其表单控件。我一整天都在苦苦挣扎，如果有人能提供一些帮助，我会很高兴。

以下是我目前所做的工作（最新的，每次都重新开始）：

1）添加到package.json文件：“primeng”：“4.1.0-rc.2”

2）在webpack.config.vendor.js文件的供应商集合中添加了'primeng / primeng'。

3）在我的测试模块中添加了以下内容（在app.module.shared.ts中依次引用，以便我可以通过我的RouterModule路由到它）：

import { FileUploadModule } from 'primeng/components/fileupload/fileupload';

在模块的html中，为了尝试使用文件上传器控件，我（从他们的网站 - https://www.primefaces.org/primeng/#/fileupload）：

<p-fileUpload name="myfile[]" url="./upload.php"></p-fileUpload>

4）从项目文件夹根目录的命令提示符处运行“webpack --config webpack.config.vendor.js”，该文件夹完成且没有错误。

然后我点击F5运行项目，我收到了这个错误：

Exception: Call to Node module failed with error: Error: Template parse errors:
'p-fileUpload' is not a known element:
1. If 'p-fileUpload' is an Angular component, then verify that it is part of this module.
2. If 'p-fileUpload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" type="button" (click)="onclick()" class="ui-button-info" label="Click Me">Click Me</button>-->

所以，为了遵守，我在app.module.shared.ts文件中添加了对ngprime模块的引用，就像这样（我真的不知道应该如何引用模块......）：

import { FileUploadModule } from 'primeng/primeng';

但得到了同样的错误。我错过了什么？任何帮助都将非常感激。

Answer 1

我终于有了这个工作，使用asp-prerender-module来获得服务器端渲染，而不必依赖asp-ng2-prerender-module（参见我的上一条评论）。我发现，技巧是在app.module.shared.ts文件中引用FileUploaderModule，如下所示：

import { FileUploadModule } from 'primeng/components/fileupload/fileupload';

而不是像这样：

import { FileUploadModule } from 'primeng/primeng';

重要的原因是后一种引用方法也会加载所有其他组件（请参阅此处的说明：https://www.primefaces.org/primeng/#/setup），并且某些PrimeNG组件可以不呈现在服务器上由于与DOM相关的引用（例如＆＃34; window＆＃34;，它们在服务器上不存在）。有关详情，请参阅此处的讨论：https://github.com/primefaces/primeng/issues/1341

此更改与我的答案中列出的其他步骤相结合，当然，实际上引用app.module中的指令（谢谢@pankaj！）使一切正常工作。我花了大约7个小时来搞清楚。：（

如何在aspnetcore-spa模板中使用带有Angular的PrimeNG

1 个答案: