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

Question

我正在尝试创建一个可重用的组件库，主要是作为练习来熟悉角度世界。 我已经为旧版应用程序编写了一个小型独立的角度应用程序，因此我绝对不是Angular的新手，但我认为我对配置的理解足够好，可以做到这一点。 显然我还缺少一些东西。

我有两件：

它们都是CLEAN（运行相应的发电机后无变化）。

在图书馆，我跑了：

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

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

我在Chrome Dev Tools控制台中收到一个错误：

意外错误：模块'AppModule'导入了意外的值'[object Object]'。 请添加一个@NgModule批注。

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

未捕获的错误：模块'AppModule'导入了意外的值'SampleModule'。 请添加一个@NgModule批注。

不知道从这里去哪里。

Answer 1

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

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

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

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