我正在try 创建一个Angular 6库,并在Angular 6应用程序中使用它.我把它归结为一个最小的测试用例.(更新:自从Angular 7推出以来,我也try 过.)

ng new workspace # accept the defaults
ng new product # accept the defaults
cd workspace 
ng generate library widgets 
ng build --prod widgets # leave out "--prod" for Angular 7
cd ../product
ng build

一个名为"workspace"的应用程序拥有一个名为"widgets"的库.另一款名为"product"的应用程序是独立的.到目前为止一切都很好.

现在,让我们try 使用"产品"应用程序中的"小部件"库.打开CLI生成的文件product/src/app/app.module.ts.添加两行,如下所示.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { WidgetsModule } from '../../../workspace/dist/widgets'; //  added

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    WidgetsModule // added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在那次更改之后,当我从产品目录运行ng build时,我会从Webpack收到警告.

Date: 2018-07-31T13:13:08.001Z
Hash: 8a6f58d2ae959edb3cc8
Time: 8879ms
chunk {main} main.js, main.js.map (main) 15.9 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.59 MB [initial] [rendered]

WARNING in ../workspace/node_modules/@angular/core/fesm5/core.js
4997:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ../workspace/node_modules/@angular/core/fesm5/core.js
5009:15-102 Critical dependency: the request of a dependency is an expression

"依赖的结果是一个表达式"是什么意思?我做错了什么?

推荐答案

主要的问题不是你为什么会收到这样的警告.你访问图书馆的方式不是理想的方式.让我们研究一种更好的方法[使用Angular 7]和您自己的示例步骤,这从一开始就不会导致这个问题.


第一步:[和你的一样]

ng new workspace # accept the defaults
ng new product # accept the defaults
cd workspace 
ng generate library widgets 
ng build --prod widgets # leave out "--prod" for Angular 7
cd ../product
ng build

第二步:创建一个.tgz库文件

cd ../workspace/dist/widgets/
npm pack
cp widgets-0.0.1.tgz ../../../product/

第3步:在包中添加"widgets"库.json

打开product项目的package.json文件,在devDependencies下添加以下行:

"widgets": "file:./widgets-0.0.1.tgz",

如果您在本地拥有库,则需要执行步骤2和步骤3.否则,如果您的库已打包并发布到npm存储库中,则不需要file:个关键字.您可以像其他依赖项一样提及该版本.


步骤4:安装新添加的库

在产品项目中运行npm install次.


5.使用图书馆

修改app.module.ts文件:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { WidgetsModule } from 'widgets'; // new line

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    WidgetsModule // new line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

第6步:构建产品项目

现在,在产品项目中运行ng build.它将成功运行.

Angular Product Project Build

Typescript相关问答推荐

Typescript对每个属性具有约束的通用类型

为什么ESLint抱怨通用对象类型?

如何修复正在处理类型但与函数一起使用时不处理的类型脚本类型

Angular 信号:当输入信号改变值时,S触发取数的正确方式是什么?

Next.js错误:不变:页面未生成

Material UI / MUI系统:我如何告诉TypeScript主题是由提供程序传递的?

TypeScrip 5.3和5.4-对`Readonly<;[...number[],字符串]>;`的测试版处理:有什么变化?

在分配给类型的只读变量中维护const的类型

AngularJS服务不会解析传入的Json响应到管道中的模型

垫表页脚角v15

为什么我在这个重载函数中需要`as any`?

try 呈现应用程序获取-错误:动作必须是普通对象.使用自定义中间件进行MySQL操作

有没有办法取消分发元组的联合?

TypeScrip-如何自动推断UNION变量的类型

必需的输入()参数仍然发出&没有初始值设定项&q;错误

类型判断数组或对象的isEmpty

在TS泛型和记录类型映射方面有问题

为什么`map()`返回类型不能维护与输入相同数量的值?

如何使用 AWS CDK 扩展默认 ALB 控制器策略?

为什么 Typescript 无法正确推断数组元素的类型?