0

I'm trying to integrate an already compiled Angular app inside a Vue app made with Nuxt framework.

I've tried the following strategies :

  • Changing the index.html of the Angular app to a index.vue in order to be able to call it using the Nuxt files routing logic when clicking a button in a certain Vue component,
  • Importing javascripts, images and CSS files in this index.vue
  • If I put these imported files in the assets folder and try to import them, the vue app says it can't find them
  • I also tried to put them in the nuxt config file, but with the same result
  • If I put everything together in the same "angularApp" folder, the application stays infinitly loading the index.vue of that folder in blank, without showing anything

Do you have any idea if this is possible, and how should be implemented? Or the only solution is to publish the Angular app in a separate domain and call it as an external app?

Thank you very much,

Carlota

Update: I've tried to put .js files as plugins in nuxt config file, [![plugins section][1]][1] and I got the error [![error 404][2]][2]

They are the compiled angular files so I did not put any inject.

Also, before I've tried to put them in the head() of the component

script: [
      {
        src: '~/assets/jeu/index.47dc1d4d.js',
        async: true,
        crossorigin: 'anonymous',
        body: true,
      },
      {
        src: '~/assets/jeu/index.816de13f.js',
        async: true,
        crossorigin: 'anonymous',
        body: true,
      },
      {
        src: '~/assets/jeu/index.a5b5fbd0.js',
        async: true,
        crossorigin: 'anonymous',
        body: true,
      },
      {
        src: '~/assets/jeu/index.c3c1b8f3.js',
        async: true,
        crossorigin: 'anonymous',
        body: true,
      },
    ],

And the same 404 is found.

CBD
  • 21
  • 4
  • 1
    Loading build ng app doesn't differ from loading any third-party js lib. Just load .js and .css files – Estus Flask Jul 03 '23 at 09:57
  • 1
    Possible duplicate of https://stackoverflow.com/questions/52495601/how-to-add-external-js-file-in-nuxt – Estus Flask Jul 03 '23 at 09:57
  • I've tried this but it seems not been working. The only that worked until far is importing CSS files in – CBD Jul 03 '23 at 14:44
  • Depends on the details of your case, which is unknonw. If you init angular app inside vue app then scoped style may work, but basically you need to load css, etc on the page, which can be done in nuxt config. As long as you're able to load ng app on arbitrary html page, you should be able to do this in nuxt. This is just js+css app at this point, it doesn't matter if it's angular – Estus Flask Jul 03 '23 at 14:53
  • I understand, the problem here that importing javascript files in typical nuxt config file or inside the head() in vue component is not working, 404 every time, I don't have an idea how to debug the babel loader to see where the problem is – CBD Jul 04 '23 at 06:44
  • Consider updating the question with your current attempt and debugging details. It's unknown which urls give 404 – Estus Flask Jul 04 '23 at 07:55

0 Answers0