Piral中Angular Pilet访问PageComponentProps报错如何解决

这个问题由两个核心错误共同触发：

1. 直接报错This file should not be included anywhere. Usually, this means you've imported the Piral instance directly的根因是：你在Pilet代码中错误导入了仅允许在Piral主应用侧运行的代码，通常是直接引入了主应用构建导出的Piral实例包、或是piral-core的内部运行时入口，Piral的Pilet校验规则会直接拦截这类导入行为抛出错误。
2. 你获取页面Props的写法完全不符合piral-ng的使用规范：
   • @Input()是Angular框架中仅可用于组件、指令类的装饰器，写在AppModule（Angular模块类）上不会被Angular解析执行，完全无效。
   • app.fromNg()接收的参数是待渲染的Angular页面组件（或引导该组件的模块），你直接传入AppModule但没有在模块中声明、引导要渲染的页面组件，piral-ng无法建立正确的组件渲染上下文。
   • piral-ng传递的页面属性不会自动绑定到模块类上，只能绑定到实际渲染的页面组件实例。

1. 先清理错误导入
   排查所有代码文件的import语句，删除所有直接引入主应用实例、piral-core内部入口的代码；检查pilet的package.json，如果存在主应用包的依赖项直接删除，重新执行依赖安装。Pilet侧所有Piral相关能力优先通过setup函数传入的PiletApi调用，Angular相关的能力从piral-ng包导入即可，不要直接依赖主应用代码。
2. 修正Angular页面代码
   不要在AppModule上定义输入属性，单独拆分出页面组件接收Props，推荐直接用Angular独立组件写法，更简洁：

   // test-page.component.ts
   import { Component, Input } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { PageComponentProps } from 'piral-ng';
   
   @Component({
     selector: 'app-test-page',
     standalone: true,
     imports: [CommonModule],
     template: `<pre>{{ props | json }}</pre>`
   })
   export class TestPageComponent {
     // piral-ng会自动把页面属性绑定到名为props的输入参数上
     @Input() props: PageComponentProps<any>;
   }
   

   如果你需要在组件构造阶段就拿到Props，也可以通过piral-ng提供的DI令牌注入：

   import { Component, Inject } from '@angular/core';
   import { PAGE_PROPS, PageComponentProps } from 'piral-ng';
   
   @Component({
     selector: 'app-test-page',
     standalone: true,
     imports: [CommonModule],
     template: `<pre>{{ props | json }}</pre>`
   })
   export class TestPageComponent {
     constructor(@Inject(PAGE_PROPS) public props: PageComponentProps<any>) {
       // 这里可以直接访问主应用传递的所有配置、路由参数
     }
   }
   

3. 修正页面注册代码
   把实际的页面组件传入fromNg方法，不要直接传未声明引导组件的AppModule：

   import { TestPageComponent } from './test-page.component';
   
   export function setup(app: PiletApi) {
     app.registerPage('/test-location', app.fromNg(TestPageComponent));
   }
   

如果你需要兼容不支持独立组件的旧版Angular，只要在AppModule的declarations和bootstrap数组中加入你的页面组件，再把AppModule传入fromNg即可，注意@Input还是要写在页面组件类上，不要写在Module类上。

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