Angular CLI 创建的库没有得到自动导入建议。最终捆绑包 js 文件包含双 Angular 代码

Question

TL;DR

源代码：https://github.com/trungk18/multiple-projects

我使用 CLI 创建了 Angular 库并从另一个 Angular 应用程序使用它。但是遇到了三个问题。

为什么图书馆的自动建议不起作用？
模板化建议的语言服务也不行，有什么问题吗？
如何从库中排除Angular的代码？

所以，我正在按照此 guide 为我们的客户端应用程序创建共享库。我的计划是在同一个 Angular CLI 应用程序名称 angular-lib 中创建多个库模块。例如，

提供显示日期时间的所有组件和管道的模块
显示加载指示器的所有组件和管道的模块
以此类推，你给它起的名字

我使用以下命令创建了这两个提到的库。

ng new angular-lib --create-application=false
cd angular-lib
ng generate library date-time 
ng generate library loading-indicator

这些库中的两个 public 模块将是

日期时间模块
LoadingIndicatorModule

我使用

构建了两个库

ng build date-time
ng build loading-indicator

dist 文件夹生成得很好，包含所有必要的包和类型。

我还使用 ng new 命令创建了两个应用程序。

ng 新主
ng 新 main2

理想情况下，它们中的每一个都将是一个独立的 Angular 应用程序，并将使用我刚刚创建的库。文件夹结构显示如下图。注意到 angular-lib、main 和 main2 应用程序在同一个父文件夹中多个项目

您可以查看source code了解更多详情

我继续主应用程序，使用此命令（相对路径）在本地安装 angular-lib。我们没有将包发布到 npm 的计划，所以我想先在本地进行测试。

npm install ..\angular-lib\ --save

它安装得很好，package.json 也更新了。

{
  "name": "main",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@angular/core": "~7.2.0",    
    "angular-lib": "file:../angular-lib"
  }
}

问题就是从那里出现的。

1. 我继续 app.module.ts 导入我的 DateTimeModule 库。我输入 DateTime 并在 VSCode 上执行 Ctrl + Space，但根本没有任何建议。即使我输入全名 DateTimeModule，仍然没有导入建议。

但是，当我尝试使用 angular-lib/dist/datetime 的路径手动导入时，VSCode 找到了模块。

我确实尝试在 tsconfig.json 上配置路径，但没有成功。

这里可能出了什么问题？我是否需要执行任何额外步骤才能完成建议？

因为我认为 Typescript 会尝试找到所有 d.ts 并让我查找它们。但显然，它没有

2. 手动导入模块后，我试图使用模板上的组件。而且，语言服务无法以某种方式找到我的图书馆。

所以我和上面的问题一样。我该怎么做才能让它发挥作用？

3. 很公平，可能有问题，但构建成功。我打开应用程序，lib 组件已按预期加载。但我注意到我的应用程序的包大小从 3.7mb 增加到 5.3mb。

通过使用 source map explorer，我看到 Angular 的代码也包含在我的库中。 我如何才能只从另一个 Angular 项目导入库代码，而排除 Angular 代码？

我按照说明将所有库依赖项都引入了 devDependencies，但没有什么不同。当您将所有项目都放在一个应用程序中时，CLI guide 似乎有效。 但对我们来说，有多个独立的客户端应用程序。所以我们必须将公共共享库拆分为一个独立的模块，供其他应用程序使用。

感谢您的帮助。

Answer 1

您无法运行 npm install ../angular-lib/ --save 安装您的库。

因为这会将 angular-lib/node_modules 文件复制到 main/node_modules/angular-lib/node_modules，这就是为什么您的捆绑文件中有两个 angular 模块的原因。

有3种方法可以做同样的事情，你可以选择你喜欢的一种：

1. npm 安装 [local/paths].tgz

运行下面的命令来打包你的库。

$ cd angular-lib/dist/date-time
$ npm pack

在您的主项目中安装包。

$ cd main
$ npm i ../angular-lib/dist/date-time/date-time-0.0.1.tgz

2。 npm link

运行以下命令 link 你的图书馆。

$ cd angular-lib/dist/date-time
$ npm link

Link 它在主项目中。

$ cd main
$ npm link date-time

3。配置路径

在您的 main/tsconfig.json 文件中添加以下配置。

{
    "paths": {
      "date-time": ["../angular-lib/dist/date-time/"],
      "date-time/*": ["../angular-lib/dist/date-time/*"]
    }
}

然后像这样使用它：

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
...
import { DateTimeModule } from 'date-time';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    DateTimeModule
  ]
})
export class AppModule { }

Angular CLI 创建的库没有得到自动导入建议。最终捆绑包 js 文件包含双 Angular 代码

Angular library created by CLI doesn't get auto import suggestion. Final bundle js file included double Angular code

typescript

angular

angular-library