TextAngular inside ModalService inside Controller, Buttons Not render correctly

[ghost]

I use Angular Modal Service That I load inside of a controller, in the modal I have a textAngular box and I use a minification tool that compresses my scripts in to an app.js file inside wwwroot folder. I use this code for ocLazyLoad:

$ocLazyLoadProvider.config({
            debug: true,
            events: true,
            modules: [
                {
                    name: 'modalService',
                    files: [
                        'lib/angular-modal-service/dst/angular-modal-service.min.js'
                    ]
                },
                {
                name: 'textAngular',
                files: [                    
                            'lib/textangular/dist/textangular.css',
                            'https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css',
                            //'lib/angular-sanitize/angular-sanitize.min.js',
                            'lib/textangular/dist/textangular-rangy.min.js',
                            'lib/textangular/dist/textangular-sanitize.min.js',
                            'lib/textangular/dist/textangular.min.js'
                ]
            }]
        });
.state('admin.selectproducts', {
            url: "/SelectProducts/?departmentID&categoryID",
            templateUrl: "/Views/Admin/selectProducts.html",
            controller: 'selectProductsController',
            authenticate: true,
            params: {
                departmentID: "0",
                categoryID: "0"
            },
            resolve: {
                loadModalService: ['$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load('modalService');
                }],
                loadTextAngular: ['$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load('textAngular');
                }],
                loadMyCtrl: ['$ocLazyLoad', 'loadModalService', 'loadTextAngular', function ($ocLazyLoad, loadModalService, loadTextAngular) {
                    return $ocLazyLoad.load({
                        files: ['app.js']
                    });
                }]
            }

Although the box renders as HTML editor and Html look correct, but Buttons of textAngular are small without text.

[ocombe]

You want to be sure that the text angular files are loaded in the right order for it to work. Change your module definition to this:

{
                name: 'textAngular',
                serie: true,
                files: [                    
                            'lib/textangular/dist/textangular.css',
                            'https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css',
                            //'lib/angular-sanitize/angular-sanitize.min.js',
                            'lib/textangular/dist/textangular-rangy.min.js',
                            'lib/textangular/dist/textangular-sanitize.min.js',
                            'lib/textangular/dist/textangular.min.js'
                ]
            }

Notice the serie: true parameter that I added here.

[ghost]

Unfortunately it is not working with 'serie: true', also ModalService has its own controller and view but no matching state definition.

[ocombe]

Here is the module definition that I use in my own app to load text-angular:

{
            name: 'text-angular',
            files: [
                'vendor/js/textAngular-sanitize.min.js',
                'vendor/js/rangy-core.min.js',
                'vendor/js/rangy-selectionsaverestore.min.js',
                'vendor/js/textAngular.js',
                'vendor/js/textAngularSetup.js',
                'vendor/css/textAngular.css'
            ],
            serie: true
        }

[ghost]

I have a 20 second delay when click to navigate to this state is it because of ocLazyLoad? I mean is browser's script caching is disabled by using ocLazyLoad?

[ocombe]

It is not disabled unless you use cache: false, but with serie: true it waits for each file to be loaded before it loads the next one.

[johansten]

@ocombe: That's some serious magic there. I've literally spent all day tweaking things, trying to get text-angular working. Thank you!

[d4guru]

Note that it is working using textangular.js but not working using textangular.min.js as the minified version is not a minified version... As mention here by @toxaq