`Error: [$injector:unpr] Unknown provider: i` with Vite

[MetaMmodern]

Hi, I've been trying to upgrade our internal company project to match your template, everything went almost fine until I tried to make a build and serve it through vite serve. It gave me this error:

I understand that this happens because of minification by Vite, but there are 2 troubles:

1. If I disable minification in Vite Config it still ads digits to places where we have similar providers in use (for example we use NavigationService in 2 components thus Vite will name second entry as NavigationService2 and it will break DI again).

2. I could not find any piece of code in your repo which would help me fix this, because your cloned local project builds just okay without errors.

Since it's private repo I can't show code.(Moreover, I won't be able to create a Sandbox it will take a lot more time to do, so sorry).
But one important detail is that I kept my controllers, services and directives as function and did not convert them into ES6 classes.
Main question is: how to tell vite to make everything fine?

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Providers are set correctly.

Current Behavior

Messes up providers during build with minification.

[fyodorio]

Hi Bunyamin,

Thanks a lot for taking time to report that.

I will be able to check the issue more thoroughly in a couple of weeks and come back to you with a feedback.

[MetaMmodern]

(an update for this comment is here, read it as well: #26 (comment))
so, just in case anyone finds this or desides to write agularjs projects(may God help you) I fixed this by:

1. splitting every file into separate chunk.
2. disabling minifiction.

Providing my vite.config build stage below:

export default defineConfig({
  ...,
  build: {
    minify: false,
    rollupOptions: {
      output: {
        manualChunks: (str) => {
          if (str.includes("node_modules")) return "vendor";
          if (str.includes("app")) {
            if (str.includes("images")) return "images";
            const folders = str
              .split("app")[1]
              .split("/")
              .filter((e) => e);
            const fileName = folders.join("_");
            const fileNameWithoutExtension = fileName.split(".")[0];
            return fileNameWithoutExtension;
          }
        },
      },
    },
  },
  ...,
});

The provided config is not ideal and it's not the best decision for the problem, but that's what I came up with. If this can be simplified or done in a way to keep minification then let me know. I'd keep this issue open since it still relates to ng-hotrod project.

[fyodorio]

Thanks for sharing the solution, @MetaMmodern, I hope it will help AngularJS victims until any better way is found 👍💪

[MetaMmodern]

For anyone who finds this:

do not do this: if (str.includes("node_modules")) return "vendor";

do this instead: if (str.includes("angular")) return "angular";

otherwise you'll have issues with dynamic imports for npm libraries like I had)

[nullart]

Have you used $inject in your controller?