View not injected or WARNING: Tried to load angular more than once

Question

I'am using the version v1.0.0-rc.1 of ui-router and angular 1.6.4 with components.

The is the reduced version of the application routes. Each view is associated with a component. topbar, sidebar and pageContent are all components.

The way the code is below the main view is not injected with the pageContent component and there are no errors or warnings. But topbar and sidebar are injected.

Plunker link to reproduce it: https://plnkr.co/edit/NedgoYEjkAxaRXRJHSoL?p=preview

    // Application routes
    $stateProvider
        .state('root', {
            url: '',
            abstract: true,
            views: {
                topbar: 'topbar',
                sidebar: 'sidebar'
            }
        })
        //children of the 'root' route
        .state('income', {
            url: '/income',
            parent: 'root',
            views: {
                main: 'pageContent'
            },
            resolve: {
                selectedModule: function () {
                    return 'income';
                }
            }
        })
        .state('outcome', {
            url: '/outcome',
            parent: 'root',
            views: {
                main: 'pageContent'
            },
            resolve: {
                selectedModule: function () {
                    return 'outcome';
                }
            }
        });

And this is the index.html

<ui-view name="topbar"></ui-view>
<div id="wrapper">
    <ui-view name="sidebar"></ui-view>
    <ui-view name="main"></ui-view>
</div>

pageContent.js

(function () {
    'use strict';

    angular.module('up').component('pageContent', {
        templateUrl: 'app/shared-components/page-content/page-content.component.html',
        controller: Controller,
        bindings: {
            selectedModule: '<'
        }
    });

    function Controller() {}

})();

pageContent.html (includes other components)

<div id="page-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 no-padding">
                <sidemenu></sidemenu>
                <operations></operations>
                <reports></reports>
            </div>
        </div>
    </div>
</div>

Finally if I change the 'root' route to: (with the main view and and empty template url)

.state('root', {
     url: '',
     abstract: true,
     views: {
        topbar: 'topbar',
        sidebar: 'sidebar',
        main: {
            templateUrl: ''
        }
    }
})

then I get WARNING: Tried to load angular more than once , but Everything works, meaning that all views are injected.

Another thing is that if remove jQuery the warning above is not shown. However, I need jQuery to use it with angular.element

Sorry for the long post but I had to give all the details.

Answer 1

Normally <script> tags aren't parsed in templates, this is a simplification in jqLite implementation that exists by design. As explained in this answer , having jQuery loaded before Angular replaces jqLite with jQuery and enables adding <script> nodes dynamically.

The problem seen in the plunk is caused by templateUrl: '' in this piece of code:

.state('root', {
    url: '',
    abstract: true,
    views: {
        topbar: 'topbar',
        sidebar: 'sidebar',
        main: {
          templateUrl: ''
        }
    }
})

This results in loading index page as a template, adding duplicate <script> tags to DOM and evaluating them. If there's no component for main view, it shouldn't be in views .

Regarding the expected behaviour, the view doesn't follow naming scheme , it likely should be:

.state('income', {
    url: '/income',
    parent: 'root',
    views: {
        'main@': 'pageContent'
    },
    ...