Question

我有两个单独的Angular 2应用，它们都使用完全相同的组件。这导致代码重复，我不喜欢。是否有人在某处托管公共组件并在这些消费者应用程序中远程加载它们？与CDN托管文件的想法相同。

Answer 1

您可以在npm上发布您的组件。这不会远程加载它们，但你可以在你的应用程序中进行AOT编译，并且在大小和速度方面仍然有相当不错的结果。

您也可以将它们放入延迟加载的模块中，这样组件将在以后加载。

要将组件发布到npm，您需要执行以下操作：

创建您的组件
在根目录下，使用以下导出

export * from './src/mycomponent.component';

安装Typescript以将.ts编译为.js

npm install --save-dev typescript

在package.json prepublish下创建一个scripts脚本，以便在发布前编译您的组件
```
"scripts": {
  "prepublish": "tsc"
}
```

创建tsconfig.json

{
    "compilerOptions": {
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "ES5",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "declaration": true
    },
    "files": [
        "mycomponent.component.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

将输入信息添加到package.json

"typings": "./mycomponent.component.d.ts",

使用
在npm上发布
```
npm publish
```

在将文件发布到npm之前，这将运行Typescript编译器。

PS：您可能还想将以下行添加到.npmignore文件中，因此只有类型会被发布，而不是来源。

# Ignored files
*.ts
!*.d.ts

我可以创建一些常见的Angular 2组件（ts，html文件）并将它们托管在CDN中以在多个Angular应用程序中使用它们吗？

1 个答案: