Nx和Angular中的模块联合会在加载styles.js时生成错误



下面是一篇描述建立模块联盟的文章:https://nx.dev/l/a/guides/setup-mfe-with-angular

从生成工作空间开始,添加angular插件,并添加仪表板应用程序。

在为仪表板应用程序提供服务时,我从styles.js:收到一个错误

Uncaught SyntaxError: Cannot use 'import.meta' outside a module

它被加载为:

<script src="styles.js" defer></script>

进行一些快速搜索似乎表明这个东西应该具有类型=";模块";

然而,我似乎找不到任何类型的配置来修改添加到index.html的行

我已经检查了angular生成的常规模板,它对所有内容都使用defer样式,所以其他js文件条目被更改为type="模块";某个地方。普通的styles.js也不包含任何";import.meta";一串

任何解决方案都会有所帮助。

TL;DR:没关系。你不应该在生产中看到这个错误

上面有一张纸条https://nx.dev/guides/setup-mfe-with-angular你提到说:

注意:当在本地开发模式下为MFE提供服务时,控制台会有一个错误输出,import.meta不能在模块外使用,来自的脚本是styles.js。这是一个已知的错误输出,但据我们的测试显示,它实际上不会导致任何损坏。这是因为Angular编译器将styles.js文件附加到带有defer的标记中的index.html。它需要附加type=模块,但这样做会破坏HMR。没有办法让我们自己去修补这个过程。好消息是,错误不会传播到生产中,因为样式被编译到CSS文件中,所以没有错误的JS来记录错误。值得重申的是,我们的测试没有发现实际的错误或损坏。

检查scriptType

这个问题与如何在编译的应用程序中设置导入有关。您可以通过添加scriptType:来更新webpack.config.js中的scriptType

module.exports = {
output: {
uniqueName: "YourUniqueAppName",
publicPath: "auto",
scriptType: "text/javascript"
},

相关内容

最新更新