Add js files with hashed names (generated by Angular CLI) in a MVC view

Question

I have an angular app, build with angular cli integrated in a MVC project.

I'm using ng build --prod --output-hashing none . The output files are copied in a folder in the MVC project. Since the file names are always the same, I'm just referencing them in a cshtml to load the angular app.

...
<script type="text/javascript" src=".../inline.bundle.js"></script>
<script type="text/javascript" src=".../vendor.bundle.js"></script>
<script type="text/javascript" src=".../script.bundle.js"></script>
...

But if I use ng build --prod , this approach doesn't work, because the generate files have hashes in their names: inline.318b50c57b4eba3d437b.bundle.js

How can I include those files in the view

Answer 1

Keep using --output-hashing none and create a ScriptBundle in AppStart/BundleConfig.cs which will add the same functionality with a hash in the bundle-name.

BundleConfig.cs:

            bundles.Add(new ScriptBundle("~/bundles/app").Include(
                "~/Scripts/app/runtime.js",
                "~/Scripts/app/polyfills.js",
                "~/Scripts/app/scripts.js",
                "~/Scripts/app/vendor.js",
                "~/Scripts/app/main.js"

                //you might want the styles.js here as well for DEBUG-only - I left them out of this example
            ));
#if DEBUG
#else
            BundleTable.EnableOptimizations = true;
#endif

Index.cshtml:

    @Scripts.Render("~/bundles/app")