我正在尝试创建一个 Angular 6 库并在 Angular 6 应用程序中使用它。我把它归结为一个最小的测试用例。 (更新:因为 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
一个名为“workspace”的应用托管了一个名为“widgets”的库。另一个名为“产品”的应用程序是独立的。到目前为止一切都很好。
现在让我们尝试在“product”应用程序中使用“widgets”库。打开由 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],这首先不会导致该问题。
第 1 步:[与您的相同]
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/
第三步:在package.json中添加“widgets”库
打开product
项目的package.json
文件,在devDependencies
下添加如下行:
"widgets": "file:./widgets-0.0.1.tgz",
如果您在本地有图书馆,则需要执行第 2 步和第 3 步。否则,如果您的库已打包并发布到 npm 存储库中,则您不需要 file:
关键字。您可以像其他依赖项一样提及版本。
第四步:安装新添加的库
在产品项目中运行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 { }
第六步:构建产品项目
现在,在产品项目中运行ng build
。它将成功运行。
关于 Angular 6/7 "the result of a dependency is an expression",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51614615/