Неизвестный элемент — Angular 2 с материалом Angular 2

Как сказано в последней версии (2.0.0-beta.3 цезиевый головоногий (2017 г.) -04-07)) необходимо импортировать MdToolbarModule в модуль, загружающий home.component.

Если модуль home.module, просто загрузите туда MdToolbarModule, вот так:

import { MdToolbarModule } from '@angular/material';

@NgModule({
    imports: [
        ...
        MdToolbarModule, // HERE YOU IMPORT THE TOOLBAR MODULE. IF YOU WANT ONLY THIS MODULE IN YOUR BUILD
        ...
],
...

Это необходимо из-за AOT и Lazy Load. Это единственный способ, которым Angular может удалить ненужный код. Если вы не загрузите модуль в каждый модуль, который в этом нуждается, компилятор никогда не узнает, кто его использует, и ему нужно будет добавить его во все компоненты, даже если это не ленивый компонент.

Причина, по которой вам не нужно загружать MaterialModule в других компонентах, но в app.module, заключается в том, что app.module является вашей точкой входа, и он всегда загружается независимо от того, какой ленивый модуль вы загружаете. Можно сказать, что app.module является отцом каждого модуля, независимо от того, ленив он или нет.

Таким образом, если вы загружаете модуль в app.module с помощью forRoot(), это означает, что вы создали глобальный экземпляр модуля services, и все дочерние компоненты будут иметь доступ к этим службам. По этой причине вам не нужно снова загружать material.module в home.module, потому что MaterialModule используется для загрузки сервисов, используемых Material для соединения компонентов материала. Это все, что делает MaterialModule.

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

Для модулей, загруженных без forRoot(), у вас не будет одноэлементных служб, поэтому вам нужно будет загрузить их в каждый компонент. Все это необходимо для лучшей тряски дерева, когда у вас есть только то, что вам нужно в вашей сборке.

@karns, вы упомянули, что проблема существует в HomeComponent, и я заметил, что в вашем списке импорта есть HomeModule.

Принадлежит ли HomeComponent этому HomeModule?

Если да, то импортировали ли вы MaterialModule в свой HomeModule?

Вам необходимо импортировать MaterialModule (или модуль, который экспортирует MaterialModule) в каждый модуль, который может использовать компоненты Angular Material в своих шаблонах.

Опция 1 :

1. Убедитесь, что вы использовали приведенную ниже команду для установки материала в свое приложение.

   npm install --save @angular/material
   

2. Перейдите в node_modules и проверьте, присутствуют ли эти файлы.

   node_modules/@angular/material/bundles/material.umd.js
   @angular/material/core/theming/prebuilt/indigo-pink.css
   

3. Если есть два вышеуказанных файла,

   • Delete the materials folder
   • Установите его снова
   • Перед установкой проверьте, есть ли он в качестве зависимости в файле package.json.
   • Проверьте сейчас, присутствуют ли указанные выше файлы.

4. На вкладке сети инструментов разработчика убедитесь, что у вас есть, как показано ниже

Вариант 2:

Если вышеуказанное решение не сработало, попробуйте это

1. Включите указанные ниже файлы в index.html

2. В файле config.js удалите строку @angular/material и используйте указанную ниже ссылку cdn.

   '@angular/material': 'https://unpkg.com/@angular/material/bundles/material.umd.js',

ЖИВАЯ ДЕМО, чтобы показать, что ссылка cdn работает

Обновление 1: Плункер теперь работает нормально, вы можете посмотреть на него.

Объяснение для варианта 2 заключается в использовании ссылки cdn, которой не важно, установлен ли у вас node_module или нет, в большинстве случаев это определенно сработает. Если эта ссылка cdn решит вашу проблему. update me Мы попробуем исправить вариант 1 в вашем случае.