Tips for integrating Angular?

[Blackbaud-JasonBodnar]

I've picked up a previously created extension used internally. It had multiple manifests and src files to be cross-browser aware so I was very happy to stumble upon this project.!

I'm adding an Options page to support some new features in the extension. My company is Angular shop so if I want to get others to help out I'm better of going with Angular. Following this guide I've add a sub-project for the Angular stuff so now I need to copy the generated files over to the main project or bundling by vite. Is there a way to copy files and rename them? Is it simply doing the work in the vite.config.ts?

Are there any other tips to including Angular generated content in an extension or am I the first to do this?

[Blackbaud-JasonBodnar]

Searching I found some discussion about using rollup-plugin-copy so I have:

plugins: [
    copy({
      targets: [
        {
          src: "angular/dist/angular/index.html",
          dest: "src/",
          rename: "options.html"
        },
        {
          src: ["angular/dist/angular/main.js", "angular/dist/angular/polyfills.js", "angular/dist/angular/runtime.js", "angular/dist/angular/styles.css"],
          dest: "src/"
        }
      ]
    }),
    webExtension({
      browser: target,
      manifest: generateManifest,
      watchFilePaths: ["package.json", "manifest.json", "background.ts"],
      additionalInputs: target === "chrome" ? ["src/offscreen.html", "src/offscreen.js"] : []
    }),
  ]

but the web extension plugin is running before the copy plugin:

Error [RollupError]: Could not resolve entry module "src/options.html".

Is it possible to force copy to run first? Or am I barking up the wrong tree?

[aklinker1]

The copy plugin lets you configure when the copy happens. By default, it happens after the build is complete. Try setting hook: 'options'.

• https://www.npmjs.com/package/rollup-plugin-copy#hook
• https://rollupjs.org/plugin-development/#build-hooks

[aklinker1]

I am unfamiliar with angular, but you should be able to accomplish this without a separate build step, and without having to copy over code built by the angular CLI.

Since this project is built around Vite, try searching "angular vite" and you should find some examples of the basic setup, like this:

https://medium.com/@hiepxanh/angular-vite-example-is-crazy-fast-3ee4d730020c

You can think of each HTML page inside the extension as a regular Vite app. So following any basic Vite+Angular tutorial and adding the HTML file to the manifest should work just fine.

[aklinker1]

It looks like you could use standalone components to initialize an app inside an HTML file. That would be my suggestion.

https://angular.io/guide/standalone-migration