Search code examples
angularjsyeoman-generator-angular

How to debug angular when bower_components is two levels up

I moved my bower_components two levels up to get it out of my project, out of the way of source control because it's a build artifact, it's not my source code and it's not part of the build output (my build output concats all the vendor js into vendor.js, one file).

So I can build find and it creates my dist folder fine; I got that working.

But now when I try to serve in order to debug on my local machine, index.html correctly points to all the ../../artifacts/bower_components scripts and it can't find them when it runs in the web server. I guess because they are above the web root.

enter image description here

How can I get the web server to find them?

Solution

  • I moved my bower_components two levels up to get it out of my project, out of the way of source control because it's a build artifact

    Moving bower_components one level up so as it is out of your app files is logical. But two levels up so that it is out of source control is not. This case is better handled by adding an exception to the ignore file .(git|svn|...)ignore

    Anyway, depending on the server you use, you should be able to configure a route, so that the server serves also whats in the bower_components folder. Here is an example with browsersync:

    server: {
    baseDir: "app",
    routes: {
        "/bower_components": "bower_components"
    }
}

    The server serves what's inside app folder, and also maps the content of the bower_components folder to the route /bower_components.

    Links in index.html look therefore like that:

    <script src="bower_components/angular/..."></script>

    ...even though bower_components is at a different level from index.html.