Angular 4中从不同包导入模块的新手技术求助

嘿，完全懂新手刚碰Angular和npm时摸不着头脑的感觉！咱们一步步把这个包复用的概念验证跑通，别着急～

首先得确认你的Imported包本身是符合Angular可复用模块要求的，这是很多新手容易忽略的前提：

第一步：检查Imported包的配置与结构 #

1. 确保有导出的NgModule
   在Imported包的核心模块里，一定要把你想复用的组件/指令/管道加到exports数组里，不然即使导入了模块也用不了里面的内容：

   // imported/src/app/imported.module.ts
   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   // 引入你要复用的组件
   import { ImportedDemoComponent } from './imported-demo.component';
   
   @NgModule({
     declarations: [ImportedDemoComponent],
     imports: [CommonModule],
     exports: [ImportedDemoComponent] // 重点！必须导出要复用的内容
   })
   export class ImportedModule { }
   

2. 配置package.json的入口字段
   打开Imported包的package.json，确认有正确的入口配置，让Angular能找到编译后的模块文件：

   {
     "name": "imported",
     "version": "0.0.1",
     "main": "dist/imported/bundles/imported.umd.js",
     "module": "dist/imported/fesm2020/imported.mjs",
     "types": "dist/imported/imported.d.ts",
     // 其他字段（比如scripts、dependencies）...
   }
   

3. 编译Imported包
   别忘了在Imported包的根目录执行编译命令，生成可被导入的dist文件：

   ng build
   

第二步：在Importer项目里复用Imported包 #

既然你已经把Imported加到了Importer的package.json依赖里，且它已经在node_modules里，那接下来就简单了：

1. 在Importer的模块中导入ImportedModule
   打开Importer项目的根模块（比如app.module.ts），直接通过包名导入ImportedModule，并加到imports数组里：

   // importer/src/app/app.module.ts
   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   // 直接用包名导入，npm会自动从node_modules找
   import { ImportedModule } from 'imported';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, ImportedModule], // 把ImportedModule加进来
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

2. 在模板中使用Imported包的内容
   现在你可以在Importer的组件模板里直接使用Imported包导出的组件了，比如：

   <!-- importer/src/app/app.component.html -->
   <h1>我是Importer项目</h1>
   <!-- 这里用Imported包中组件的选择器，比如你在ImportedDemoComponent里定义的selector -->
   <app-imported-demo></app-imported-demo>
   

新手常见坑提醒 #

• 忘记在ImportedModule的exports数组里加要复用的内容：这是最常见的，模块导入了但用不了组件，就是因为没导出。
• Imported包没编译：如果直接把未编译的源码放到node_modules，Angular是识别不了的，必须先执行ng build生成dist。
• 导入路径错误：如果package.json的入口字段配置错了，可能会导致找不到模块，这时候可以检查dist文件夹的结构是否和配置路径匹配。

按这个步骤走下来，你的概念验证应该就能顺利跑通啦！如果遇到具体的报错信息，再针对性排查就好～

内容的提问来源于stack exchange，提问作者Lucía