使用自己发布到npm的angular组件,编译及打包报错问题?

问题描述

将自己封装的一个组件参考了一些博文发布到npm, 在另一个项目install成功,引入使用typescript会报错,用ng serve 本地运行可以跑起来访问,但用ng build --prod --aot 打包也是报错。(具体错误请查看下图)

clipboard.png

clipboard.png

问题出现的环境背景及自己尝试过哪些方法

参考了这篇文章:https://www.jianshu.com/p/1f6...
也对比了ng-zorror-antd的 tsconfig.json写法和 index.ts写法(index.ts主要是声明导出的组件等)

相关代码

发布到npm的项目目录:

clipboard.png

主要的文件代码:

package.json:

{
  "name": "ngx-common-components",
  "version": "1.0.5",
  "description": "provide some common components",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "files": [
    "index.js",
    "index.d.ts",
    "src/*.js",
    "src/*.d.ts",
    "src/**/*.js",
    "src/**/*.d.ts",
    "README.md",
    "LICENSE",
    "package.json"
  ],
  "keywords": [
    "angular ng"
  ],
  "author": "****",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.0",
    "@angular-devkit/build-angular": "~0.6.0",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.0",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "sourceMap": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": true,
    "lib": ["es2015", "dom"],
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true
  }
}

根目录index.ts:

export * from './src/ngx-common-components.module'
export {LoadingComponent} from './src/loading/loading.component'
export {LoadingModule} from './src/loading/loading.module'

module.ts:

import {CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders, NgModule} from "@angular/core";
import {LoadingModule} from "./loading/loading.module";

export * from './loading'
@NgModule({
    exports: [
        LoadingModule
    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})
export class NgxCommonComponentsModule {
    /**
     * @deprecated Use `NgxCommonComponentsModule` instead.
     */
    static forRoot(): ModuleWithProviders{
        return{
            ngModule: NgxCommonComponentsModule
        }
    }
}

public_api.ts:

export * from './loading.component'
export * from './loading.module'

loading目录下的index.ts:

export * from './public_api'

你期待的结果是什么?实际看到的错误信息又是什么?

期待的结果就是自己的发布的包能正常使用,错误信息如上述说明。

阅读 2.6k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进