@ angular / material / index.d.ts '는 모듈이 아닙니다

40

Angular 8에서 앱을 빌드하는 동안 다음 오류가 발생합니다.

app/modules/admin-module/pages/editor/editor.component.ts:6:27 - error TS2306: 
File ...node_modules/@angular/material/index.d.ts' is not a module.
angular  angular-material 
— ForestG
소스

답변:

87

Angular 9 (오늘 출시)로 업그레이드 한 후에도이 문제가 발생 하여 답변에 언급 된 주요 변경 사항이 있음을 알았습니다 . 그들이 왜 이런 변화를했는지 이유를 찾을 수 없습니다.

모든 재료 구성 요소를 가져 오기 / 내보내기하는 material.module.ts 파일이 있습니다 (가장 효율적이지 않지만 빠른 개발에 유용합니다). index.ts 배럴이 더 나을 수도 있지만 모든 가져 오기를 개별 재료 폴더로 가져 와서 업데이트했습니다. 다시 한 번, 왜 그들이 이런 변화를했는지 확실하지 않지만, 그것이 나무를 흔드는 효율성과 관련이 있다고 생각합니다.

누군가를 도울 수 있도록 아래에 material.module.ts를 포함 시키면 내가 찾은 다른 재료 모듈에서 영감을 얻었습니다.

참고 : 다른 블로그 게시물에서 언급하고 개인적인 경험을 바탕으로 아래와 같이 공유 모듈을 사용할 때주의하십시오. 재료 모듈을 가져온 응용 프로그램에 5 ~ 다른 기능 모듈 (게으른로드)이 있습니다. 호기심 때문에 공유 모듈 사용을 중단하고 각 기능 모듈에 필요한 개별 재료 구성 요소 만 가져 왔습니다. 이것은 내 번들 크기를 거의 200kb 줄였습니다. 빌드 최적화 프로세스가 내 모듈에서 사용하지 않는 모든 구성 요소를 올바르게 삭제한다고 가정했지만 그렇지 않은 것 같습니다 ...

// 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]
        };
    }
}
— 제프 길 릴랜드
소스
1
업데이트에 감사드립니다
— Jimmy Kane
2
각도 8을 9로 업그레이드 한 후에도 같은 문제가 발생했습니다. 솔루션이 효과적이었습니다. 이것은 실제로 업그레이드 된 버전에 대한 솔루션을 제공하기 때문에 내 의견으로는 받아 들여야합니다. 이러한 오류로 인해 버전 9를 다시 8로 다운 그레이드하면 문제에 대한 해결책으로 받아 들여서는 안됩니다. 공유해 주셔서 감사합니다!
— 오모 스탄
1
다음은 모두 각도 / 코어가 아닌 재료 / 코어에서 비롯된 것입니다.
— SwissCoder
1
좋은 캐치, 내 서둘러에서 MatNativeDateModule을 잘못된 가져 오기에 넣었습니다 :), 대답으로 수정했습니다
— Jeff Gilliland
1
@ MikeGledhill은 개발중인 많은 것들과 마찬가지로 많은 것들이 난해합니다. 사용 중단 경고 또는보다 구체적인 오류 메시지를 제공하는 솔루션을 구현하여 수정 방법을 알아야합니다. 이 문제를 해결하는 방법을 알 수있는 유일한 다른 방법은 Typescript & Angular를 사용한 경험이 있고 ".d.ts"파일 형식에 오류가있을 때 발생 가능한 문제를 아는 것입니다. 그 지식은 보통 몇 시간의 좌절에서 비롯됩니다.이 "도메인 지식"을 다른 사람들과 공유 할 수있는 더 좋은 방법이 필요합니다!
— Jeff Gilliland
37

이 스레드 가 주요 변경 사항이 발행 된 것처럼 보입니다 .

"@ angular / material"을 통해 더 이상 구성 요소를 가져올 수 없습니다. @ angular / material / button과 같은 개별 보조 진입 점을 사용하십시오.

업데이트 : 이것이 문제임을 확인할 수 있습니다. 다운 그레이드 이후 @angular/material@9.0...에 @angular/material@7.3.2우리는 일시적으로이 문제를 해결 할 수있다. 장기 솔루션을 위해 프로젝트를 업데이트해야한다고 생각합니다.

— ForestG
소스
1
다운 그레이드를 수행 한 후을 (를) 수행하면 ng update @angular/material모든 가져 오기가 마이그레이션되고 업데이트됩니다. :)
— Nicolas
24

예를 들어 MatDialogModule다음 을 포함하려는 경우 전체 경로를 작성하여 해결할 수 있습니다 .

@ angular / material 9.xx 이전

import { MatDialogModule } from "@angular/material";
//leading to error mentioned

@ angular / material 9.xx에 따라

import { MatDialogModule } from "@angular/material/dialog";
//works fine

공식 변경 로그 변경 변경 참조 : https://github.com/angular/components/blob/master/CHANGELOG.md#material-9

— 쿠시 라발
소스
이것은 나를 위해 일했습니다.
— Shinoy Shaji
나도 일 했어. 고마워
— Sidhartha Shankar
8

일반 디렉토리를 통해 컴포넌트를 더 이상 가져올 수 없습니다 (Angular 9에서).

당신은 같은 지정된 구성 요소 경로를 추가해야합니다

import {} from '@angular/material';

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

— 알리 아쉬 라프
소스
5 
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';
— Владимир
소스
StackOverflow에서 @ Владимир를 환영합니다.```(공백없이````javascript)로 언어 코드를 추가하고 닫으면 읽는 데 정말 도움이 될 것입니다. 자세한 내용은 stackoverflow.com/help/how-to-answer 를 참조하십시오 . 감사합니다. 계속 기여
— Rajan
여보세요! 이 코드가 문제를 해결하는 방법과 이유에 대한 설명 을 포함 하여 질문을 해결할 수는 있지만 게시물의 품질을 향상시키는 데 도움이되며 더 많은 투표를 할 수 있습니다. 지금 질문하는 사람이 아니라 독자들에게 질문에 대답하고 있음을 기억하십시오. 제발 편집 설명을 추가하고 제한 및 가정이 적용 무엇의 표시를 제공하는 답변을.
— 브라이언
이 코드는 매우 훌륭하지만 설명하면 좋을 것입니다. 오델 나, 야 네 스모그 paniat.
— MAF 박사
2

또한 ng update @angular/material코드를 업데이트하고 모든 가져 오기를 수정합니다.

— Sivuyile TG 마구 티와
소스
package.json 및 package-lock.json 만 업데이트합니다. 코드에서 아무 것도 변경하지 않음
— Joel K Thomas
1
방금 7에서 9로 업그레이드했는데 실제로 수입품을 수정했습니다.
— Tobias Stangl
당신은 내 하루를 구 했어요 감사합니다 !!!
— 니콜라스
0

수락 된 답변은 정확하지만 완전히 작동하지 않았습니다. package.lock 파일을 삭제하고 "npm install"을 다시 실행 한 다음 Visual Studio를 닫았다가 다시 열어야했습니다. 이것이 누군가를 돕기를 바랍니다.

— 겁쟁이 카바나 흐
소스
0

그냥 갱신 @에서 각도 / 재료 (7) 에 (9) ,

npm uninstall @ angular / material --save

npm install @ angular / material @ ^ 7.1.0 --save

ng 업데이트 @ 각도 / 재료

Angular가 마이그레이션을 혼자 수행하는 것을보고

그것이 누군가를 돕기를 바랍니다 :)

— 니콜라스
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.