导入angular-intro.js报非模块错误，如何正确导入及引入ngIntroService

报错原因 #

你尝试的两种导入写法报错，是因为angular-intro.js是面向AngularJS（1.x）的封装库，没有遵循ES模块规范做导出，本身不支持通过import语句导入模块内容。

正确使用方法 #

你已经将依赖正确加入了angular.json的scripts配置中，加入该配置后库会直接挂载到全局作用域，无需再通过import导入整个包，根据你使用的框架版本选择对应用法：

场景1：使用AngularJS（1.x版本）

1. 在你的模块声明中直接引入angular-intro作为依赖：

angular.module('你的业务模块名', ['angular-intro'])

2. 需要使用服务的位置直接通过依赖注入调用ngIntroService即可，无需额外导入：

.controller('你的控制器名称', ['ngIntroService', function(ngIntroService) {
  // 示例调用
  ngIntroService.setOptions({
    steps: [
      // 引导步骤配置
    ]
  })
  ngIntroService.start()
}])

如果是TypeScript项目出现类型不存在的报错，可在src目录下新建typings.d.ts文件，添加如下声明即可：

declare var ngIntroService: any;

场景2：使用Angular 2+（2及以上的新版Angular）

angular-intro.js仅兼容AngularJS 1.x，不支持新版Angular，你可以直接使用已经导入成功的原生intro.js即可，无需使用该封装库，用法示例：

import * as introJs from 'intro.js/intro';

@Component({
  // 你的组件配置
})
export class 你的组件类名 {
  // 触发引导的方法示例
  startUserGuide() {
    introJs().setOptions({
      steps: [
        // 引导步骤配置
      ]
    }).start()
  }
}

内容的提问来源于stack exchange，提问作者C0mpl3x