我们正在构建一个/courses/%course-article-category%/course-article-title
(第7版)应用程序,其中还使用了一些基于Angular
的小部件。这些React
小部件捆绑在React
节点模块中。在开发人员模式下,所有操作均按预期方式进行-小部件已正确呈现。但是,在生产模式下,会发生一些奇怪的事情,并且某些umd
小部件以一种奇怪的方式呈现。
经过一些试验,我尝试将React
中的widgets
包含在scripts
中,并从angular.json
文件中删除其import
。然后,我只需通过ts
按其名称访问它。像这样在window['libraryName']
中构建显示正确的渲染效果(与prod
模式相同)。因此,我自己得出结论,由于角度的缩小过程而导致渲染错误。如果不修改脚本,一切正常。
现在,该解决方案(即使它可以工作)根本不是完美的。首先,通过dev
对象访问库非常难看。而且更重要的是,该库会在应用开始加载后立即加载,这由于其大小以及仅在延迟加载的模块内部使用这一事实而无法接受。
我还尝试使用TypeScript动态window
并以此方式获取库。但这没有用,因为当Angular看到我正在以一种或另一种方式导入它时,它仍然会缩小该lib。
我知道这是一个奇怪的问题,我没有找到与我所遇到的事情类似的事情。但是从上述所有事实来看,最好的解决方案是以某种方式迫使Angular缩小过程忽略该库。
p.s。
我可能错了,这完全是由于缩小。但这绝对是由于import()
构建打包中涉及的某些步骤与prod
构建(dev
)中发生的步骤不同。
这些ng serve
的构建设置和相应的结果是不同的:
angular.json
使用Webpack v.4内置的缩小器可缩小其响应小部件库。