如何在Angular项目中引入使用购买的PrimeNG Paradise模板

• 前置版本校验：先打开解压后Paradise模板根目录的package.json，确认本地Node.js、Angular CLI版本和文件里标注的兼容版本完全一致，PrimeNG付费模板对框架大版本匹配要求极高，用跑免费版PrimeNG的其他版本环境直接对接大概率出兼容报错。
• 模板可用性预校验：进入解压后的模板根目录，执行npm install安装依赖后跑ng serve，确认模板本身能正常启动、默认首页渲染无报错，先排除压缩包损坏、文件缺失的问题，确认模板包没问题再往下操作。
• 空项目初始化：执行ng new新建项目时，不要开启严格模式、不要选择SSR/SSG预渲染选项，Paradise默认基于普通客户端渲染Angular项目开发，额外开启这些特性会触发大量编译报错，项目新建完成后直接终止本地服务，不要提前写入任何业务代码。
• 核心文件迁移（和Apollo模板结构差异较大，不要照搬Apollo教程路径）：
  • 将模板src/assets目录整体覆盖到空项目的src/assets路径下，该目录存放Paradise的自定义主题、图标、布局配置文件，缺失会直接导致样式全崩、布局功能失效。
  • 用模板src目录下的styles.scss（CSS版本对应styles.css）直接替换空项目的同名全局样式文件，不要手动修改文件内的主题引入路径，模板已经预配置好Paradise专属主题的引用关系。
  • 将模板src/app路径下的layout、shared两个文件夹完整复制到空项目的src/app目录下，这两个文件夹包含Paradise的侧边栏、顶栏、布局容器、公共封装组件，是和Apollo模板目录结构差异最大的部分，不要按Apollo的模块命名找对应文件。
  • 打开模板src/app下的app.config.ts（Angular 14及更早版本为app.module.ts），将文件内引入的PrimeNG功能模块、布局模块、全局服务提供者（Provider）配置完整复制到空项目的对应配置文件中，不要遗漏provideAnimations()、PrimeNG全局配置项，缺失会导致组件不渲染、动画报错。
  • 打开模板根目录的angular.json，复制build配置下styles、scripts数组内的所有引用项，粘贴到空项目angular.json对应build配置的styles、scripts数组中，注意对齐空项目的实际文件路径，不要直接覆盖整个angular.json文件，避免丢失本地项目的构建配置。
• 依赖安装与启动验证：
  • 对照模板package.json里的dependencies字段，在空项目中安装对应版本的PrimeNG、PrimeIcons等依赖，不要自行安装最新版依赖，避免出现样式、API不兼容问题。
  • 执行ng serve启动项目，正常情况下会直接渲染Paradise默认布局首页，如果出现模块找不到报错，优先检查文件是否漏拷、配置文件内的引入路径是否正确。
  • 后续开发时，布局参数直接修改src/assets/layout下的配置文件即可，不需要改动布局组件源码，业务页面新建后在菜单配置文件中添加对应路由，即可挂载到模板的导航菜单中。

注意：不要直接在解压出来的模板源码上改业务代码，模板压缩包自带大量演示页面、示例资源，直接用做开发基底会导致最终打包产物体积冗余，按上述步骤迁移核心资源到空项目后再清理示例代码，项目结构会更干净。

内容的提问来源于stack exchange，提问作者WPilz