Why my angular app works fine in debug mode and not when js bundle is optimized

Question

I have two applications angularjs. I had to take some pages from one to migrate to the second. Since I activate the bundle optimization with System.Web.Optimization, the application no longer runs. Here is the state of the console:

Error: [$injector:modulerr] http://errors.angularjs.org/1.5.9/$injector/modulerr?p0=MyApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.9%2F%24injector%2Funpr%3Fp0%3Dn%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A30100%2Fbundles%2Fvendor.js%3Fv%3D0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1%3A1%3A328163)%0A%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A30100%2Fbundles%2Fvendor.js%3Fv%3D0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1%3A1%3A326874)%0A%20%20%20at%20u%20(http%3A%2F%2Flocalhost%3A30100%2Fbundles%2Fvendor.js%3Fv%3D0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1%3A1%3A327109)%0A%20%20%20at%20invoke%20(http%3A%2F%2Flocalhost%3A30100%2Fbundles%2Fvendor.js%3Fv%3D0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1%3A1%3A327193)%0A%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A30100%2Fbundles%2Fvendor.js%3Fv%3D0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1%3A1%3A326368)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A30100%2Fbundles%2Fvendor.js%3Fv%3D0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1%3A1%3A326499)%0A%20%20%20at%20t%20(http%3A%2F%2Flocalhost%3A30100%2Fbundles%2Fvendor.js%3Fv%3D0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1%3A1%3A309792)%0A%20%20%20at%20b%20(http%3A%2F%2Flocalhost%3A30100%2Fbundles%2Fvendor.js%3Fv%3D0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1%3A1%3A326275)%0A%20%20%20at%20yr%20(http%3A%2F%2Flocalhost%3A30100%2Fbundles%2Fvendor.js%3Fv%3D0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1%3A1%3A328292)%0A%20%20%20at%20o%20(http%3A%2F%2Flocalhost%3A30100%2Fbundles%2Fvendor.js%3Fv%3D0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1%3A1%3A316546)
   at Anonymous function (http://localhost:30100/bundles/vendor.js?v=0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1:1:326593)
   at t (http://localhost:30100/bundles/vendor.js?v=0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1:1:309792)
   at b (http://localhost:30100/bundles/vendor.js?v=0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1:1:326275)
   at yr (http://localhost:30100/bundles/vendor.js?v=0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1:1:328292)
   at o (http://localhost:30100/bundles/vendor.js?v=0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1:1:316546)
   at fo (http://localhost:30100/bundles/vendor.js?v=0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1:1:317026)
   at Anonymous function (http://localhost:30100/bundles/vendor.js?v=0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1:1:1121209)
   at a (http://localhost:30100/bundles/vendor.js?v=0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1:1:36555)
   at h.add (http://localhost:30100/bundles/vendor.js?v=0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1:1:36865)
   at i.prototype.ready (http://localhost:30100/bundles/vendor.js?v=0CC4LNBLFTXMcD7A3WwKd4pdBcv7gCYsWZTADZBarKU1:1:12694)

Suggestions ?

Possible duplicate of [Angularjs minify best practice](https://stackoverflow.com/questions/18782324/angularjs-minify-best-practice). — georgeawg, Oct 31 '19 at 14:08

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

Use Strict Dependency Injection

With Implicit Annotation, code will break when minified.

From the Docs:

Implicit Annotation

Careful: If you plan to minify your code, your service names will get renamed and break your app.

You can add an ng-strict-di directive on the same element as ng-app to opt into strict DI mode.

<body ng-app="myApp" ng-strict-di>

Strict mode throws an error whenever a service tries to use implicit annotations.

For more information, see

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 31 '19 at 14:18

georgeawg

48,608
13
72
95

I already did all this... before the migration all works fine event with minified sources – lolo Oct 31 '19 at 15:39
The error message say `Error: $injector:unpr Unknown provider: n`. Unless you edit the question to provide more information, there is no point to re-opening the question. – georgeawg Oct 31 '19 at 16:30
it works!!! I had to change the startup of my application temporarily so that the strict mode works: do not inject ngApp otherwise the strict mode has no effect. I was then able to see an injection problem on a decorator with the $delegate parameter – lolo Nov 04 '19 at 15:16

Why my angular app works fine in debug mode and not when js bundle is optimized

1 Answers1

Use Strict Dependency Injection

Implicit Annotation