Angular CLI - 具有独立 Angular 库的新应用程序

Question

我正在尝试创建一个可重用的组件库，主要是作为熟悉 Angular 世界的练习。我已经为一个遗留应用程序编写了一个小型的独立 Angular 应用程序，所以我对 Angular 很陌生，但我认为我对配置的理解足以做到这一点。显然我还缺少一些东西。

我有两块：

• 使用 yo angular2-library 生成的 Angular 库。
• 使用 ng new <library-name> 生成的 Angular CLI 应用程序。

这些都是干净的（运行各自的生成器后没有变化）。

在图书馆，我跑了：

• npm run build 使用示例模块/组件/等创建/dist 目录
• cd dist && npm link 将 npm 链接到库 as described here in the generator documentation

在 Angular CLI 应用程序中，我运行了：

• npm link --save <library-name>
• 将import {SampleModule} from 'library-name' 添加到app.module.ts
• 在app.module.ts 的导入数组中添加了SampleModule.forRoot()，所以它看起来像[BrowserModule, SampleModule.forRoot()]
• 将<sample-component></sample-component> 添加到app.component.html 模板中
• ng serve -o 编译运行。

Chrome 开发工具控制台出现错误：

未捕获的错误：模块“AppModule”导入的意外值“[object Object]”。请添加@NgModule 注解。

将导入数组更改为[BrowserModule, SampleModule]，我得到：

未捕获的错误：模块“AppModule”导入了意外的值“SampleModule”。请添加@NgModule 注解。

不知道从这里去哪里。

Answer 1

好的，在写这个问题时，我意识到我错过了一个小而关键的步骤。

与其放弃整个问题，我想我会把它留在这里，希望与我做同样事情但没有仔细阅读的其他人可能会受益，因为报告的错误并没有真正描述核心问题。

angular2-library yo 生成器的第 12 步目前是什么：

12. 如果您使用 Angular CLI 应用程序来使用您的库，请确保在您使用的应用程序（而不是您的库）的 /src/tsconfig.app.json 中设置路径映射：

{
  "compilerOptions": {
    // ...
    // Note: these paths are relative to `baseUrl` path.
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
    }
  }
}