ค้นหาเว็บไซต์

javascript - AngularJs + webpack - ไม่สามารถอ่านคุณสมบัติ 'navigable' ของ undefined


ฉันกำลังพยายามย้ายแอปพลิเคชัน angularjs(1.5.10) ของฉันไปยัง Angular ตอนแรกแอปพลิเคชันของฉันถูกสร้างขึ้นโดยใช้ jhipster ตอนนี้เราได้ลบ jhipster ออกไปแล้วแต่โครงสร้างของแอปพลิเคชันยังคงเหมือนเดิม

ฉันได้ย้าย dependencies ทั้งหมดของฉันไปที่ package.json แล้วและฉันกำลังพยายามรวมสคริปต์ของฉันโดยใช้ webpack แล้วใช้สคริปต์ที่ถูกรวมในหน้า index.html เวอร์ชันของ webpack คือ 4.26.1 ฉันกำลังใช้ @uirouter/angularjs กับ เวอร์ชัน 0.3.1

เมื่อฉันรันคำสั่งเพื่อรัน webpack มันรันสำเร็จและไฟล์ที่รวมกันถูกสร้างขึ้น แต่เมื่อฉันรันแอปพลิเคชันบนเบราว์เซอร์ ฉันได้รับข้อผิดพลาดดังต่อไปนี้:-

Uncaught Error: [$injector:modulerr] Failed to instantiate module libraryApp due to:
TypeError: Cannot read property 'navigable' of undefined
    at Object.url (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2245:30)
    at registerState (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2381:72)
    at flushQueuedChildren (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2353:7)
    at registerState (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2395:5)
    at flushQueuedChildren (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2353:7)
    at registerState (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2395:5)
    at flushQueuedChildren (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2353:7)
    at registerState (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2395:5)
    at $StateProvider.state (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2877:5)
    at stateConfig (webpack:///./src/main/webapp/app/app.state.ts?:16:24)
http://errors.angularjs.org/1.5.10/$injector/modulerr?p0=libraryApp&p1=TypeError%3A%20Cannot%20read%20property%20'navigable'%20of%20undefined%0A%20%20%20%20at%20Object.url%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2245%3A30)%0A%20%20%20%20at%20registerState%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2381%3A72)%0A%20%20%20%20at%20flushQueuedChildren%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2353%3A7)%0A%20%20%20%20at%20registerState%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2395%3A5)%0A%20%20%20%20at%20flushQueuedChildren%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2353%3A7)%0A%20%20%20%20at%20registerState%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2395%3A5)%0A%20%20%20%20at%20flushQueuedChildren%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2353%3A7)%0A%20%20%20%20at%20registerState%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2395%3A5)%0A%20%20%20%20at%20%24StateProvider.state%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2877%3A5)%0A%20%20%20%20at%20stateConfig%20(webpack%3A%2F%2F%2F.%2Fsrc%2Fmain%2Fwebapp%2Fapp%2Fapp.state.ts%3F%3A16%3A24)
    at Object.url (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2245:30)
    at registerState (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2381:72)
    at flushQueuedChildren (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2353:7)
    at registerState (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2395:5)
    at flushQueuedChildren (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2353:7)
    at registerState (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2395:5)
    at flushQueuedChildren (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2353:7)
    at registerState (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2395:5)
    at $StateProvider.state (webpack:///./node_modules/@uirouter/angularjs/release/angular-ui-router.js?:2877:5)
    at stateConfig (webpack:///./src/main/webapp/app/app.state.ts?:16:24)
http://errors.angularjs.org/1.5.10/$injector/modulerr?p0=libraryApp&p1=TypeError%3A%20Cannot%20read%20property%20'navigable'%20of%20undefined%0A%20%20%20%20at%20Object.url%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2245%3A30)%0A%20%20%20%20at%20registerState%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2381%3A72)%0A%20%20%20%20at%20flushQueuedChildren%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2353%3A7)%0A%20%20%20%20at%20registerState%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2395%3A5)%0A%20%20%20%20at%20flushQueuedChildren%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2353%3A7)%0A%20%20%20%20at%20registerState%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2395%3A5)%0A%20%20%20%20at%20flushQueuedChildren%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2353%3A7)%0A%20%20%20%20at%20registerState%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2395%3A5)%0A%20%20%20%20at%20%24StateProvider.state%20(webpack%3A%2F%2F%2F.%2Fnode_modules%2F%40uirouter%2Fangularjs%2Frelease%2Fangular-ui-router.js%3F%3A2877%3A5)%0A%20%20%20%20at%20stateConfig%20(webpack%3A%2F%2F%2F.%2Fsrc%2Fmain%2Fwebapp%2Fapp%2Fapp.state.ts%3F%3A16%3A24)
    at eval (webpack:///./node_modules/angular/angular.js?:68:12)
    at eval (webpack:///./node_modules/angular/angular.js?:4688:15)
    at forEach (webpack:///./node_modules/angular/angular.js?:325:20)
    at loadModules (webpack:///./node_modules/angular/angular.js?:4649:5)
    at createInjector (webpack:///./node_modules/angular/angular.js?:4571:19)
    at doBootstrap (webpack:///./node_modules/angular/angular.js?:1805:20)
    at bootstrap (webpack:///./node_modules/angular/angular.js?:1826:12)
    at angularInit (webpack:///./node_modules/angular/angular.js?:1711:5)
    at eval (webpack:///./node_modules/angular/angular.js?:32539:5)
    at HTMLDocument.trigger (webpack:///./node_modules/angular/angular.js?:3253:7)

โค้ด app.state.js ของฉัน:-

import angular from 'angular';

(function() {
    'use strict';

    angular
        .module('libraryApp')
        .config(stateConfig);

    stateConfig.$inject = ['$stateProvider'];

    function stateConfig($stateProvider) {
        $stateProvider.state('app', {
            abstract: true,
            views: {                
                'topbar@': {
                    templateUrl: 'app/layouts/topbar/topbar.html',
                    controller: 'TopbarController',
                    controllerAs: 'vm'
                }
            },
            resolve: {
                authorize: ['Auth',
                    function (Auth) {
                        return Auth.authorize();
                    }
                ]
            }
        });
    }
})();

นอกจากนี้ถ้าฉันเพิ่ม parent: 'app', ก่อน abstract: true ข้อผิดพลาดในคอนโซลทั้งหมดก็หายไป แต่ TopbarController ไม่ถูกเรียก และ Auth.authorize() ของ resolve ก็ไม่ถูกเรียกเช่นกัน