如何根据浏览器平台有条件地按角度导入库

Question

我需要根据浏览器平台动态导入库。防止Angular Universal由于使用窗口对象而产生错误。

import * as Muuri from 'muuri';

所以我想要的是这样的东西：

if (isPlatformBrowser(this.platform)) {
import * as Muuri from 'muuri';
}
else {
declare var Muuri;
}

显然这行不通。

Answer 1

不，很遗憾您不能有条件地导入库。不过，您可以导入这两个库，在构造函数中注入这两个，然后有条件地使用isDevMode()(不存在isDebugMode(((，您可以对每种情况使用任何您喜欢的方法。

不过，这不是一个很好的解决方案，因为这意味着您将在内存中加载这两个库，并且由于您将它们注入到构造函数中，因此在构建时发生的树抖动将不会忽略它们。

如果谨慎地这样做，甚至可能不会有什么不同(消极的(。我建议您在运行时使用开发工具对内存大小进行基准测试，如果有显著的收益超过了更清洁方法的手动性质，那么在使用Mock 开发完功能后，只需在导入中替换Mock类

Answer 2

试试这个

exportToExcel() {
import("xlsx").then(xlsx => {
// JUST USE THE LIBRARY
});
}

Answer 3

试试这个代码。

if (!isPlatformServer(this.platformId)) {
const Muuri = (await import('muuri')).default;
// or const Muuri = (await import('muuri'));
}