如何在 ES6 中导入名称中带有连字符的 angularjs 模块答案

【问题标题】：how to import angularjs module which has hyphens in its name in ES6如何在 ES6 中导入名称中带有连字符的 angularjs 模块
【发布时间】：2018-11-28 14:42:02
【问题描述】：

我正在尝试在我的 angularjs 应用程序中将这个 md-steppers npm 包与 webpack 一起使用，但遇到了困难。 angular-cache-buster npm 包也会发生这种情况

所以，我通过 npm 安装它并使用以下导入语句

import mdSteppers from 'md-steppers';

并将其添加到 angularjs DI 中，如下所示

angular.module('myapp', [ mdSteppers ]

我收到如下所示的错误

Uncaught Error: [$injector:modulerr] Failed to instantiate module bolt due to:
Error: [$injector:modulerr] Failed to instantiate module {} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
http://errors.angularjs.org/1.5.5/ng/areq?p0=module&p1=not%20a%20function%2C%20got%20Object
    at eval (webpack:///./node_modules/angular/angular.js?:68:12)
    at assertArg (webpack:///./node_modules/angular/angular.js?:1880:11)
    at assertArgFn (webpack:///./node_modules/angular/angular.js?:1890:3)
    at eval (webpack:///./node_modules/angular/angular.js?:4573:11)
    at forEach (webpack:///./node_modules/angular/angular.js?:322:20)
    at loadModules (webpack:///./node_modules/angular/angular.js?:4548:5)....

我检查了这个 npm 包的模块名称，如下所示

angular.module('md-steppers', [
  'material.core',
  'material.components.icon']);

/**
 * @ngdoc directive
 * @name mdStep
 * @module md-steppers
 *
 * @restrict E

非常感谢任何帮助。谢谢

【问题讨论】：

标签： angularjs webpack ecmascript-6 import

【解决方案1】：

尝试以下方法：

import {name as mdStepper} from 'md-steppers';
angular.module('myapp', [mdSteppers]);

【讨论】：

它不起作用。我仍然看到我提到的上述错误

【解决方案2】：

此包中没有任何导出的模块。
所以，你只能这样使用它：

import angular from 'angular';    
import mdStepper from 'md-steppers';

angular.module('myapp', ['md-steppers']);

【讨论】：

它不会抛出任何错误，但也不允许在角度 DI 中有字符串。我的代码编辑器还将导入语句显示为未使用，因为我没有在您的导入语句中使用 mdStepper。
它只允许字符串数组。你可以在这里看到它docs.angularjs.org/api/ng/function/angular.module - !Array.<string>=
是的，没有使用 mdStepper，但它的注册需要导入。你可以写import 'md-steppers';