오류 NG6002: AppModule의 NgModule.imports에 표시되지만 NgModule 클래스로 확인할 수 없습니다.

오류 NG6002: AppModule의 NgModule.imports에 표시되지만 NgModule 클래스로 확인할 수 없습니다.

파이어스토어를 처음 사용했는데 이 오류가 발생합니다.제가 조사한 바로는 아이비의 문제인 것 같습니다.저는 다른 답변에 따라 제가 가리키는 방향인 tsconfig.app.json을 수정한 경험이 별로 없습니다.

원래 프로젝트에서 수정할 수 있었던 것은 튜토리얼을 따르기 위해 처음에 했던 5 대신 Angular Fire 6를 사용하는 것뿐이었습니다.

여기 소포가 있습니다.json:

{
  "name": "language",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.1",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "~9.0.1",
    "@angular/compiler": "~9.0.1",
    "@angular/core": "~9.0.1",
    "@angular/fire": "^6.0.0-rc.1",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~9.0.1",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "~9.0.1",
    "@angular/platform-browser-dynamic": "~9.0.1",
    "@angular/router": "~9.0.1",
    "firebase": "^7.8.2",
    "rxjs": "~6.5.4",
    "rxjs-compat": "^6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.2",
    "@angular/cli": "~9.0.2",
    "@angular/compiler-cli": "~9.0.1",
    "@angular/language-service": "~9.0.1",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.7.5",
    "@angular-devkit/architect": "^0.900.0-0 || ^0.900.0",
    "firebase-tools": "^7.12.1",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1"
  }
}

각진.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "language": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/language",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "language:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "language:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "language:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "language:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "language:serve:production"
            }
          }
        },
        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {}
        }
      }
    }
  },
  "defaultProject": "language"
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
  
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

감사합니다!

Server에 되지 않았습니다.node ng serve 시작하면 됩니다.@NgModule app.module.ts

는 이오는다구성요선추때표다니시됩에 구성 할 때 됩니다.imports: []에 declarations: [] 예: 예:

declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  AppRoutingModule,
  SomeComponent <-----------wrong
],

이 오류는 제가 수입하는 bonehead 실수를 했을 때 발생했습니다.MatSnackBar에 MatSnackBarModuleapp.module.ts.

다음을 추가하여 실수했습니다.service안으로imports 대신 providersvmdk

@NgModule({
  imports: [
    MyService // wrong here
  ],
  providers: [
    MyService // should add here
  ]
})
export class AppModule { }

Angular추가해야 한다고 합니다.Injectables안으로providersvmdk

문서에 따라 아이비를 탈퇴하여 수정했습니다.

https://angular.io/guide/ivy

tsconfig.app.json을 변경하여 Ivy에서 제외합니다.

"enableIvy": false

프로젝트에서 @NgModule을 변경/업데이트할 때 프로젝트가 컴파일되지만 변경 내용이 반영되지 않는 경우가 있습니다.따라서, 한 번 다시 시작하여 얻지 못할 경우 기대되는 결과를 얻으십시오. ng serve

이것은 나에게 도움이 됩니다.

ng 서버 중지

패키지 다시 설치

npm install your-package-name

모두 다시 실행

ng serve

내 실수:나는 그것을 놓치고 있었습니다.Module파트, 제가 썼습니다.

import { MatPaginator } from '@angular/material/paginator';

대신에

import { MatPaginatorModule } from '@angular/material/paginator';

내 모듈에서.

잘못된 가져오기를 사용하는 경우(예: 자동 가져오기 사용)에도 이러한 문제가 발생할 수 있습니다.MatTimePickerModule을 예로 들어 보겠습니다.그러면 질문에 설명된 것과 유사한 오류 메시지가 표시됩니다.

import { NgxMatTimepickerModule } from '@angular-material-components/datetime-picker/lib/timepicker.module';

대신 이것은

import { NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';

제 경우에는 "strictTemplates"를 false로 다시 설정하여 이 문제를 해결했습니다.tsconfig.json

{
  "compilerOptions": {
    // ...
  },
  "angularCompilerOptions": {
    "strictTemplates": false
  }
}

이전에 V Studio 팝업이 표시되지 않도록 하기 위해 이 옵션을 true로 설정한 적이 옵션은 다음과 같습니다.

저는 Ubuntu 밑에서 일하고 있었습니다.

ng와 함께 sudo를 사용하면 오류가 사라졌습니다.

sudo ng build
sudo ng serve

더 나은 방법은 다음 명령을 사용하여 현재 사용자에게 현재 폴더에 대한 필요한 권한을 부여하는 것입니다.

sudo chown -R `whoami` ./

이렇게 하면 sudo 없이 명령을 실행할 수 있습니다.

캐시 지우기 시도

1. npm cache clean --force
2. npm install

이것은 나에게 효과가 있습니다.

1. ng 서버 중지(ctrl+c)

2. 다시 실행

   npm start / ng serve --open
   

는 이문는다해추다결니를 추가하여 입니다.postinstall에 있는 아래 package.json.

이것은 오후 설치 후에 실행됩니다.

"scripts": {
   "postinstall": "ngcc"
}

에 를 합니다.npm install

이것은 Angular 9+로 업그레이드할 때 사용할 수 있습니다.

앵귤러 앱 디렉터리에 문제가 있었기 때문에 우분투에서 같은 문제에 직면했습니다.rootㅠㅠ. 을 변경하여 소유권을 로컬 사용자로 변경하여 문제를 해결했습니다.

$ sudo -i
$ chown -R <username>:<group> <ANGULAR_APP>
$ exit 
$ cd <ANGULAR_APP>
$ ng serve

가져오는 중이었습니다.mat-list입니다.

import { MatList } from "@angular/material/list";
@NgModule({
  exports: [
    MatList,
  ]
})

수출입 신고서에 '모듈' 접미사를 붙이는 것을 잊었습니다.다음은 문제를 해결했습니다.

import { MatListModule } from "@angular/material/list";
@NgModule({
  exports: [        
    MatListModule, // <-- Add 'Module' suffix here!
  ]
})

나를 위해 일하세요.

각진.json

"aot": false

저를 위해 수정된 것은 각진 재료와 어댑터의 버전을 다른 각진 모듈의 가장 낮은 버전과 일치시키는 것이었습니다.그런 다음 다시 설치하고 다시 실행합니다.

    "@angular-devkit/schematics": "^10.1.2",
    "@angular/animations": "^10.1.2",
    "@angular/cdk": "^10.2.1",
    "@angular/common": "10.1.2",
    "@angular/compiler": "10.1.2",
    "@angular/core": "10.1.2",
    "@angular/forms": "10.1.2",
    "@angular/localize": "^10.1.2",
    "@angular/material": "^10.2.1",
    "@angular/material-moment-adapter": "^10.2.1",
    "@angular/platform-browser": "10.1.2",
    "@angular/platform-browser-dynamic": "10.1.2",
    "@angular/router": "10.1.2",

보시다시피 제 CDK는 10.2.1이었고, 제 자료도 10.2.1이었습니다.가장 낮은 버전이 10.1.2인 것을 보고 버전을 변경했습니다.

    "@angular/material": "^10.1.2", (was 10.2.1)
    "@angular/material-moment-adapter": "^10.1.2", (was 10.2.1)

10.1.2에 "npm install"을 실행한 다음 "ng serve"를 실행하여 성공적으로 컴파일되었습니다.

Angular 12에서 문제가 발생했는데, 문제는 제 동료가 페이지 모듈에서 구성 요소를 정의하고 프로젝트에서 글로벌하게 사용하는 공통 모듈을 정의했다는 것입니다.

전역 파일 모듈에서 제거되었으며 문제가 해결되었습니다.

On My Case

이유는 모르겠지만 제가 해결할 수 있는 유일한 방법은 다음과 같습니다.

1. 구성 요소 대신 모듈을 가져옵니다.
2. 폴더 이름 /my-component-y/를 MyComponentY.ts, I have /component-y/ 및 MyComponentY.ts와 일치시킵니다.

루트 구성 요소는 멀티사이트용이므로 로드가 느립니다.

가장 좋은 해결책은 이 오래된 해킹 프레임워크 대신 React/Next.js를 사용하는 것입니다.

저는 여기서 모든 답을 테스트해 보았지만 제대로 된 답은 없었습니다.그래서 나는 바꾸기로 결심했습니다.angular.js . 파일이 있습니다.aot다▁to니▁and▁▁false▁the▁the▁!. 그 다음에 그것을 false로 오류가 사라졌습니다!그리고 나서 나는 그것을 거짓으로 바꿨고 오류는 사라졌습니다!

"options": {
            "outputPath": "dist/DateMeUI",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false, // here you have to change
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },

제 수 '.json (해야 할 입니다) 이 하면 'tsconfig.app.json'을 할 수 . 이 파일을 사용하여 다음을 설정할 수 있습니다."enableIvy": false다른 사람들이 언급하는 것처럼. tsconfig.app.json.

합니다.{ AngularFirestore} from '@angular/fire/firestore';import { AngularFirestoreModule } from '@angular/fire/firestore';

그리고 그것은 잘 작동합니다.

구성 요소에서 사용되지 않는 일부 매트 구성 요소를 가져올 때도 발생합니다.

• 모든 매트 구성 요소를 가져온 경우app.module.ts일부 매트 구성 요소를 가져왔으며 어레이 가져오기 및 내보내기에 사용된 구성 요소가 없습니다.app.module.ts문제가 없음을 의미합니다. 오류가 발생해도 문제가 발생하지 않습니다.

• 만약 당신이 그것을 위한 기능 모듈을 만든다면 다음과 같이 말하시오.ng g m material이것은 만들 것입니다.material.module.ts파일 이름

• 이제 복사하기 전에 새로 생성된 기능 모듈에 모든 매트 가져오기 문을 복사해야 합니다. 가져오기 문이 회색으로 표시되는지 여부를 염두에 두십시오(IDE에 따라 이 이름이 사용되지 않음이 표시됨).회색으로 표시된 경우 해당 이름을 제거한 다음 복사하여 붙여넣어야 합니다.MaterialModule배열을 가져오고 내보냅니다.그것으로 해결했습니다.

1. App.Module.ts

   가져오기 또는 선언이 아닌 공급자에 주입 가능한 항목을 추가하여 오류를 해결할 수 있습니다.

2. 내부 서비스.ts

   클래스에 @injectionable 추가

ex:

@Injectable()
 export class WebApiService {   }

공간을 준다고 해도 작동하지 않을 수 있습니다.

ex:

@Injectable()


export class WebApiService {    }

실행하는 경우npm install또는yarn installroot 계정 및 실행으로ng serve루트 계정이 아닌 경우 이 문제가 발생합니다.

해결 방법: 루트 계정으로 서버 시작

공유 모듈에 사용자 지정 파이프를 추가하려고 했는데 가져오기 및 내보내기에 추가했습니다.그것이 이 문제를 일으킨 이유입니다.

이 문제를 해결하려면 선언에 사용자 지정 파이프를 추가했습니다. [], exports:[] 및 providers:[].

저는 다음 코드를 사용하여 이 문제를 해결했습니다.

@NgModule({

 declarations: [
   myCustomPipe,
 ],

 exports: [
   myCustomPipe,
 ],

 providers: [
  myCustomPipe,
 ]

})

npm cache clean --force-> 캐시를 청소하면 문제가 해결될 수 있습니다.

프로젝트의 tsconfig.app.json으로 이동하여 모든 항목을 제거합니다.

아래 코드를 복사하여 붙여넣습니다.그것은 당신의 문제를 해결해 줄 것입니다 :)

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
  },

  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

나의 경우에는 문제가 전화를 거는 것이었습니다..forRoot()일부 하위 모듈에서 재사용할 수 있습니다.

나는 공유 지시를 만드는 동안 이 오류를 얻었습니다.이제 처음에는 앱 모듈의 선언 배열에 포함되었습니다(기본적으로 CLI로 Iran 명령 실행 후).

공유 모듈에 저장했습니다.declarations array그리고.exports array▁it자▁▁as▁now▁i▁as▁soon자▁removed하거제.app.module.ts파일 문제가 해결되었습니다.

문제는 2개의 모듈(shared 및 app.module) 내에서 선언되었다는 것입니다.app.module 및 voila에서 제거되었습니다!

언급URL : https://stackoverflow.com/questions/60290309/error-ng6002-appears-in-the-ngmodule-imports-of-appmodule-but-could-not-be-res