Відповіді:
Після переходу на Angular 9 (випущений сьогодні) я також наткнувся на це питання і виявив, що вони внесли переломну зміну, згадану у відповіді . Я не можу знайти причину, чому вони внесли цю зміну.
У мене є файл material.module.ts, який імпортую / експортую всі компоненти матеріалу (не найефективніший, але корисний для швидкого розвитку). Я пройшов і оновив увесь свій імпорт до окремих папок матеріалів, хоча барель index.ts може бути кращим. Знову ж таки, не впевнений, чому вони внесли цю зміну, але я здогадуюсь, що це стосується ефективності похитування дерев.
Включаючи мій material.module.ts нижче, якщо він допомагає комусь, це надихнуло інших матеріалів, які я знайшов:
ПРИМІТКА . Як уже згадувалося в інших публікаціях блогу, і з мого особистого досвіду будьте обережні, використовуючи розділений модуль, як показано нижче. У моєму додатку є 5 ~ різних функціональних модулів (ліниво завантажені), в які я імпортував свій модульний матеріал. З цікавості я перестав використовувати спільний модуль і замість цього лише імпортував окремі компоненти матеріалу кожен необхідний модуль. Це зменшило розмір мого пакета зовсім небагато, майже на 200 кбіт. Я припускав, що процес оптимізації збірки належним чином скине будь-який компонент, який не використовується моїми модулями, але, здається, це не так ...
// material.module.ts
import { ModuleWithProviders, NgModule} from "@angular/core";
import { MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
import { MatIconRegistry } from '@angular/material/icon';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatRippleModule } from '@angular/material/core';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
@NgModule({
imports: [
MatAutocompleteModule,
MatBadgeModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
MatNativeDateModule
],
exports: [
MatAutocompleteModule,
MatBadgeModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
MatNativeDateModule
],
providers: [
]
})
export class MaterialModule {
constructor(public matIconRegistry: MatIconRegistry) {
// matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
}
static forRoot(): ModuleWithProviders {
return {
ngModule: MaterialModule,
providers: [MatIconRegistry]
};
}
}
Схоже, що в цій темі сказано, що було зроблено розрив:
Компоненти вже не можна імпортувати через "@ angular / material". Використовуйте окремі вторинні вхідні точки, такі як @ angular / material / button.
Оновлення : можу підтвердити, це було проблемою. Після пониження рівня @angular/material@9.0...до цього @angular/material@7.3.2ми могли б вирішити це тимчасово. Зрозуміло, нам потрібно оновити проект для довгострокового вирішення.
ng update @angular/material, воно переміститься та оновить увесь імпорт для вас :)
Це можна вирішити, записавши повний шлях, наприклад, якщо ви хочете включити MatDialogModuleнаступне:
До @ кутовий / матеріал 9.xx
import { MatDialogModule } from "@angular/material";
//leading to error mentionedВідповідно до @ кутовий / матеріал 9.xx
import { MatDialogModule } from "@angular/material/dialog";
//works fine Офіційне посилання на зміну журналу змін: https://github.com/angular/components/blob/master/CHANGELOG.md#material-9
import { MatDialogModule } from '@angular/material/dialog';
import { MatTableModule } from '@angular/material/table';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';А також ng update @angular/materialоновить ваш код та виправить увесь імпорт
Прийнята відповідь правильна, але це не повністю працювало для мене. Мені довелося видалити файл package.lock, запустити "npm install", а потім закрити та відкрити свою візуальну студію. Сподіваюся, що це комусь допоможе
Просто оновіть @ angular / material від 7 до 9 ,
npm uninstall @ angular / material - зберегти
npm встановити @ angular / material @ ^ 7.1.0 - зберегти
ng update @ angular / material
Просто зачекайте і побачите Angular, що робить міграцію наодинці,
Сподіваюся, це комусь допоможе :)
Зробіть npm i -g @angular/material --saveдля вирішення проблеми