javascript - Webpack 构建 Angular.js - 无法实例化模块应用程序

问题描述

我正在尝试将我们的 angular.js 构建从 gulp 移动到 webpack。我已经成功地捆绑了供应商库，但我遇到了 angular.js 模块的问题。

未捕获的错误：[$injector:modulerr] 无法实例化模块应用程序，原因是：错误：[$injector:modulerr] 无法实例化模块 app.product，原因是：错误：[$injector:nomod] 模块“app.product”是无法使用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

我应该如何导入它们以便 webpack 选择它们？

webpack.config.js

const   webpack = require('webpack'),
        path = require('path'),
        config = require('./config.json');

module.exports = {
    entry: './app/app.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.DefinePlugin({
            PRODUCTION: JSON.stringify(false),
            VERSION: JSON.stringify(config.version),
            INTERCOME_ENABLED: JSON.stringify(true),
        })
    ],
};

我的 app.js 的一部分

const angular = require('angular');
window.jQuery = window.$ = require('jquery');
require('../node_modules/jquery-ui-dist/jquery-ui.js');
require('../node_modules/angular-ui-router/release/angular-ui-router.js');
require('../node_modules/bootstrap/dist/js/bootstrap.js');
require('../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js');
require('../node_modules/spin.js/spin.js');
require('../node_modules/autosize/dist/autosize.js');
require('../node_modules/jquery-validation/dist/jquery.validate.js');
require('../node_modules/jquery-validation/dist/additional-methods.js');
require('../node_modules/dropzone/dist/dropzone.js');
require('../node_modules/ng-mask/dist/ngMask.js');
require('../libs/nestable/jquery.nestable.js');
require('../node_modules/angular-sanitize/angular-sanitize.js');
require('../node_modules/ui-select/dist/select.js');
require('../libs/multi-select/jquery.multi-select.js');
require('../node_modules/angular-local-storage/dist/angular-local-storage.js');
require('../node_modules/datatables/media/js/jquery.dataTables.js');
require('../node_modules/drmonty-datatables-colvis/js/dataTables.colVis.js');
require('../node_modules/angular-datatables/dist/angular-datatables.js');
require('../node_modules/angular-datatables/dist/plugins/colvis/angular-datatables.colvis.js');
require('../node_modules/angular-datatables/dist/plugins/tabletools/angular-datatables.tabletools.js');
require('../node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js');
require('../node_modules/angular-xeditable/dist/js/xeditable.js');
require('../node_modules/ng-idle/angular-idle.js');
require('../node_modules/file-saver/FileSaver.js');
require('../node_modules/blob-polyfill/Blob.js');
require('../node_modules/inputmask/dist/jquery.inputmask.bundle.js');
require('../node_modules/clipboard/dist/clipboard.js');
require('../node_modules/mobile-detect/mobile-detect.js');
require('../node_modules/ng-scrollbar/dist/ng-scrollbar.min.js');
require('../node_modules/autofill-event/autofill-event.js');
require('../libs/wizard/jquery.bootstrap.wizard.min.js');
require('../libs/material-admin/App.js');
require('../libs/material-admin/AppForm.js');
require('../libs/material-admin/AppNavigation.js');

require('../node_modules/d3/build/d3.js');
require('../libs/morris/morris.js');
require('webpack-raphael');
require('../libs/select2/select2.js');
require('../libs/toastr/toastr.js');
require('../libs/polyfills/number.js');


(function(){
    /*(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    var codeGA = 'UA-00000000-0';

    if (location.host.indexOf('app.pay2sender.com') >= 0) {
        codeGA = 'UA-85564384-1';
    } else if (location.host.indexOf('app-staging.pay2sender.com') >= 0 ) {
        codeGA = 'UA-85564384-2';
    } else if (location.host.indexOf('app-test.pay2sender.com') >= 0) {
        codeGA = 'UA-85564384-3';
    }else if (location.host.indexOf('imp-perf.puca.com') >= 0) {
        codeGA = 'UA-85564384-4';
    }

    ga('create', codeGA, 'auto');
    ga('send', 'pageview');*/


    if (JSON.parse(INTERCOME_ENABLED)) {
        var intercomAppId = 'qumf3d6m';
        (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;
            s.src='https://widget.intercom.io/widget/'+intercomAppId;
            var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()
    }

}());

(function(){
    var app = angular.module('app',
        [   'ui.router',
            'ui.bootstrap',
            'ui.select',
            'ngSanitize',
            'ngScrollbar',
            'LocalStorageModule',
            'datatables',
            'app.product',
            'app.dashboard',
            'app.profile',
            'app.login',
            'app.clients',
            'app.users',
            'app.baseUrl',
            'app.forgottenPassword',
            'app.resetPassword',
            'app.payments',
            'app.locations',
            'app.filters',
            'templates',
            'app.paymentApi',
            'app.pgwSettings',
            'toastr',
            'app.directives',
            'app.billing',
            'app.utils',
            'xeditable',
            'ngIdle',
            'IntercomAnalytics',
            'app.sessionTime',
            'ngVersionApp',
            'app.developer',
            'app.manageTextTemplates',

            'appMM.profile',
            'appMM.dashboard',
            'appMM.messages',
            'appMM.manage',
            'appMM.users',
            'appMM.clients',
            'appMM.locations',
            'appMM.privacy',

        ])

        .run(function ($rootScope, $state, tokenService, product, uiSelectConfig, editableOptions, editableThemes, Idle, authService, sessionTimeService, $timeout, userService, $window, logoFeatureService) {
            uiSelectConfig.theme = 'select2';
    (the rest of the function here)

模块初始化

angular.module('app.product', [

    ]);
    angular.module('app.product', ['app.config'])
        .provider('product', function (CONST) {
(rest of the function)

标签： javascriptangularjswebpackbuildmodule

javascript - Webpack 构建 Angular.js - 无法实例化模块应用程序

问题描述

解决方案

推荐阅读