如何发布用于 AoT angular2 应用程序的包
How to publish package for use in a AoT angular2 app
我有一个用 angular2 typescript 编写的代码,这是一个用服务和组件导出的模块
@NgModule({
declarations:[
...DECLARATIONS
],
imports: [
CommonModule,
ChartModule
],
exports:[
...DECLARATIONS,
CommonModule,
ChartModule
],
providers:[
AlertErrorHandleService
, AuthenticationModelService
, AuthConnectionBackend
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class MyModule {
static forRoot():ModuleWithProviders {
return {
ngModule: StmsModule,
providers: [AlertErrorHandleService
, AuthenticationModelService
, AuthConnectionBackend
]
};
}
}
我想在不同的 angular2 应用程序中使用这个 MyModule,所以我用这个 tsconfig 和脚本发布了它
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"removeComments": true,
"module": "es2015",
"target": "es5",
"moduleResolution": "node",
"sourceMap": true,
"declaration": true,
"noImplicitAny": false,
"experimentalDecorators": true,
"lib": ["dom", "es2015"],
"outDir": "dist",
"types": [
"node"
]
},
"exclude": [
"node_modules",
"dist",
"scripts"
],
"angularCompilerOptions": {
"genDir": "aot"
}
}
packages.json
"name": "my-lib",
"version": "0.2.1",
"description": "Shared lib angular2",
"main": "index.js",
"typings": "index.d.ts",
"scripts": {
"ngc": "ngc",
"lint": "tslint src/**/*.ts",
"copyPackage":"node ./scripts/copy-package",
"build": "rimraf -rf aot dist && npm run ngc && npm run copyPackage",
"publishPackage": "npm run build && cd dist && npm publish"
},
"keywords": [
"angular",
"angular2"
],
"author": "Haddar Macdasi",
"license": "MIT",
"dependencies": {
"@angular/core": "2.1.1",
"@angular/common": "2.1.1",
"@angular/compiler": "2.1.1",
"@angular/compiler-cli": "2.1.1",
"@angular/http":"2.1.1",
"@angular/platform-browser": "2.1.1",
"rxjs": "5.0.0-beta.12",
"angular2-highcharts": "0.4.1",
"highcharts": "5.0.2"
},
"devDependencies": {
"@types/chai": "^3.4.34",
"@types/node": "^6.0.41",
"typescript": "^2.0.3"
}
在使用 angular2 seed 的种子创建的其他 angular2 应用程序中,我已经安装了软件包,尝试使用它,因为我 运行 该应用程序不在 AOT 中,但在 AoT 中它有错误
Error: Unexpected value 'MyModule' imported by the module 'AboutModule'
我有几个问题:
- 我应该如何发布包/里面有什么不同
tsconfig "module" = es2015 / systemjs / commonjs
- 是模块
发布类型与包的使用方式有关
在 angular2 中 - 即,如果我使用 systemjs 发布,我可以这个包吗
在 angular2 AoT 应用程序中?
- 是否有任何最佳实践
发布一个 angular2 共享模块并在 diff 应用程序中使用它?
恕我直言,采用 AoT 还为时过早。我刚刚在我的项目中尝试过。我认为 AoT 的工具还没有准备好。
但是,我想我已经在我的项目中使用它了。您可以使用相同的设置来实现您的工作。
这里是github ngx-clipboard
这个项目实际上很小,但它展示了如何将第 3 方库(纯 javascript)与 angular 一起使用并与 AoT 兼容。
有很多事情会扰乱 AoT 构建。
Webpack、ngTool、angular、打字稿。我建议您尝试使用我最初使用的完全相同的版本。
1.use es2015 因为 AoT 不接受“require”
https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#rollup
我认为这取决于。但是如果你想让你的包兼容 AoT,我认为你最好使用 es2015。
我还没找到。
但我发现这个 post 很有用。
我承认我对实际问题一无所知,但从博客中看到了错误消息post我只是出于不同的原因阅读。
这似乎与需要在您的 npm 包中包含 *.metadata.json 文件有关。
https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad#.p7i6p63e8
我有一个用 angular2 typescript 编写的代码,这是一个用服务和组件导出的模块
@NgModule({
declarations:[
...DECLARATIONS
],
imports: [
CommonModule,
ChartModule
],
exports:[
...DECLARATIONS,
CommonModule,
ChartModule
],
providers:[
AlertErrorHandleService
, AuthenticationModelService
, AuthConnectionBackend
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class MyModule {
static forRoot():ModuleWithProviders {
return {
ngModule: StmsModule,
providers: [AlertErrorHandleService
, AuthenticationModelService
, AuthConnectionBackend
]
};
}
}
我想在不同的 angular2 应用程序中使用这个 MyModule,所以我用这个 tsconfig 和脚本发布了它
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"removeComments": true,
"module": "es2015",
"target": "es5",
"moduleResolution": "node",
"sourceMap": true,
"declaration": true,
"noImplicitAny": false,
"experimentalDecorators": true,
"lib": ["dom", "es2015"],
"outDir": "dist",
"types": [
"node"
]
},
"exclude": [
"node_modules",
"dist",
"scripts"
],
"angularCompilerOptions": {
"genDir": "aot"
}
}
packages.json
"name": "my-lib",
"version": "0.2.1",
"description": "Shared lib angular2",
"main": "index.js",
"typings": "index.d.ts",
"scripts": {
"ngc": "ngc",
"lint": "tslint src/**/*.ts",
"copyPackage":"node ./scripts/copy-package",
"build": "rimraf -rf aot dist && npm run ngc && npm run copyPackage",
"publishPackage": "npm run build && cd dist && npm publish"
},
"keywords": [
"angular",
"angular2"
],
"author": "Haddar Macdasi",
"license": "MIT",
"dependencies": {
"@angular/core": "2.1.1",
"@angular/common": "2.1.1",
"@angular/compiler": "2.1.1",
"@angular/compiler-cli": "2.1.1",
"@angular/http":"2.1.1",
"@angular/platform-browser": "2.1.1",
"rxjs": "5.0.0-beta.12",
"angular2-highcharts": "0.4.1",
"highcharts": "5.0.2"
},
"devDependencies": {
"@types/chai": "^3.4.34",
"@types/node": "^6.0.41",
"typescript": "^2.0.3"
}
在使用 angular2 seed 的种子创建的其他 angular2 应用程序中,我已经安装了软件包,尝试使用它,因为我 运行 该应用程序不在 AOT 中,但在 AoT 中它有错误
Error: Unexpected value 'MyModule' imported by the module 'AboutModule'
我有几个问题:
- 我应该如何发布包/里面有什么不同 tsconfig "module" = es2015 / systemjs / commonjs
- 是模块 发布类型与包的使用方式有关 在 angular2 中 - 即,如果我使用 systemjs 发布,我可以这个包吗 在 angular2 AoT 应用程序中?
- 是否有任何最佳实践 发布一个 angular2 共享模块并在 diff 应用程序中使用它?
恕我直言,采用 AoT 还为时过早。我刚刚在我的项目中尝试过。我认为 AoT 的工具还没有准备好。
但是,我想我已经在我的项目中使用它了。您可以使用相同的设置来实现您的工作。
这里是github ngx-clipboard
这个项目实际上很小,但它展示了如何将第 3 方库(纯 javascript)与 angular 一起使用并与 AoT 兼容。
有很多事情会扰乱 AoT 构建。
Webpack、ngTool、angular、打字稿。我建议您尝试使用我最初使用的完全相同的版本。
1.use es2015 因为 AoT 不接受“require”
https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#rollup
我认为这取决于。但是如果你想让你的包兼容 AoT,我认为你最好使用 es2015。
我还没找到。
但我发现这个 post 很有用。
我承认我对实际问题一无所知,但从博客中看到了错误消息post我只是出于不同的原因阅读。
这似乎与需要在您的 npm 包中包含 *.metadata.json 文件有关。
https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad#.p7i6p63e8