Import legacy ES5 bundled javascript library into TypeScript and Webpack based solution without installing dependencies

Question

I've old Angular 1.x app bundled into one, big app.js file (ES5) which attached to index.html

<html ng-app="app">
<body>
    <!-- Main view  -->
    <div  ui-view></div>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

and I want to use it in SPFXframework (TypeScript and Webpack based solution) with minimal effort (without rewriting everyting into Typescript). I want to use legacy app.js "as is" (as external Javascript lib) without installing every single dependency (npm install fullcalendar, npm install jquery-minicolors etc) since not each component is exposed as npm package.

I've tried to use import or require() function, but when I use require('./assets/app.js') it gives me error:

ERROR in ./src/webparts/newsolution/assets/app.js Module not found: Error: Can't resolve 'fullcalendar' in '...\spfx\src\webparts\test\assets'

ERROR in ./src/webparts/newsolution/assets/app.js Module not found: Error: Can't resolve 'jquery-minicolors' in ''...\spfx\src\webparts\test\assets'

for every single component which is bundled into legacy app.js (over 20 components) I want to exclude legacy app.js from typescript compilation. The goal is to attach ng-app into specific in method render() in Typescript (the same as I've in index.html in legacy Angular app)

public render(): void {
   
    require('./assets/app.js')

    this.domElement.innerHTML = `
      <div>
      </div>
    }      

      angular.bootstrap(this.domElement, ['app']);
  }

Andrew Connell · Accepted Answer · 2023-09-29 18:09:26Z

It's been a long time since I looked at Angular v1, but sounds like you're having an issue getting a bundle of not just your app but also your dependencies. I assume you've got two projects, one for the Angular project & one for the SPFx project?

I don't think you'll be able to put both in the same project, because the build dependencies between the two project types are so different.

For the dependencies, you either need to reference them from CDN's so the SPFx runtime will import them before loading your Angular app, or include them in your Angular's bundle (possible with the Angular build tools)?

I wrote a series on using Angular Elements in SPFx a while back that might help: https://www.voitanos.io/series/spfx-angular-elements/

While the articles are based on Angular Elements & Angular v6+, the concept is the same: build your Angular project in another app, then consume it within an SPFx project once it's fully built. Just have the SPFx project import the resulting JS and add it to the DIV where the web part is rendered.

Collectives™ on Stack Overflow

Import legacy ES5 bundled javascript library into TypeScript and Webpack based solution without installing dependencies

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related