0

我是环回的新手。从 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"
 }
}

我在这里做错了什么？

提前致谢。

4

2 回答 2

0

请执行下列操作：

  • 在终端移动到根应用程序目录

  • 跑

    $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 文件。

于 2020-07-24T03:38:30.983 回答
0

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

然后，为了让 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'));;
          }
于 2021-05-20T06:41:14.617 回答