angular - 如何使用 Angular 8 和 single-spa 来更新 publicPath 以加载很棒的字体?
问题描述
我正在尝试使用 Angular更新webpack_public_path 。我正在使用 single-spa 库,但在加载 font-awesome 字体时遇到问题。
它在我们服务器的根目录 ('/') 中寻找它们,但它们实际上驻留在应用程序文件夹 ('/app1') 中。
我创建了一个文件 set-public-path.ts 并将其导入到 main.single-spa.ts 中。
设置公共路径.ts
// @ts-ignore
__webpack_public_path__ = 'https://appURL.net/app1/'
main.single-spa.ts
import './set-public-path.ts'
import { enableProdMode, NgZone } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ɵAnimationEngine as AnimationEngine } from '@angular/animations/browser';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import singleSpaAngular from 'single-spa-angular';
import { singleSpaPropsSubject } from './single-spa/single-spa-props';
if (environment.production) {
enableProdMode();
}
// @ts-ignore
console.log(__webpack_public_path__);
const domElementGetter = () => document.getElementById('application');
const lifecycles = singleSpaAngular({
bootstrapFunction: singleSpaProps => {
singleSpaPropsSubject.next(singleSpaProps);
return platformBrowserDynamic().bootstrapModule(AppModule);
},
template: '<app1-root />',
domElementGetter,
NgZone,
AnimationEngine,
});
export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;
当应用程序运行时,它会记录正确的 URL,但 404 错误仍然表明它正在查找根目录。我不确定我做错了什么。我正在使用 SystemJS 在 index.html 文件中导入应用程序。
环境信息:
"@angular-builders/custom-webpack": "^8",
"@angular/animations": "~8.2.11",
"@angular/cdk": "~8.2.3",
"@angular/common": "~8.2.11",
"@angular/compiler": "~8.2.11",
"@angular/core": "^8.2.14",
"@angular/forms": "~8.2.11",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "~8.2.11",
"@angular/platform-browser-dynamic": "~8.2.11",
"@angular/router": "~8.2.11",
"@azure/msal-angular": "^0.1.4",
"@microsoft/applicationinsights-web": "^2.0.0",
"@okta/okta-angular": "^1.3.1",
"@types/jest": "^24.0.24",
"hammerjs": "^2.0.8",
"node-sass": "^4.13.1",
"rxjs": "~6.4.0",
"rxjs-compat": "^6.5.3",
"single-spa-angular": "^3.0.1",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
解决方案
这对我有用;
设置公共路径.js
export default function setPublicPath() {
return Promise.all([getUrl()]).then(values => {
const [url] =values;
__webpack_public_path__ = url;
return true;
});
}
function getUrl() {
return window.System.resolve('app8');
}
main.single-spa.ts
import setPublicPath from './set-public-path.js';
setPublicPath();
推荐阅读
- java - poi-ooxml-schemas 4.1.2 的源代码无法下载。在哪里可以找到它?
- c# - Dropbox API - UploadAsync 值应该匹配
- java - 如何从字符串中删除数字
- java - 应用程序将空编辑 tex 识别为 0
- php - 如何使此查询不查找部分长度?
- angular - 如何通过单击条形图中的特定条形导航到具有相同标题/系列名称的另一个图表?
- javascript - 在 typescript 中解析 CLI 中的文本
- reactjs - {React Native} Firebase - 导航前更新用户值仅在软刷新后有效
- android - 在androidNDK中使用FFmpeg库播放视频
- brightness - Halcon - 设置图像亮度/曝光