集成 Loopback 4 和 Angular 8答案

【问题标题】：Integrating Loopback 4 and Angular 8集成 Loopback 4 和 Angular 8
【发布时间】：2021-05-20 14:41:14
【问题描述】：

我是环回的新手。从 Loopback 4 开始。我正在尝试使用 Loopback4 和 Angular8 创建一个简单的“Hello world”应用程序。

在我的 application.ts 中，我将静态指令路径指向我的 Angular 应用程序 src 文件夹。

// Set up default home page
    this.static('/', path.join(__dirname, '../angular-app/src'));

所以我可以从 angular-app/src/index.html 文件中的 index.html 文件中看到正常的 HTML 内容，但它不会在<app-root> </app-root> 中绑定任何东西

我在 Loopback v3 中看到，middleware.json 用于托管客户端应用程序，如下所示：

"files": {
"loopback#static": {
"params": "$!../client"
 }
}

我在这里做错了什么？

提前致谢。

【问题讨论】：

标签： loopback loopback4 angular-loopback

【解决方案1】：

执行以下操作：

在终端移动到根应用目录
运行

$ng build
替换

this.static('/', path.join(__dirname, '../angular-app/src'));

与

this.static('/', path.join(__dirname, '../angular-app/www/index.html'));

然后测试。

我的猜测是，在将环回服务器上线之前，您并没有构建 Angular 项目。无论您在哪个端点上为 Angular 应用程序提供服务，都会发送一堆浏览器无法显示的 .ts 文件。

如果我写的路径不是那个路径，你可能想在你的项目中寻找一个在你运行构建命令之前不存在的新文件夹。里面应该有一些目录，名字奇怪的.js文件和一个index.html文件。

【讨论】：

【解决方案2】：

我已经设法让它在带有 Angular 9 的 Loopback 4 中工作。在 Angular 应用程序 ng build 之后，dist/\<app-name\> 文件夹的内容应放在 loopback public 文件夹内。

然后，为了让 Angular 路由器正常工作，所有 HTML 错误（特别是 404 Not found 错误）都应该重定向到 Angular index.html。

为此，我们必须将RestBindings.SequenceActions.REJECT 绑定到自定义提供程序。在application.ts 中只包含新的绑定

this.bind(RestBindings.SequenceActions.REJECT).toInjectable(AngularRejectProvider);

AngularRejectProvider 可以取自 @loopback/rest/src/providers/reject.provider.ts 中的默认拒绝提供程序：

// Copyright IBM Corp. 2018,2020. All Rights Reserved.
// Node module: @loopback/rest
// This file is licensed under the MIT License.
// License text available at https://opensource.org/licenses/MIT

import {BindingScope, inject, injectable} from '@loopback/core';
import {HttpError} from 'http-errors';
import {ErrorWriterOptions, writeErrorToResponse} from 'strong-error-handler';
import {RestBindings} from '@loopback/rest';
import {HandlerContext, LogError, Reject} from '@loopback/rest';
// @ts-ignore
var accepts = require('accepts')
import path from 'path';

// TODO(bajtos) Make this mapping configurable at RestServer level,
// allow apps and extensions to contribute additional mappings.
const codeToStatusCodeMap: {[key: string]: number} = {
  ENTITY_NOT_FOUND: 404,
};

@injectable({scope: BindingScope.SINGLETON})
export class AngularRejectProvider {
  static value(
    @inject(RestBindings.SequenceActions.LOG_ERROR)
    logError: LogError,
    @inject(RestBindings.ERROR_WRITER_OPTIONS, {optional: true})
    errorWriterOptions?: ErrorWriterOptions,
  ): Reject {
    const reject: Reject = ({request, response}: HandlerContext, error) => {

      // ADD THIS
      const resolvedContentType = accepts(request).types([
        'text/html', 'html',
      ]);
      switch(resolvedContentType) {
        case 'text/html':
        case 'html':
          return response.sendFile(path.join(__dirname, '../../public/index.html'));;
      }
      // END ADD THIS

      const err = <HttpError>error;

      if (!err.status && !err.statusCode && err.code) {
        const customStatus = codeToStatusCodeMap[err.code];
        if (customStatus) {
          err.statusCode = customStatus;
        }
      }

      const statusCode = err.statusCode || err.status || 500;
      writeErrorToResponse(err, request, response, errorWriterOptions);
      logError(error, statusCode, request);
    };
    return reject;
  }
}

新部分如下，它基本上将所有 HTML 错误重定向到 Angular：

const resolvedContentType = accepts(request).types([
            'text/html', 'html',
          ]);
          switch(resolvedContentType) {
            case 'text/html':
            case 'html':
              return response.sendFile(path.join(__dirname, '../../public/index.html'));;
          }

【讨论】：