模块“...”导入的意外值“...”。请添加@NgModule 注释

Question

使用 Angular。

步骤：

1. 克隆了这个演示当前 Angular 包标准的简单 UI 库：https://github.com/jasonaden/simple-ui-lib

2. 使用ng new testApp创建了一个新的测试应用

3. npm linksimple-ui-lib/dist

4. npm link simple-ui-lib 在 testApp 中

5. 将示例模块从 simple-ui-lib 导入 testApp：

在 app.module.ts 文件中：

import { BoxModule } from 'simple-ui-lib';

...

@NgModule({
  ...
  imports: [
    ...
    BoxModule
  ]
})

Webpack 编译正常，但我在浏览器中收到此错误并且没有加载：

compiler.es5.js:1540 未捕获错误：意外值“BoxModule” 由模块“AppModule”导入。请添加@NgModule 注解。

我试过了：

• 清除我的 npm 缓存
• 重新安装所有节点模块
• 强制所有 Angular 模块在两个项目中的版本相同
• 检查了两个项目中所有 Angular 模块的版本是否相同
• 检查两个项目中的 TypeScript 版本是否相同
• 使用其他示例模块包代替simple-ui-lib
• 使用相同的设置创建了一个全新的项目
• 将 simple-ui-lib 中使用的 rollup 版本降级为 1 月份的构建版

如果我在控制台记录BoxModule，我可以看到该值存在并且它似乎被注册为@NgModule，所以我对这个错误试图告诉我什么感到困惑。

我在搜索中看到过这个错误，但看起来它们几乎总是由库和主机应用程序之间的版本不匹配引起的。就我而言，版本是相同的。

版本：

• TypeScript：2.2.0
• @angular/cli: 1.0.4
• @angular/common: 4.1.3

有什么想法吗？

更新： 调查更多，看起来这是 @angular/cli 本身的问题。在此处打开了一个错误：https://github.com/angular/angular-cli/issues/6429，但如果您有任何建议，请告诉我。

Answer 1

尝试使用 es6 编译器而不是 es5。 我之前也遇到过类似的问题，修改编译模式解决了这个问题

我还建议您使用最后一个 angular cli 版本并升级到 angular 5