我已经将旧的Angular 1.x应用程序捆绑到一个大的app.js文件（ES 5）中，并将其附加到index.html
<html ng-app="app">
<body>
<!-- Main view -->
<div ui-view></div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>我想在SPFX框架（基于TypeScript和Webpack的解决方案）中使用它，只需最小的工作量（无需将所有内容重写为Typescript）。我想使用遗留的app.js“原样”（作为外部JavaScript库），而不安装每个依赖项（npm install fullcalendar，npm install jquery-minicolors等），因为不是每个组件都暴露为npm包。
我尝试使用import或require（）函数，但当我使用require（'./assets/app.js'）时，它给我错误：
Error in ./src/webparts/newsolution/assets/app.js未找到该页：错误：无法解析“...\spfx\src\webparts\test\assets”中的“fullcalendar”
Error in ./src/webparts/newsolution/assets/app.js未找到该页：错误：无法解析“...\spfx\src\webparts\test\assets”中的“jquery-minicolors”
对于捆绑到遗留app.js中的每一个组件（超过20个组件），我希望从typescript编译中排除遗留app.js。目标是将ng-app附加到Typescript中的特定in方法render（）中（与我在遗留Angular app中的index.html中的相同）
public render(): void {
require('./assets/app.js')
this.domElement.innerHTML = `
<div>
</div>
}
angular.bootstrap(this.domElement, ['app']);
}
1条答案
按热度按时间9bfwbjaz1#
我已经很久没有看过Angular v1了，但听起来你不仅要获得应用程序的捆绑包，还要获得依赖项。我假设你有两个项目，一个是Angular项目，一个是SPFx项目。
我不认为你能将两者放在同一个项目中，因为这两种项目类型之间的构建依赖性是如此不同。
对于依赖项，您要么需要从CDN引用它们，以便SPFx运行时在加载Angular应用程序之前导入它们，要么将它们包含在Angular的bundle中（可能使用Angular构建工具）？
我写了一系列关于在SPFx中使用Angular Elements的文章，可能会有所帮助：https://www.voitanos.io/series/spfx-angular-elements/
虽然这些文章是基于Angular Elements和Angular v6+，但概念是相同的：在另一个应用中构建你的Angular项目，然后在SPFx项目中使用它，一旦它完全构建完成。只需让SPFx项目导入生成的JS并将其添加到呈现Web部件的DIV中。