• 主页
  • 使用外部库的Angular项目不能在使用angular-cli的AOT模式下编译

使用外部库的Angular项目不能在使用angular-cli的AOT模式下编译

我开始了一个新的项目,使用angular-cli 8.1.2生成。我想有一个共享库,用于几个微服务(应用程序)。这个库不应该包含在应用程序文件夹中,它是一个不同的项目,有自己的git。如果我尝试这样做,应用程序不能在aot/production模式下编译,但可以在jit模式下工作。

我想在2个应用程序目录中的2个项目:

/test-lib
/test-app

所以我首先用angular-cli生成lib:

ng new test-lib --create-application=false
(using defaults)
cd test-lib/
ng generate library test-lib --prefix=test
ng build test-lib

这将在/test-lib/projects/test-lib中生成库文件夹和一个项目

现在我生成(第一个)应用程序:

cd ..
ng new test-app
(using defaults)

现在我将lib连接到该应用程序:

将“路径”添加到tsconfig.json:

"paths": {
  "test-lib": [
    "../test-lib/dist/test-lib"
  ],
  "test-lib/*": [
    "../test-lib/dist/test-lib/*"
  ]
}

将导入添加到app.module.ts:

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

import { AppComponent } from './app.component';
import { TestLibModule } from 'test-lib';

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

并将此标记添加到app.component.html中:

<test-test-lib></test-test-lib>

运行"ng serve“现在可以正常工作了。

在文件夹test-app中触发"ng build“失败,并显示:

ERROR in : Unexpected value 'TestLibModule in C:/Users/.../test-lib/dist/test-lib/test-lib.d.ts' imported by the module 'AppModule in C:/Users/.../test-app/src/app/app.module.ts'. Please add a @NgModule annotation.
enter code here

此外,它还报告:

: 'test-test-lib' is not a known element:
1. If 'test-test-lib' is an Angular component, then verify that it is part of this module.
2. If 'test-test-lib' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to 
the '@NgModule.schemas' of this component to suppress this message. ("
</ul>

[ERROR ->]<test-test-lib></test-test-lib>")

我尝试在app.component.ts中导入组件也失败了(找不到)

有没有可能用anglular-cli创建一个库,它以一种简单的方式存在于外部文件夹中?

转载请注明出处:http://www.jxbyjx.net/article/20230427/948455.html