각도 2 : NgModule 메타데이터를 찾을 수 없습니다.
저는 앵글 2를 처음 접했고 제가 찾은 비디오 튜토리얼을 따라 하려고 합니다.모든 단계를 수행했음에도 불구하고 Angular가 작동하지 않습니다. 다음 오류가 발생합니다.
compiler.umd.js:13854 Uncaught Error: No NgModule metadata found for 'App'.
그리고 부품이 전혀 로딩되지 않습니다.
내 파일은 다음과 같습니다.
꾸러미의json:
{
"name": "retain",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "webpack --config webpack.spec.ts --progress --color && karma start",
"start": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000 --content-base src"
},
"author": "",
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"core-js": "2.4.1",
"lodash": "4.16.1",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.25"
},
"devDependencies": {
"@types/core-js": "0.9.33",
"@types/lodash": "4.14.35",
"@types/node": "6.0.39",
"awesome-typescript-loader": "2.2.4",
"css-loader": "0.23.1",
"jasmine-core": "2.4.1",
"karma": "1.1.1",
"karma-chrome-launcher": "1.0.1",
"karma-jasmine": "1.0.2",
"karma-mocha-reporter": "2.0.4",
"raw-loader": "0.5.1",
"to-string-loader": "1.1.4",
"ts-helpers": "1.1.1",
"typescript": "2.0.2",
"webpack": "1.13.1",
"webpack-dev-server": "1.14.1"
}
}
index.debook:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Retain</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/flexboxgrid/6.3.0/flexboxgrid.min.css" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="global.css" rel="stylesheet">
<base href="/">
</head>
<body>
<app>
... before angular loads.
</app>
<script src="polyfills.bundle.js"></script>
<script src="vendor.bundle.js"></script>
<script src="main.bundle.js"></script>
</body>
</html>
main.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { App } from './app/app';
const platform = platformBrowserDynamic();
platform.bootstrapModule(App);
platformBrowserDynamic().bootstrapModule(AppModule);
앱:
import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
@Component({
selector: 'app',
template: `
<div>
<h3>
Yo, world!
</h3>
</div>
`
})
export class App {}
app.jp.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { App } from './app';
@NgModule({
imports: [BrowserModule],
declarations: [App],
bootstrap: [App]
})
export class AppModule{};
시간 내주셔서 감사합니다.
위의 답변들이 제시한 내용을 모두 가지고 있었음에도 불구하고 이 오류가 있었습니다.한집 편집입니다.app.module.ts파일(괄호를 삭제하고 다시 놓는 것과 같은)이 효과를 발휘했습니다.
는 당신의 에 .main.ts파일.파일.
const platform = platformBrowserDynamic();
platform.bootstrapModule(App);
부트스트랩을 입니다.App 모듈이 것입니다 , 이 이 .이 두합니다:두을고음로다이다로음e:h두ed이을고e .
platformBrowserDynamic().bootstrapModule(AppModule);
당신의 실수를 고칠 수 있을 겁니다
node_modules 제거 하기 rm -rf node_modules package-lock.jsonrm -rf package-lock.json, 그 후에npm install.
6로 후 Angular 6 , 을 를 ."ERROR in No NgModule metadata found for 'AppModule'."합니다. 이 에는 다음과 같이 tsconfigt-bootstrap-md를과이면다이r tsconfig.json t".
"include": ["node_modules/angular-bootstrap-md/**/*.ts", "src/**/*.ts"],
며칠 동안 문제를 해결하고 머리를 뽑은 후 해결책은 app.module.ts가 먼저 "src/**/*.ts" 아래에 위치하도록 목록을 정렬하는 것이었습니다.앵귤러 버그?
"include": ["src/**/*.ts","node_modules/angular-bootstrap-md/**/*.ts" ],
나는 이 게시물에서 모든 것을 시도했지만 아무 도움이 되지 않았기 때문에 이것이 누군가에게 도움이 되기를 진심으로 바랍니다.이 변화 이후에는 모든 것이 예상대로 아름답게 정리되고 작동합니다.
수동으로 각도/클립을 다시 설치한 경우에만 문제가 해결됩니다.다음 단계를 따릅니다.(Angular project dir에서 모든 명령 실행)
1)다음 명령을 사용하여 웹팩을 제거합니다.
npm remove webpack
2)다음 명령을 사용하여 cli를 설치합니다.
npm install --save-dev @angular/cli@latest
앱 테스트에 성공하면 됩니다 :)
그렇지 않은 경우 아래 단계를 따릅니다.
1) node_module 폴더를 삭제합니다.
2) 다음 명령을 사용하여 캐시를 지웁니다.
npm cache clean --force
3) 다음 명령을 사용하여 노드 패키지를 설치합니다.
npm install
4)다음 명령을 사용하여 angular@cli를 설치합니다.
npm install --save-dev @angular/cli@latest
참고 : 실패한 경우 다시 시도하십시오 :)
5) 축하합니다 :)
애플리케이션을 다시 시작하는 것을 추천합니다.대부분의 경우 편집기가 게으른 로드된 모듈의 변경 사항을 감지할 수 없습니다.
답이 늦었지만 누군가에게 도움이 될 수도 있습니다.같은 오류가 발생했고, 앞서 언급한 제안들을 모두 시도하고, 벽에 머리를 부딪쳤지만 아무 것도 작동하지 않았습니다.
주의 깊게 관찰한 결과 app.module.ts에서 다음과 같은 것을 발견했습니다.
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,, // Redundant comma
CoreModule
];
그래서 머리를 좀 더 찧었어요.WebStorm에 의해 매우 순수하게 강조된 추가 쉼표는 가벼운 경고로 배열에 빈 슬롯을 삽입하여 큰 피해를 입혔습니다.엘리젼 트랩을 조심하세요 ;)
이 오류가 발생하는 이유는 더 많습니다.이는 응용프로그램이 예상대로 빌드되지 못했음을 의미합니다.
다음 사항을 확인합니다.
- node_modules 버전이 변경되지 않았는지 확인합니다. 이것이 주된 이유입니다.
- Some Other Build 도구에서 웹팩으로 이동하는 경우(예: Systemjs에서 웹팩으로 이동하는 경우), 일부 의존성이 본질적으로 모듈화되지 않은 경우 이 오류가 발생할 수 있습니다.
- 프레임워크의 오래된 기능을 확인합니다. 예: "각 2의 HTTP_PROVIDers"를 제거합니다.
- 업그레이드하는 경우 프레임워크의 현재 구문을 따라야 합니다. Ex: 라우팅 구문이 Angular2에서 변경되었습니다.
- 부트스트래핑 프로세스를 확인하고 올바른 모듈을 로드하고 있는지 확인합니다.
의 main.ts, AppModule과 App 모두 부트스트래핑 중입니다.앱 모듈이어야 하고, 앱을 부트스트랩합니다.
main.ts를 문서와 비교하면 차이점을 알 수 있습니다. main.ts에서 App에 대한 모든 참조를 제거하기만 하면 됩니다.
로 Angular 5 로 를 하였습니다 하여 하였습니다 로 하여 비슷한 문제를 했습니다.@angular/cli1.6.1항에서 1.5.5항:
"devDependencies": {
"@angular/cli": "1.6.1"
}
동안ng serve제가 받은 오류는 다음과 같습니다.
ERROR in Error: No NgModule metadata found for 'AppModule'.
at NgModuleResolver.resolve (/path/to/project/app/node_modules/@angular/compiler/bundles/compiler.umd.js:20247:23)
저도 같은 문제가 있어서 위의 답을 다 읽고도 풀지 못했습니다.그러던 중 선언문에 쉼표가 하나 더 붙으면 문제가 생긴다는 것을 알게 되었습니다.제거하면 문제가 해결됩니다.
@NgModule({
imports: [
PagesRoutingModule,
ThemeModule,
DashboardModule,
],
declarations: [
...PAGES_COMPONENTS,
**,**
],
})
도움이 되길 바랍니다.저의 경우, 저는 게으른 부하 모듈과 함께 일하는데, 이 실수가 다음으로 이어진다는 것을 발견했습니다.ERROR in No NgModule metadata found for 'MyModule'.
in app-routing.module.ts
{ path: 'mc3', loadChildren: 'app/module/my/my.module#MxModule' },
가 뛰면 ng serve --aot크롬 개발 도구는 나에게 알려줄 수 있습니다.Error: Cannot find 'Mc4Module' in 'app/module/mc3/mc3.module'
Angular 8 또는 Angular 9(나처럼)에서 이 문제가 발생하는 경우 다음을 수행합니다.
- npm 캐시 지우기
- 모든 노드 재설치_재설치
- "파일" 및 "파일" tsconfig 설정 확인 등
아직도 문제가 있고 Lazy Loading Modules(레이지 로딩 모듈)에서 확인합니다.angularCompilerOptions의에tsconfig.json아니면tsconfig.app.json, 그리고 "strictMetadataEmit"이 false로 설정되어 있거나 제거되어 있는지 확인합니다.
"angularCompilerOptions": {
"preserveWhitespaces": false,
"strictInjectionParameters": true,
"fullTemplateTypeCheck": true,
"strictTemplates": true,
// "strictMetadataEmit": true <-- remove this setting or set to false
},
게으른 로드된 모듈을 내장해서는 절대 안 되는 도서관 제작자를 돕는 설정입니다.이전에 (앵귤러 7을 사용하여) 모든 "엄격한" 옵션을 true로 설정했습니다...
git 저장소에서 클로닝할 때 이 문제가 발생했고 새로운 프로젝트를 생성하고 이전 프로젝트에서 src 폴더를 다시 삽입할 때 해결되었습니다.
각 애플리케이션을 배포할 때 필요한 폴더는 src 폴더뿐이지만 이 솔루션을 사용하여 개발 환경을 재구성해야 합니다.
ngModel 명령을 활성화해야 합니다.이 작업은 AppModule의 imports[] 배열에 FormsModule을 추가하여 수행됩니다.
그런 다음 app.module.ts 파일에서 @angular/forms에서 가져오기를 추가해야 합니다. '@angular/forms'에서 {FormsModule} 가져오기;
드디어 해결책을 찾았습니다.
- 다음 명령을 사용하여 웹팩을 제거합니다.
npm remove webpack
- 다음 명령을 사용하여 cli를 설치합니다.
npm install --save-dev @angular/cli@latest
앱 테스트에 성공하면 됩니다 :)
그렇지 않은 경우 아래 단계를 따릅니다.
- node_module 폴더를 삭제합니다.
- 다음 명령을 사용하여 캐시를 지웁니다.
npm cache clean --force
- 다음 명령을 사용하여 노드 패키지를 설치합니다.
npm install
- 다음 명령을 사용하여 angular@cli를 설치합니다.
npm install --save-dev @angular/cli@latest
참고: 실패한 경우 4단계를 다시 시도합니다.그건 작동할 것이다.
저는 단지 게으른 모듈에 대해서도 같은 문제가 있었습니다.모듈의 이름이 틀렸다는 것이 밝혀졌습니다.
가능한 오타가 있는지 모든 모듈의 이름을 확인합니다.
Angular Cli 1.7.4에서는 이러한 문제가 종종 발생했습니다.처음에 우리는
Cannot read property 'config' of null
TypeError: Cannot read property 'config' of null
그리고 이를 해결하는 것이 위와 같은 문제로 이어집니다.
package-lock.json을 제거했습니다.
npm remove webpack
npm cache clean --force
node_modules 폴더를 제거할 수도 있습니다.그리고 캐시를 청소합니다.다시 설치된 angular cli:
npm install @angular/cli@1.7.4
그리고 모든 것이 설치되었는지 확인하기 위해 다시 dpm 설치를 할 수 있습니다.
그다음달리기
npm ls --depth 0
모든 node_modules가 서로 동기화되어 있는지 확인합니다.만약 의존성 불일치가 있다면, 이것이 우리가 알아낼 수 있는 기회입니다.
마지막으로 npm start/ng serve를 실행합니다.모든 걸 고칠 수 있을 겁니다
이것은 우리가 더 깊이 파고들기 전에 cli에 문제가 생기면 따를 부정행위 코드입니다.95%는 모든 문제를 해결합니다.
도움이 되길 바랍니다.
저 같은 경우에는 제 각6 프로젝트를 업그레이드하려고 했습니다.ng update우주 전체가 무너지는 거죠
다음 명령을 사용하여 프로젝트를 업데이트하려고 했습니다.
- ng update @ymmetry/cli
- ng 업데이트 @patch/core
- ng update @packets/소재
그리고 rxjs package에 문제가 있는 것을 발견하고 이 명령어도 실행합니다. - npm install --save rxjs
그 다음에 오류가 발생합니다.
NgModule 메타데이터를 찾을 수 없습니다.
프로젝트 루트에서 node_modules 폴더를 삭제하여 이 문제를 해결한 다음 다음 다음을 실행합니다.
- npm설치
즉, 모든 것이 잘 작동한다는 것입니다.
에 이 한 소스 있는 node는 에 의 이 을 한 와 에 했습니다 과 한 을 이라는 node.js 과 했습니다 을 한 이라는 을 는 tsconfig.json가지고 있었습니다.
"files": [ "./node_modules/@types/node/index.d.ts" ]
로 바꿨습니다.
"compilerOptions": { "types": ["node"] }
각진 앱에서 이 에서 되지 에 합니다 합니다 에 되지 tsconfig.app.json:
"compilerOptions": { "types": [] }
저도 같은 문제가 있었지만 그 모든 해결책들이 저에게 효과가 없었습니다.추가적인 조사 결과, 저는 제 부품 중 하나에 원치 않는 수입품이 있다는 것을 알게 되었습니다.
사용합니다.setTimeout로든 Visual 에서 app.component를 추가했습니다. app.component는 "Visual Studio"입니다.import { setTimeout } from 'timer';필요하지 않은 곳에서곳에서 removing 이 선을 제거하면 문제가 이 선을 제거하면 문제가 해결되었습니다.
그러니 더 나아가기 전에 수입품을 확인하는 것을 기억하세요.누군가에게 도움이 되기를 바랍니다.
저는 지금 이 문제에 두 번 직면했습니다.두 번 모두 게으른 로딩을 어떻게 구현하고 있는지에 대한 문제였습니다.라우팅 모듈에서 내 경로는 다음과 같이 정의됩니다.
{
path: "game",
loadChildren: () => import("./game/game.module").then(m => {m.GameModule})
}
그러나 이것은 틀렸습니다.두 번째 => 이후에는 곱슬곱슬한 교정기가 필요 없습니다.다음과 같이 보여야 합니다.
{
path: "game",
loadChildren: () => import("./game/game.module").then(m => m.GameModule)
}
이 오류로 인해 모듈에 필요한 데이터를 찾을 수 없습니다.제 경우 NgModule 시작 부분에 @ 기호를 놓쳤습니다.
올바른 NgModule 정의:
@NgModule ({
...
})
export class AppModule {
}
내 경우(잘못된 경우):
NgModule ({ // => this line must starts with @
...
})
export class AppModule {
}
저도 같은 문제가 있어서 편집기를 닫는 것으로 해결했습니다.Visual Studio Code요, 실행해요, 요, ng serve그리고 그것은 성공하였다.
제 경우에는 구성 요소 중 하나에 몇 가지 (개인적인) 정적 방법을 정의하여 동일한 구성 요소에 사용하고 있었습니다.
다른 방법이 없으면 따라 합니다.
if (environment.production) {
// there is no need of this if block, angular internally creates following code structure when it sees --prod
// but at the time of writting this code, else block was not working in the production mode and NgModule metadata
// not found for AppModule error was coming at run time, added follow code to fix that, it can be removed probably
// when angular is upgraded to latest version or if it start working automatically. :)
// we could also avoid else block but building without --prod saves time in building app locally.
platformBrowser(extraProviders).bootstrapModuleFactory(<any>AppModuleNgFactory);
} else {
platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
}
Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ ΔhasOwnProperty(obj, prop)각 성분에 포함됩니다.하거나 이름을 이었습니다.
몇 가지 제안을 드리겠습니다.아래에 언급된 대로 이 모든 것을 제거합니다.
1)<script src="polyfills.bundle.js"></script>(index.html) //<<<===not sure as Angular2.0 final version doesn't require this.
2)platform.bootstrapModule(App); (main.ts)
3)import { NgModule } from '@angular/core'; (app.ts)
ngcWebpack Plugin 사용 mainPath 또는 entryModule을 지정하지 않을 때 이 오류가 발생했습니다.
언급URL : https://stackoverflow.com/questions/39685179/angular-2-no-ngmodule-metadata-found
'sourcecode' 카테고리의 다른 글
| Oracle이 OR 연결 술어를 UNION ALL 작업으로 변환할 수 있도록 지원 (0) | 2023.09.15 |
|---|---|
| 작은 자바스크립트 구현? (0) | 2023.09.15 |
| PowerShell, 웹 요청 및 프록시 (0) | 2023.09.15 |
| virtualenv에서 PYTHONPATH에 경로를 추가하는 방법 (0) | 2023.09.15 |
| tempDir를 생성할 수 없습니다. java.io .tmpdir가 C:로 설정되어 있습니다.\Windows\ (0) | 2023.09.15 |