从Angular 4中的其他包中导入模块 [英] Importing module from a different package in Angular 4

问题描述

这是一个概念性问题.

在Angular和npm上我都是绝对的初学者，所以这当然是一个基本问题，但是我一直到处都是，没有找到答案.

I'm an absolute beginner on both Angular and npm, so this is surely a basic question, but I have been looking all over and haven't found an answer.

在开始一个项目之前，我想做一些概念上的证明. 我想要一个名为Imported的软件包，并在一个名为Importer的软件包中重复使用

I want to do a little proof of concept before starting a project. I want to have a package called Imported and reuse it in a package called Importer

导入程序的package.json已作为依赖项导入:

Importer's package.json has Imported as a dependency:

"dependencies": {
    ...
    "imported": "file:../Imported",
    ...
}

按预期，导入的文件位于Importer的node_modules文件夹中.

Imported is in Importer's node_modules folder, as expected.

我遵循了 Angular关于重用模块的文档.他们描述的示例正是我想要的，只是我想从依赖关系内部做到这一点.

I've followed Angular's documentation on reusing modules. The example they describe is exactly what I want, only that I want to do it from inside a dependency.

所以我已经在Importer的app.module.ts中导入了ImportedAppModule.

So I've imported ImportedAppModule in Importer's app.module.ts.

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


import { AppComponent } from './app.component';
import { ImportedAppModule } from 'imported/src/app/app.module';

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

我也已经在Imported的app.module.ts中导出了该组件:

I've also exported the component in Imported's app.module.ts :

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


import { ImportedAppComponent } from './app.component';


@NgModule({
  declarations: [
    ImportedAppComponent
  ],
  imports: [
    BrowserModule
  ],
  exports: [
    ImportedAppComponent
  ],
  providers: [],
  bootstrap: [ImportedAppComponent]
})
export class ImportedAppModule { }

使用此设置，出现以下错误:

With this setup, I am getting the following error:

../imported/src/app/app.module.ts中的

ERROR模块生成失败:错误: TypeScript中缺少\ imported \ src \ app \ app.module.ts 汇编.请通过文件"确保它在您的tsconfig中 或包含"属性.

ERROR in ../imported/src/app/app.module.ts Module build failed: Error: \imported\src\app\app.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

所以看来我不得不在tsconfig.app.json中包含此依赖项.但是我也读到某个地方，我不必将其包含在其中，而且我必须将其包含在Importer的bootstrap数组中. 我都尝试过，但都没有用，但这很好，配置详细信息不在此问题的范围之内.

So it seemed that I had to include this dependency in tsconfig.app.json. But I also read somewhere that I didn't have to include it there, and that I had to include it in the Importer's bootstrap array. I tried both, none of them worked, but that's fine, the configuration details are out of the scope of this question.

我的问题是，哪一个? 正常的做法是什么?我在正确的轨道上吗?如果是这样，下一步是什么?

My question is, which one is it? What's the normal way to do this? Am I on the right track here? If so, what's the next step?

我尝试在Imported包中使用ng build --aot，并将依赖项添加到Importer的dist文件夹中，但是失败并说它没有package.json，所以我想我可以尝试一下做它jit.不过，我想知道如何使用aot.

I have tried using ng build --aot in the Imported package, and added the dependency to the dist folder in Importer, but it fails and says it doesn't have a package.json, so I thought I might just try to do it jit. Still, I want to know how to do this with aot.

我真的很感谢一些指导. 预先感谢！

I would really appreciate some guidance. Thanks in advance!

推荐答案

您可以使用ng-packagr将库转换为Angular包格式
执行npm install ng-packagr --save-dev

you can use ng-packagr that Transpile your libraries to Angular Package Format
execute npm install ng-packagr --save-dev

请参阅使用Angular CLI和ng-packagr 构建Angular 4组件库.

Refer this Building an Angular 4 Component Library with the Angular CLI and ng-packagr.

这篇关于从Angular 4中的其他包中导入模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！