集成Loopback 4和Angular 8
我是第一次使用环回。从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"
}
}我到底做错了什么？
提前谢谢。
回答 2
Stack Overflow用户
发布于 2020-07-24 11:38:31
执行以下操作：
终端中的
- 移至应用根目录
- 运行
$ng build
- 替换
this.static('/', path.join(__dirname, '../angular-app/src'));
使用
this.static('/', path.join(__dirname, '../angular-app/www/index.html'));
然后进行测试。
我的猜测是，在将环回服务器上线之前，您不会构建angular项目。无论您在哪个端点上为angular应用程序提供服务，都会发送一堆浏览器无法显示的.ts文件。
如果我写的路径不是那个，你可能想在你的项目中寻找一个新的文件夹，这个文件夹在你运行build命令之前是不存在的。里面应该有一些目录，具有奇怪名称的.js文件和一个index.html文件。
Stack Overflow用户
发布于 2021-05-20 14:41:15
我已经设法在Loopback4和Angular 9中让它工作了。在一个angular应用ng build之后，dist/\<app-name\>文件夹的内容应该放在Loopback public文件夹中。
然后，为了让angular路由器正常工作，所有的HTML错误(特别是404not found错误)都应该被重定向到angular index.html。
为此，我们必须将RestBindings.SequenceActions.REJECT绑定到自定义提供程序。在application.ts中只包含新的绑定
this.bind(RestBindings.SequenceActions.REJECT).toInjectable(AngularRejectProvider);可以从@loopback/rest/src/providers/reject.provider.ts中的默认拒绝提供程序获取AngularRejectProvider：
// 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'));;
}https://stackoverflow.com/questions/62858461
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号