Packaging Angular 5 UI-Components - Module not found

问题

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.

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

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

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

Where should the (ES5/ES6/TS?) module be located in the npm package? And which configuration is required for this?

My directory structure before packaging looks like this:

With 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
  }
}

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:

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

回答1:

Probably this import works:

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

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

Change your main, module and typings entries to:

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

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"
}

and package it using:

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

来源：https://stackoverflow.com/questions/47649905/packaging-angular-5-ui-components-module-not-found

标签

angular

typescript

npm

es6-modules