NullInjectorError: Нет поставщика для NgZone при обращении к пользовательскому пакету npm

Question

Недавно я следовал этому руководству, чтобы узнать, как создать угловую библиотеку и опубликовать ее для собственного использования: https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

После упаковки библиотеки и ссылки на нее из моего собственного углового проекта я обнаружил эту ошибку: NullInjectorError: Нет поставщика для NgZone.

Когда я пытаюсь внедрить NgZone в мой контроллер, не ссылаясь на компонент в моей библиотеке, который также внедряет его, мой проект работает просто отлично. Однако, когда я пытаюсь сослаться на компонент библиотеки на мой взгляд, он больше не работает!

Я потратил целый день, пытаясь выяснить это, однако информации об этой ошибке практически нет, и я считаю, что это не имеет ничего общего с NgZone, а скорее с тем, что я упустил.

Я не уверен, какую информацию я должен предоставить, чтобы лучше устранить эту ошибку, поэтому, пожалуйста, не стесняйтесь спрашивать меня.

И моя библиотека, и проект ссылаются на Angular 5.0.0 и zone.js 0.8.12. Вы можете найти мою библиотеку, опубликованную на github, по адресу: https://github.com/lakylekidd/skating-library

Любая помощь будет признательна, она сводит меня с ума!

Заранее спасибо, Билли

Answer 1

Я думаю, я понял, почему это не работает.

Оказывается, у моей библиотеки была зависимость для angular 5.2, а в моем приложении - angular 5.0, поэтому я обновил свое приложение до 5.2. Также, как предложил yurzui, я добавил peerDependencies со всеми библиотеками, которые я использую. Я опубликовал свою библиотеку на нпм и npm install отредактировал это на моем проекте. Работает просто отлично.

Я не уверен на 100% в чем проблема, но после выполнения всех этих шагов проблема исчезла.

Надеюсь, это поможет, если кто-нибудь столкнется с той же проблемой в будущем.

Билли

Answer 2

Потратил много времени на эту проблему:(Надеюсь, это поможет кому-то сэкономить время: https://github.com/angular/angular-cli/issues/8117

Answer 3

Если вы используете веб-пакет в своем проекте, это может быть решено очень легко. Вы можете указать абсолютный путь к вашим текущим node_modules при разрешении модулей.

 resolve: {
            extensions: ['.ts', '.js'],
            modules: [helpers.root('src'),  helpers.root('node_modules')]
        },

По умолчанию webpack использует относительный путь к node_module, это приведет к тому, что npm-связанные пакеты будут использовать свои собственные библиотеки, указанные в их собственных node_modules