CLI创建的角库没有得到自动导入的建议。最后的包js文件包含双角码。

Question

TL;DR

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

我使用CLI来创建角库，并从另一个角应用程序中使用它。但有三个问题。

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

因此，我遵循这个指南为我们的客户端应用程序创建共享库。我的计划是在同一个角度的CLI应用程序名angular-lib.中创建多个库模块。例如,

1. 提供用于显示日期时间的所有组件和管道的模块。
2. 显示装载指示器的所有组件和管道的一种模块。
3. 等等，你给它起了名字。

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

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

这些库中的两个公共模块将是

• DateTimeModule
• LoadingIndicatorModule

我使用

ng build date-time
ng build loading-indicator

dist文件夹用所有必要的包和类型很好地生成。

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

• 吴新主干道
• ng新main2

理想情况下，它们中的每一个都是独立的角度应用程序，并将使用我刚刚创建的库。文件夹结构如下图所示。注意到angular-lib，main和main2应用程序位于父文件夹multiple-projects中。

您可以查看https://github.com/trungk18/multiple-projects 以获得更详细的。

​

​

接下来是主应用程序，使用这个命令(相对路径)在本地安装角库。我们没有向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上配置路径，但没有成功。

这里有什么问题吗？我需要做任何额外的步骤来完成建议吗？

因为我以为打字本会找到所有的d.ts，让我去找它们。但很显然，它没有

2.在手动导入模块之后，我尝试使用模板上的组件。而且，语言服务部门也找不到我的图书馆。

​

​

，所以我有和上面一样的问题。我能做些什么才能让它发挥作用？

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

​

​

​

​

通过使用源地图资源管理器，我看到了角的代码也包括在我的库中。如何才能只从另一个角项目导入库代码，但不包括角代码？

我按照指令将所有库依赖项带到devDependencies中，但是没有不同之处。当您将所有项目都放在一个应用程序中时，CLI指南似乎是有效的。但是对于我们来说，有多个独立的客户端应用程序。因此，我们必须将公共共享库拆分成一个独立的模块，其他应用程序可以使用该模块。

谢谢你的帮助。

Answer 1

您不能运行npm install ../angular-lib/ --save来安装您的libs。

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

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

1. npm安装本地/paths.tgz s.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链路

运行以下命令链接库。

$ cd angular-lib/dist/date-time
$ npm 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 { }