打包 Angular 5 UI-组件 - 未找到模块

Question

我正在开发 UI 组件以用于整个公司的不同 Web 项目。我们希望将组件作为 npm 包发布到我们的本地存储库中，最好包含源代码（用于调试）。我发现 this article 关于导出 Angular 组件并广泛坚持。

不幸的是，当我 npm install 并在另一个项目中导入包时，找不到模块:

import { TidUIComponentsModule } from '@tid/ui-components';

ERROR in src/app/app.module.ts(4,40): error TS2307: Cannot find module '@tid/ui-components'.

(ES5/ES6/TS?) 模块应该位于 npm 包中的什么位置？这需要哪种配置？

打包前我的目录结构是这样的：

与package.json:

{
   "name": "@tid/ui-components",
   "version": "0.0.1",
   "main": "./bundles/tidcomponents.umd.js",
   "module": "./index.js",
   "typings": "./index.d.ts",
   "peerDependencies": {
      "@angular/core": "5.0.3",
      "@angular/common": "5.0.3",
      "@angular/forms": "5.0.3",
      "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.6"
   },
   "license": "proprietary",
   "publishConfig": {
      "registry": "http://maven/repository/npm-internal/"
   },
   "files": [
      "dist"
   ]
}

index.ts:

export { TidUIComponentsModule } from './src/tid-ui-components.module';
export { ButtonComponent } from './src/components/button/button.component';
export { FormComponent } from './src/components/form/form.component';
export { FormRowComponent } from './src/components/form-row/form-row.component';

rollup.config.js

export default {
   input: 'dist/index.js',
   output: {
      format: 'umd',
      file: 'dist/bundles/tidcomponents.umd.js'
   },
   exports: 'named',
   sourceMap: false,
   name: 'tid.components',
   globals: {
      '@angular/core': 'ng.core',
      '@angular/common': 'ng.common',
      '@angular/forms': 'ng.forms',
      '@ng-bootstrap/ng-bootstrap': 'ngb.ng-bootstrap',
   },
   external: [
      '@angular/core',
      '@angular/common',
      '@angular/forms',
      '@ng-bootstrap/ng-bootstrap'
   ]
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "declaration": true,
    "stripInternal": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "module": "es2015",
    "moduleResolution": "node",
    "paths": {
      "@angular/core": ["node_modules/@angular/core"],
      "@angular/common": ["node_modules/@angular/common"],
      "@angular/forms": ["node_modules/@angular/forms"],
      "@ng-bootstrap/ng-bootstrap": ["node_modules/@ng-bootstrap/ng-bootstrap"]
    },
    "rootDir": ".",
    "outDir": "dist",
    "sourceMap": true,
    "inlineSources": true,
    "target": "es5",
    "skipLibCheck": true,
    "lib": [
      "es2015",
      "dom"
    ]
  },
  "files": [
    "index.ts"
  ],
  "angularCompilerOptions": {
    "strictMetadataEmit": true
  }
}

用ngc && rollup -c && uglifyjs dist/bundles/tidcomponents.umd.js --screw-ie8 --compress --mangle --comments all --output dist/bundles/tidcomponents.umd.min.js打包后，创建了这个结构：

npm install之后，node_modules中的文件夹如下所示：

Answer 1

可能这个导入有效：

import { TidUIComponentsModule } from '@tid/ui-components/dist';

因为那是您的 index 所在的位置和您的 bundles 文件夹。我相信改变你的 package.json 就足够了：

将您的 main、module 和 typings 条目更改为：

"main": "./dist/bundles/tidcomponents.umd.js",
"module": "./dist/index.js",
"typings": "./dist/index.d.ts",

您还应该添加一些额外的 angularCompilerOptions 到您的 tsconfig.json，并可能将 ngc 引导至此配置：

"angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "annotateForClosureCompiler": true,
    "strictMetadataEmit": true,
    "flatModuleOutFile": "index",
    "flatModuleId": "tid-components"
}

并使用以下方式打包：

ngc -p ./tsconfig.json && rollup ... etc

打包 Angular 5 UI-组件 - 未找到模块

Packaging Angular 5 UI-Components - Module not found

npm

typescript

es6-modules

angular