Поиск элементов с помощью селекторов не поддерживается jqLite

Question

Я использую AngularJS 1.5.10 и jQuery 2.2.4 с веб-пакетом.Я добавил jQuery, а затем AngularJS, как упомянуто в предложениях, но это не решит эту проблему.

Я получаю консольную ошибку следующим образом -

Мой файл login.conroller.ts выглядит как

 import angular from 'angular';

(function() {
    'use strict';

    angular
        .module('demo')
        .controller('LoginController', LoginController);

    LoginController.$inject = ['$rootScope', '$state', '$timeout'];

    function LoginController ($rootScope, $state, $timeout) {
        var vm = this; $timeout(function (){angular.element('#username').focus();});
 }
})();

Мой файл main.ts -

import 'jquery';
import 'angular';
import 'angular-resource';
import 'angular-animate';
import 'angular-aria';
import 'angular-cache-buster';
import 'angular-cookies';
import 'bootstrap';
import 'angular-sanitize';
import '@uirouter/angularjs';

[jqLite: nosel] Поиск элементов с помощью селекторов не поддерживается jqLite!См .: http://docs.angularjs.org/api/angular.element

Может кто-нибудь помочь мне решить эту проблему?

Answer 1

На основании ошибки ваш код не может найти jQuery.Альтернативой может быть использование стандартного API DOM.Поэтому вместо angular.element('#username') вы можете использовать document.querySelector('#username');

Как указано в примечании, приведенном ниже в документации для angular.element

Примечание: имейте в виду, чтоэта функция не найдет элементы по имени тега / селектору CSS.Для поиска по имени тега попробуйте вместо angular.element (document) .find (...) или $ document.find () или использовать стандартные API DOM, например document.querySelectorAll ().

Answer 2

Описание проблемы расплывчато, но похоже, что Angular не может найти правильный экземпляр jQuery в глобальной области видимости.Когда AngularJS загружен, он ищет window.jQuery и, если не найден, откат к встроенной альтернативе, которой не хватает функциональности селекторов.

Я предполагаю, что вы используете webpack для создания своих активов.Если это так, рассмотрите возможность использования expose-loader .

Invoke:

$ npm install expose-loader --save-dev

, а затем добавьте перед угловым импортом:

import 'expose-loader?jQuery!jquery';