Блог

У меня есть два отдельных приложения Angular 2, которые оба используют один и тот же компонент. Это привело к дублированию кода, которое мне не нравится. Есть ли способ разместить где-нибудь общий компонент и удаленно загружать их в эти потребительские приложения? Та же идея, что и файлы, размещенные в CDN.

Вы могли бы опубликовать свои компоненты в npm. Это не позволит загружать их удаленно, но вы можете ЛЕГКО скомпилировать их в своем приложении и по-прежнему получать довольно хорошие результаты с точки зрения размера и скорости.

Вы также можете поместить их в модуль с отложенной загрузкой, таким образом, компоненты будут загружены позже.

Чтобы опубликовать компонент в npm, вам необходимо выполнить следующие действия:

1. Создайте свои компоненты
2. В корневом каталоге создайте файл index.ts со следующим экспортом

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

3. Установите Typescript для компиляции .ts в .js

npm install --save-dev typescript

4. В package.json prepublish разделе создать скрипт scripts для компиляции вашего компонента перед публикацией

    "scripts": {
     "prepublish": "tsc"
   }
    

5. Создайте tsconfig.json

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

6. Добавьте информацию о типах в package.json

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

7. Опубликовать в npm с помощью

    npm publish
    

Это запустит компилятор Typescript перед публикацией файлов в npm.

PS: Вы также можете добавить следующие строки в .npmignore файл, чтобы публиковались только типизации, но не исходный код.

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