包装Angular 5 UI组件-找不到模块 [英] Packaging Angular 5 UI-Components - Module not found

问题描述

我正在开发UI组件，以便在公司的不同Web项目中使用.我们希望将组件以npm软件包的形式发布在我们的本地存储库中，最好包含源(用于调试).我发现这篇文章关于导出Angular Components并坚持使用它.

I'm developing UI Components for usage in different Web-Projects across the company. We want to publish the components as npm package on our local Repository, ideally with sources included (for debugging). I found this article about exporting Angular Components and stick to it widely.

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

Unfortunately, when I npm install and import the package in another project, the module is not found:

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

src/app/app.module.ts(4,40)中的错误:错误TS2307:找不到模块'@ tid/ui-components'.

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

(ES5/ES6/TS?)模块应放在npm包中的什么位置?以及为此需要哪些配置?

打包前我的目录结构如下:

My directory structure before packaging looks like this:

使用 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打包后，将创建以下结构:

After packaging it with ngc && rollup -c && uglifyjs dist/bundles/tidcomponents.umd.js --screw-ie8 --compress --mangle --comments all --output dist/bundles/tidcomponents.umd.min.js, this structure is created:

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

After npm install, the folder in node_modules looks like this:

推荐答案

此导入可能有效:

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

因为这是您的index和bundles文件夹所在的位置.我相信更改您的package.json就足够了:

Because that's where your index is located and your bundles folder. I believe changing your package.json would be enough:

将您的main，module和typings条目更改为:

Change your main, module and typings entries to:

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

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

You should also add some extra angularCompilerOptions to your tsconfig.json, and perhaps guide ngc to this config:

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

并使用以下文件打包:

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

这篇关于包装Angular 5 UI组件-找不到模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！