如何在基于 angular-fullstack 的应用程序中包含库文件 (css/js)

Question

I used a Yo Angular-Fullstack generator ( https://github.com/DaftMonk/generator-angular-fullstack ) and started an app and then tried installing Toastr from bower by doing -

bower install angular-toastr

and now I want to add the toastr css and js files. They are located in the

bower_components/angular-toastr/dist

now how do i include them in my current project, so that they are included in the dist folder when i build the application using grunt.

The folder structure is as follows -

├── client
│   ├── app                 - All of our app specific components go in here
│   ├── assets              - Custom assets: fonts, images, etc…
│   ├── components          - Our reusable components, non-specific to to our app
│
├── e2e                     - Our protractor end to end tests
│
└── server
    ├── api                 - Our apps server api
    ├── auth                - For handling authentication with different auth strategies
    ├── components          - Our reusable or app-wide components
    ├── config              - Where we do the bulk of our apps configuration
    │   └── local.env.js    - Keep our environment variables out of source control
    │   └── environment     - Configuration specific to the node environment
    └── views               - Server rendered views

Answer 1

I use a grunt task called wiredep . It looks for the bower components that my app uses and add a reference to the css/js files to the file I specify.

I'm using .NET BundleConfig for minification so my task setup looks like this:

wiredep: {
        task: {
            src: [
            'App_Start/BundleConfig.cs'
            ],
            ignorePath: '..',
            fileTypes: {
                cs: {
                    block: /(([ \t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
                    detect: {
                        js: /<script.*src=['"](.+)['"]>/gi,
                        css: /<link.*href=['"](.+)['"]/gi
                    },
                    replace: {
                        js: '.Include("~{{filePath}}")',
                        css: '.Include("~{{filePath}}")'
                    }
                }
            },
            dependencies: true,
            devDependencies: false
        }
    },

The end result is something like this:

bundles.Add(new ScriptBundle("~/bundles/thirdparty")
            //NOTE: auto-generated by a grunt task
            //anything between 'bower:js' and 'endbower' WILL BE LOST!
            //bower:js
            .Include("~/assets/angular/angular.js")
            .Include("~/assets/moment/moment.js")
            //endbower
            );

bundles.Add(new StyleBundle("~/bundles/css")
            //NOTE: auto-generated by a grunt task
            //anything between 'bower:css' and 'endbower' WILL BE LOST!
            //bower:css
            .Include("~/assets/nouislider/distribute/nouislider.min.css")
            //endbower
            .Include("~/Content/css/app.css")
            );

As I said, I'm using .NET BundleConfing, However, you can use and tags. I think you just need to remove the option replace from the grunt task configuration.