Angular CLI - 具有单独角度库的新应用程序

Question

我正在尝试创建一个可重用的组件库，主要是为了熟悉角度世界。我为遗留应用程序编写了一个小的独立角度应用程序，所以我对Angular很新，但我认为我已经很好地理解了这个配置。显然我还在遗漏一些东西。

我有两件事：

• 使用yo angular2-library生成的角化图书馆。
• 使用ng new <library-name>生成的Angular CLI应用程序。

这些都是CLEAN（运行相应的发电机后没有变化）。

在LIBRARY中，我跑了：

• npm run build使用示例模块/组件/ etc
创建/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
• 将SampleModule.forRoot()添加到app.module.ts中的导入数组中，因此看起来像[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

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

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

angular2-library yo生成器的当前步骤12：

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

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