首页 文章

如何发布在AoT angular2应用程序中使用的包

提问于
浏览 次
1

我有一个用angular2打字稿编写的代码，这是一个用服务和组件导出的模块

@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中它有错误

错误：模块'AboutModule'导入的意外值'MyModule'

我有几个问题：

  • 如何发布包/ tsconfig中的不同内容"module" = es2015 / systemjs / commonjs

  • 模块publishe类型与如何在angular2中使用包有关 - 即，如果我使用systemjs发布，我可以在angular2 AoT应用程序中使用此包吗？

  • 有没有什么样的最佳实践如何发布angular2共享模块并在diff应用程序中使用它？

angular tsconfig angular2-aot

2 回答

  • 0

    我恳求对实际问题一无所知，但认识到我刚刚阅读的博客文章中的错误信息是出于其他原因 .

    这似乎与需要在npm包中包含* .metadata.json文件有关 .

    https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad#.p7i6p63e8

    回复于
  • 0

    恕我直言，采用AoT还为时尚早 . 我只是在我的项目中尝试过 . 我认为AoT的工具还没有准备好 .

    但是，我想我已经在我的项目中发挥了作用 . 您可以使用相同的设置来使您的工作 .

    这是ngx-clipboard的github

    这个项目实际上非常小，但它显示了如何使用角度和与AoT兼容的第三方库（纯javascript） .

    有很多事情可以扰乱AoT的构建 .

    Webpack，ngTool，angular，Typescript . 我建议你尝试使用我先用过的完全相同的版本 .

    1.使用es2015，因为AoT不接受“要求”

    https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#rollup

    • 我认为这取决于 . 但如果你想让你的包AoT兼容，我认为你最好使用es2015 .

    • 我还没找到 .

    但我发现这个post很有用 .

    回复于

相关问题