首页 文章

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

提问于
浏览 次
0

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

我有两件：

  • 使用 yo angular2-library 生成的角度库 .

  • 使用 ng new <library-name> 生成的Angular CLI应用程序 .

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

在LIBRARY中，我跑了：

在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 Dev Tools控制台中收到错误消息：

未捕获错误：模块'AppModule'导入的意外值'[object Object]' . 请添加@NgModule注释 .

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

未捕获错误：模块'AppModule'导入的意外值'SampleModule' . 请添加@NgModule注释 .

不知道从哪里开始 .

angular angular-cli

1 回答

  • 1

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

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

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

    • 如果您使用Angular CLI应用程序来使用库，请确保在使用应用程序（而不是库）的/src/tsconfig.app.json中设置路径映射：
    {
  "compilerOptions": {
    // ...
    // Note: these paths are relative to `baseUrl` path.
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
    }
  }
}
    回复于

相关问题