提供带有 Angular 预渲染的令牌

Question

我正在寻找一种在使用预呈现脚本预呈现应用程序时从服务器端提供令牌的方法。

我面临的问题与此有关 issue

为应用程序提供令牌不起作用。我将这些值作为空字符串提供，因为提供者期望的字符串是：(req.headers['user-agent'] 和 a string URL of the request)

 export function app(): express.Express {
      const server = express();
      const distFolder = join(process.cwd(), 'dist/web/browser');
      const indexHtml = existsSync(join(distFolder, 'index.original.html'))
        ? 'index.original.html'
        : 'index';
    
      // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
      server.engine(
        'html',
        ngExpressEngine({
          bootstrap: AppServerModule,
          providers: [
            {
              provide: UNIVERSAL_USER_AGENT,
              useValue: '',
            },
            {
              provide: UNIVERSAL_LOCATION,
              useValue: '',
            },
          ],
        })
      );
    
      server.set('view engine', 'html');
      server.set('views', distFolder);
    
      // Example Express Rest API endpoints
      // server.get('/api/**', (req, res) => { });
      // Serve static files from /browser
      server.get(
        '*.*',
        express.static(distFolder, {
          maxAge: '1y',
        })
      );
    
      // All regular routes use the Universal engine
      server.get('*', (req, res) => {
        res.render(indexHtml, {
          req,
          providers: [
            { provide: APP_BASE_HREF, useValue: req.baseUrl },
            provideLocation(req),
            provideUserAgent(req),
          ],
        });
      });
    
      return server;
    }
    
    function run(): void {
      const port = process.env['PORT'] || 4000;
    
      // Start up the Node server
      const server = app();
      server.listen(port, () => {
        console.log(`Node Express server listening on http://localhost:${port}`);
      });
    }

我也在服务器模块中提供了令牌，但它仍然没有提取它们。

@NgModule({
  imports: [AppModule, ServerModule, UniversalModule, FlexLayoutServerModule],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: UNIVERSAL_USER_AGENT,
      useValue: '',
    },
    {
      provide: UNIVERSAL_LOCATION,
      useValue: '',
    },
  ],
})
export class AppServerModule {}

有办法实现吗？我仍然对依赖注入感到困惑。正常的 SSR 工作是因为我能够使用工厂提供令牌，因为它们依赖于 req 对象。但是对于伪装者，我没有 req 对象，所以我不能使用工厂。如果有任何建议和想法，我将不胜感激

Answer 1

我用过Scully，应用预渲染，我的问题解决了。

要开始使用 Scully，您可以查看此 link。

我是如何让 install Scully 使用 Angular CLI 工作的。 add 示意图将对您的项目进行一些基本配置更改，我认为它还添加了我在下面提到的脚本。

ng add @scullyio/init

然后我在 package.json 文件中添加了脚本，如下所示

"scully": "npx scully --",
"scully:serve": "npx scully serve --"

安装 Scully 后，我只需要使用 Angular 构建脚本构建我的应用程序：ng build 和 npm run scully。这预呈现了我的应用程序，没有任何问题。

我在动态路由方面遇到了一个限制，我有一个像 /some-path/232 这样的 Angular 路由配置，而 232 在构建时是动态的和未知的，我已经规避了通过将该路由路径更改为 /some-path 并使用 queryParams 传递 route/component 所需的数据来实现此限制。希望对您有所帮助。

提供带有 Angular 预渲染的令牌

Provide token with Angular pre-render

prerender

server-side-rendering

angular-universal

angular