问题描述
将自己封装的一个组件参考了一些博文发布到npm, 在另一个项目install成功,引入使用typescript会报错,用ng serve 本地运行可以跑起来访问,但用ng build --prod --aot 打包也是报错。(具体错误请查看下图)
问题出现的环境背景及自己尝试过哪些方法
参考了这篇文章:https://www.jianshu.com/p/1f6...;
也对比了ng-zorror-antd的 tsconfig.json写法和 index.ts写法(index.ts主要是声明导出的组件等)
相关代码
发布到npm的项目目录:
主要的文件代码:
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'
你期待的结果是什么?实际看到的错误信息又是什么?
期待的结果就是自己的发布的包能正常使用,错误信息如上述说明。