通过导入添加模块联合后设置 __webpack_public_path__
由于我们的应用程序在本机网站内的结构，我必须设置 __webpack_public_path__ 。
但现在在 Angular 的新模块联合设置中，导入了 bootstrap.ts 脚本，并且不再设置 __webpack_public_path__ 。
有没有一种方法可以在运行时使用提升 bootstrap.ts 的最新方法设置 webpack_public_path ？
main.ts:
import('./bootstrap').catch(err => console.error(err));
bootstrap.ts
const getBaseOfModules = (script: string): string => {
const src = document.querySelector<HTMLScriptElement>(`[src*="${script}"]`).src;
return `${src.substring(0, src.lastIndexOf('/'))}/`;
};
__webpack_public_path__ = getBaseOfModules('main');
initAngularApp();
main.js 文件和其他延迟加载模块位于 http://some/deep/path/main.js
看起来 Angular 从最后一个 js 文件的 url 获取路径。
添加： 我已经根据文档尝试过这个..但这不起作用'。 该脚本也将在延迟加载模块内加载。
publicpath.ts
declare let __webpack_public_path__;
const getBaseOfModules = (script: string): string => {
const src = document.querySelector<HTMLScriptElement>(`[src*="${script}"]`).src;
return `${src.substring(0, src.lastIndexOf('/'))}/`;
};
// set the on the fly public path absolute for module lazy loading see https://webpack.js.org/guides/public-path/
export default __webpack_public_path__ = getBaseOfModules('main');
main.ts
import('@lib-utils/public-path');
import('./bootstrap').catch(err => console.error(err));
Because of the structure of our app inside a native website, I had to set the __webpack_public_path__ .
But now in the new module federation setup for angular the bootstrap.ts script is imported and the __webpack_public_path__ is not set anymore.
Is there a way I can set the webpack_public_path during runtime with the latest way of hoisting the bootstrap.ts?
main.ts:
import('./bootstrap').catch(err => console.error(err));
bootstrap.ts
const getBaseOfModules = (script: string): string => {
const src = document.querySelector<HTMLScriptElement>(`[src*="${script}"]`).src;
return `${src.substring(0, src.lastIndexOf('/'))}/`;
};
__webpack_public_path__ = getBaseOfModules('main');
initAngularApp();
The main.js file and other lazy loaded modules are served at http://some/deep/path/main.js
It looks like angular gets the path based from the url of the last js file.
Addition:
I have tried this according to documentation.. but that doesnt work'.
This script will be loaded also inside a lazyloaded module.
publicpath.ts
declare let __webpack_public_path__;
const getBaseOfModules = (script: string): string => {
const src = document.querySelector<HTMLScriptElement>(`[src*="${script}"]`).src;
return `${src.substring(0, src.lastIndexOf('/'))}/`;
};
// set the on the fly public path absolute for module lazy loading see https://webpack.js.org/guides/public-path/
export default __webpack_public_path__ = getBaseOfModules('main');
main.ts
import('@lib-utils/public-path');
import('./bootstrap').catch(err => console.error(err));
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我找到了答案..我需要使用这个解决方案： Angular 4: "Cannot find name '要求'
使用 require 或 System.import
I found the answer.. I need to use this solution: Angular 4: "Cannot find name 'require'
using require or System.import