itsource

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

mycopycode 2023. 4. 27. 22:21
반응형

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

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 9(오늘 출시)로 업그레이드한 후, 이 문제에도 부딪혔고, 답변에 언급된 깨짐 변경을 했다는 것을 알게 되었습니다.저는 그들이 왜 이런 변화를 일으켰는지 이유를 찾을 수 없습니다.

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

아래의 material.module.ts를 포함하여 다른 material 모듈에서 영감을 얻었습니다.

참고: 다른 블로그 게시물에서 언급했듯이, 제 개인적인 경험을 통해, 아래와 같은 공유 모듈을 사용할 때 주의하십시오.내 앱에 재료 모듈을 가져온 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<MaterialModule> {
        return {
            ngModule: MaterialModule,
            providers: [MatIconRegistry]
        };
    }
}

업데이트: 업데이트된 솔루션은 아래의 Jeff Gilliland의 답변을 확인하십시오.

이 스레드에 따르면 브레이크 변경이 발행된 것 같습니다.

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

업데이트: 확인할 수 있습니다. 이것이 문제였습니다.다운그레이드 후@angular/material@9.0...@angular/material@7.3.2우리는 이것을 일시적으로 해결할 수 있습니다.장기적인 해결책을 위해 프로젝트를 업데이트해야 할 것 같습니다.

이 문제는 전체 경로를 작성하여 해결할 수 있습니다. 예를 들어, 다음을 포함하려면MatDialogModule다음을 수행합니다.

@angular/material 9.x.x 이전 버전

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

@각도/소재 9.x.x에 따름

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

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

❌ 금지:

// old code that breaks
import { MatDialogModule,
  MatInputModule,
  MatButtonModule} from '@angular/material';

✅ 작업:

// new code that works
import { MatDialogModule } from '@angular/material/dialog';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';

ℹ 이유:

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

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';

@angular/material폴더 구조가 변경되었습니다.이제 각 폴더의 모든 모듈을 사용해야 합니다.material폴더

예:

import { MatDialogModule } from "@angular/material";

이제 로 변경됨

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

다음을 확인하여 모듈에 적합한 경로를 찾을 수 있습니다.

https://material.angular.io/components/categories

필요한 모듈의 API 탭으로 이동하여 다음과 같은 올바른 경로를 찾기만 하면 됩니다.1

일반 디렉토리를 통해 (Angular 9에서) 구성 요소를 더 이상 가져올 수 없습니다.

다음과 같은 지정된 구성 요소 경로를 추가해야 합니다.

import {} from '@angular/material';

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

@angular/material을 7에서 9로 업데이트하기만 하면 됩니다.

npm 제거 @install/material --저장

npm 설치 @px/material@^7.1.0 --저장

ng 업데이트 @syslog/material

Angular 혼자서 마이그레이션을 수행하는 것을 기다려 보십시오.

누군가에게 도움이 되길 바랍니다 :)

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

먼저 "ng add @angular/material 7.3..."을 사용하여 각도 버전을 다운그레이드해 보십시오.0" 그 후에 제 경우 오류가 사라졌는지 확인한 후에 이 ng 업데이트 @angular/material을 사용합니다. 각도 9 또는 10을 사용하는 경우에는 'angular/material/input'에서 이 가져오기 {MatInputModule}과 같은 코드를 작성해야 합니다. 당신에게 효과가 있기를 바랍니다.

Accepted Answer는 맞지만, 저에게는 제대로 작동하지 않았습니다.나는 패키지를 삭제해야 했습니다.파일을 잠그고 "npm 설치"를 다시 실행한 다음 내 비주얼 스튜디오를 닫고 다시 엽니다.이것이 누군가에게 도움이 되기를 바랍니다.

Angular 11에서 명령을 추가하는 경우에도 이 문제가 계속 발생합니다.

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatButtonModule } from '@angular/material/button';

일단 해결했습니다.그러나 Angular CLI를 통해 ngular add @angular material의 바로 가기를 사용할 수 있어야 합니다.

저는 앵귤러 버전 11에서도 같은 문제에 직면했습니다.다운그레이드 각도/재료 버전 작업

저는 또한 최신 버전의 @angular/material, 즉 "^9.2.3"에서도 동일한 문제에 직면하고 있었습니다. 그래서 저는 이에 대한 해결책을 찾았습니다.node_modules 내부의 @angular/material 폴더로 이동하면 파일 명명 index.d.ts를 찾을 수 있으며, 이 파일에서 아래 코드를 붙여넣습니다.인덱스 파일을 변경하면 @angular/material의 가져오기 명령문을 사용하여 모듈을 직접 가져올 수 있습니다. (P.S. 아래 명령문 중 하나에 오류가 발생하면 이에 대해 설명해 주십시오.)

export * from '@angular/material/core';
export * from '@angular/material/icon';
export * from '@angular/material/autocomplete';
export * from '@angular/material/badge';
export * from '@angular/material/bottom-sheet';
export * from '@angular/material/button';
export * from '@angular/material/button-toggle';
export * from '@angular/material/card';
export * from '@angular/material/checkbox';
export * from '@angular/material/chips';
export * from '@angular/material/stepper';
export * from '@angular/material/datepicker'
export * from '@angular/material/dialog';
export * from '@angular/material/divider';
export * from '@angular/material/esm2015';
export * from '@angular/material/form-field';
export * from '@angular/material/esm5';
export * from '@angular/material/expansion';
export * from '@angular/material/grid-list';
export * from '@angular/material/icon';
export * from '@angular/material/input';
export * from '@angular/material/list';
export * from '@angular/material/menu';
export * from '@angular/material/paginator';
export * from '@angular/material/progress-bar';
export * from '@angular/material/progress-spinner';
export * from '@angular/material/radio';
export * from '@angular/material/stepper';
export * from '@angular/material/select';
export * from '@angular/material/sidenav';
export * from '@angular/material/slider';
export * from '@angular/material/slide-toggle';
export * from '@angular/material/snack-bar';
export * from '@angular/material/sort';
export * from '@angular/material/table';
export * from '@angular/material/tabs';
export * from '@angular/material/toolbar';
export * from '@angular/material/tooltip';
export * from '@angular/material/tree';

도npm i -g @angular/material --save

언급URL : https://stackoverflow.com/questions/58594311/angular-material-index-d-ts-is-not-a-module

반응형

'itsource' 카테고리의 다른 글

Windows 8의 Metro 앱은 동일한 컴퓨터의 백엔드 데스크톱 앱과 어떻게 통신합니까?  (0) 2023.04.27
사용자 지정 오류 모드="Off"  (0) 2023.04.27
마우스 이벤트 전파 중지  (0) 2023.04.27
패널 또는 플레이스홀더 사용  (0) 2023.04.22
"sh" 또는 "bash" 명령을 사용하지 않고 셸 스크립트를 실행하려면 어떻게 해야 합니까?  (0) 2023.04.22

'itsource'의 다른글

  • 현재글@module/material/index.d.ts'는 모듈이 아닙니다.

관련글

댓글

티스토리툴바