angular - কৌণিক 2: কোনও এনজিডমডুল মেটাডেটা পাওয়া যায় নি




typescript webpack (15)

আমি কৌনিক 2 তে একেবারে নতুন এবং আমি যে ভিডিও টিউটোরিয়াল পেয়েছি তার সাথে অনুসরণ করার চেষ্টা করছি। সমস্ত পদক্ষেপ অনুসরণ করেও, কৌণিক ঠিক কাজ করবে না; আমি নিম্নলিখিত ত্রুটি পেয়েছি:

compiler.umd.js:13854 Uncaught Error: No NgModule metadata found for 'App'.

এবং উপাদানটি মোটেও লোড হয় না।

আমার ফাইলগুলি এখানে:

package.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.html:

<!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);

app.ts:

import { Component } from '@angular/core';
import { NgModule }      from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <div>
      <h3>
        Yo, world!
      </h3>
    </div>
    `
})

export class App {}

app.module.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{}; 

আপনার সময় জন্য ধন্যবাদ।

https://code.i-harness.com


আমি অ্যাপ্লিকেশনটি আবার চালানোর পরামর্শ দিচ্ছি। বেশিরভাগ কেস সম্পাদক অলস লোডযুক্ত মডিউলটির পরিবর্তনগুলি সনাক্ত করতে সক্ষম হবেন না।


অবশেষে আমি সমাধানটি খুঁজে পেয়েছি।

  1. নিম্নলিখিত কমান্ড ব্যবহার করে ওয়েবপ্যাক সরান।
npm remove webpack
  1. নিম্নলিখিত কমান্ড ব্যবহার করে ক্লাইট ইনস্টল করুন।
npm install --save-dev @angular/[email protected]

সফলভাবে অ্যাপ্লিকেশন পরীক্ষা করার পরে, এটি কাজ করবে :)

তা না হলে নীচের পদক্ষেপগুলি অনুসরণ করুন:

  1. নোড_মডিউল ফোল্ডার মুছুন।
  2. নিম্নলিখিত কমান্ড ব্যবহার করে ক্যাশে সাফ করুন।
npm cache clean --force
  1. নিম্নলিখিত কমান্ড ব্যবহার করে নোড প্যাকেজ ইনস্টল করুন।
npm install
  1. নিম্নলিখিত কমান্ডটি ব্যবহার করে কৌণিক @ ক্লিপ ইনস্টল করুন।
npm install --save-dev @angular/[email protected]

দ্রষ্টব্য: যদি ব্যর্থ হয়, আবার 4 পদক্ষেপ চেষ্টা করুন। এটা কাজ করবে।


আপনার main.ts আপনি নিজের অ্যাপমডুল এবং আপনার অ্যাপ উভয়ই বুটস্ট্র্যাপ করছেন। এটি কেবল অ্যাপমোডুল হওয়া উচিত, যা অ্যাপটিকে বুটস্ট্র্যাপ করে।

আপনি যদি ডকুমারের সাথে আপনার মেইন.টিসগুলি তুলনা করেন তবে আপনি পার্থক্যটি দেখতে পাবেন - কেবল অ্যাপ্লিকেশানের সমস্ত উল্লেখগুলি মেইন.টি.এস. থেকে সরিয়ে ফেলুন


আমরা মাঝে মাঝে এঙ্গুলার ক্লিপ 1.7.4 এ এই সমস্যার মুখোমুখি হয়েছি। প্রাথমিকভাবে আমরা পেয়েছি

Cannot read property 'config' of null
TypeError: Cannot read property 'config' of null

এবং উপরের ইস্যুতে এই সীসা ঠিক করা।

আমরা প্যাকেজ-লক.জসন সরিয়ে ফেলেছি

npm remove webpack

npm cache clean --force

আপনি আপনার নোড_মডিউলগুলি ফোল্ডারটিও সরাতে পারেন। এবং তারপরে ক্যাশে পরিষ্কার করুন। কৌণিক ক্লাইটি পুনরায় ইনস্টল করা হয়েছে:

npm install @angular/[email protected].7.4

এবং তারপরে আপনি আবার এনপিএম ইনস্টল করতে পারবেন, কেবল সবকিছু ইনস্টল করা আছে কিনা তা নিশ্চিত করার জন্য।

তারপরে দৌড়াও

npm ls --depth 0

আপনার সমস্ত নোড_মডিউলগুলি একে অপরের সাথে সিঙ্ক হয়েছে কিনা তা নিশ্চিত করতে। যদি কোনও নির্ভরতা মেলেনি, তবে আমাদের জন্য এটি বের করার সুযোগ।

শেষ পর্যন্ত এনপিএম স্টার্ট / এনজি সার্ভিস চালান। এটি সব ঠিক করা উচিত।

এটি হ'ল ঠকানো কোড যা আমরা গভীরভাবে খনন করার আগে ক্লিমে কোনও সমস্যা নিয়ে চললে আমরা অনুসরণ করব। 95% বার এটি সমস্ত সমস্যার সমাধান করে।

আশা করি এইটি কাজ করবে.


আমার একই সমস্যা ছিল কিন্তু এই সমাধানগুলির মধ্যে একটিও আমার পক্ষে কাজ করে নি। আরও তদন্তের পরে, আমি জানতে পারি যে একটি অনাকাঙ্ক্ষিত আমদানি আমার উপাদানগুলির মধ্যে একটিতে ছিল।

আমি setTimeout ফাংশনটি ব্যবহার করি তবে ভিজ্যুয়াল স্টুডিও import { setTimeout } from 'timer'; যুক্ত করে import { setTimeout } from 'timer'; যেখানে এটি প্রয়োজন ছিল না। এই লাইনটি সরানো সমস্যার সমাধান করেছে।

সুতরাং আরও এগিয়ে যাওয়ার আগে আপনার আমদানি পরীক্ষা করে দেখুন। আশা করি এটি কারও সাহায্য করবে।


আমার ক্ষেত্রে, আমি পুরো কৃত্রিম ধসের পরে ng update ব্যবহার করে আমার কৌণিক 6 প্রকল্পটি আপগ্রেড করার চেষ্টা করছিলাম।

আমি এই কমান্ডগুলি ব্যবহার করে আমার প্রকল্পটি আপডেট করার চেষ্টা করছিলাম:

  • এনজি আপডেট @ কৌণিক / ক্লিপ
  • এনজি আপডেট @ কৌনিক / কোর
  • এনজি আপডেট @ কৌনিক / উপাদান

এবং তারপরে আমি rxjs প্যাকেজ নিয়ে একটি সমস্যা পেয়েছি এবং আমি এই কমান্ডটিও চালাচ্ছি। - এনপিএম ইনস্টল - সেভ আরএক্সজেএস

এবং তারপর আমি ত্রুটি পেতে

কোনও এনজিএমডুল মেটাডাটা পাওয়া যায় নি

আমি প্রকল্পের রুটে আমার নোড_মডিউলগুলি ফোল্ডারটি মুছে ফেলে এটি সমাধান করি এবং তারপরে আমি চালাব:

  • এনপিএম ইনস্টল

এটি হ'ল, সমস্ত সুন্দর কাজ করে।


আমি এই সমস্যাটি যখন আমার গিটার সংগ্রহস্থল থেকে ক্লোন করেছিলাম এবং যখন আমি একটি নতুন প্রকল্প তৈরি করেছিলাম এবং পুরানো প্রকল্প থেকে সিআরসি ফোল্ডারটি পুনরায় whenোকাতাম তখন এটি সমাধান হয়ে যায়।

আপনার কৌণিক অ্যাপ্লিকেশন মোতায়েন করার সময় src ফোল্ডারটি কেবলমাত্র ফোল্ডারের প্রয়োজন তবে আপনাকে এই সমাধানটি ব্যবহার করে দেব পরিবেশটি পুনরায় কনফিগার করতে হবে।


আমি দেখতে পেলাম যে আমার ক্ষেত্রে এই সমস্যার কারণ হ'ল আমি একই উত্স গাছের নোড.জেএস অ্যাপ্লিকেশনটির সাথে আমার কৌনিক অ্যাপটি একত্রিত করেছি এবং মূল tsconfig.json আমার ছিল:

"files": [ "./node_modules/@types/node/index.d.ts" ]

আমি এটিকে পরিবর্তন করেছিলাম

"compilerOptions": { "types": ["node"] }

এবং তারপরে আপনার কৌণিক অ্যাপে নোডের ধরণের ব্যবহার রোধ করতে, এটিকে tsconfig.app.json :

"compilerOptions": { "types": [] }


ইস্যুটি তখনই স্থির হয় যখন কৌনিক / ক্লাইটি পুনরায় ইনস্টল করা হয়। নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করুন। (কৌণিক প্রকল্পের অধীনে সমস্ত কমান্ড চালান)

1) নিম্নলিখিত কমান্ড ব্যবহার করে ওয়েবপ্যাক সরান।

npm remove webpack

2) নিম্নলিখিত কমান্ড ব্যবহার করে ক্লাইট ইনস্টল করুন।

npm install --save-dev @angular/[email protected]

সফলভাবে অ্যাপ্লিকেশন পরীক্ষা করার পরে, এটি কাজ করবে :)

যদি না হয় তবে নীচের পদক্ষেপগুলি অনুসরণ করুন।

1) নোড_মডিউল ফোল্ডার মুছুন।

2) নিম্নলিখিত কমান্ড ব্যবহার করে ক্যাশে সাফ করুন।

npm cache clean --force

3) নিম্নলিখিত কমান্ড ব্যবহার করে নোড প্যাকেজ ইনস্টল করুন।

npm install

4) নিম্নলিখিত কমান্ডটি ব্যবহার করে কৌনিক @ ক্লিপ ইনস্টল করুন।

npm install --save-dev @angular/[email protected]

দ্রষ্টব্য: ব্যর্থ হলে আবার চেষ্টা করুন :)

5) উদযাপন :)


উপরের উত্তরগুলি জায়গায় প্রস্তাবিত সমস্ত কিছু থাকা সত্ত্বেও আমার এই ত্রুটি ছিল। app.module.ts ফাইলের একটি সাধারণ সম্পাদনা (যেমন একটি বন্ধনী মুছে ফেলা এবং এটি পিছনে রাখার মতো) কৌশলটি করে।


এটি এখানে প্রদত্ত সমস্ত উত্তর হতে পারে বা আমার ক্ষেত্রে যেমন এটি ভুলভাবে নির্দিষ্ট করা হয়েছিল এমন একটি রুট হতে পারে। আপনার সমস্ত রুট স্পট রয়েছে তা নিশ্চিত করুন।


এনজিসিউইবপ্যাক প্লাগইন ব্যবহার করে কোনও মেইনপথ বা এন্ট্রিমোডুল নির্দিষ্ট না করার সময় আমি এই ত্রুটিটি পেয়েছি।


দেরিতে উত্তর, তবে এটি কারওর পক্ষে সহায়তা করতে পারে। আমি একই ত্রুটি পেয়েছি, পূর্বে উল্লিখিত সমস্ত পরামর্শ ব্যবহার করে দেখেছি, আমার মাথা প্রাচীরের বিদ্ধ হয়ে গেছে, কিন্তু কিছুই কার্যকর হয়নি।

সতর্ক পর্যবেক্ষণে, আমি নিম্নলিখিতটি app.module.ts এ লক্ষ্য করেছি:

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  FormsModule,
  HttpClientModule,, // Redundant comma 
  CoreModule
];

তাই আমি আরও কিছুটা মাথা কেটেছি। মজাদার সতর্কতা হিসাবে ওয়েবস্টর্মের অতিরিক্ত কমা, খুব নির্দোষভাবে হাইলাইটেড, অ্যারেতে একটি ফাঁকা স্লট byুকিয়ে তছনছ করে দিয়েছে। এলিশনের ফাঁদটি দেখুন


নোড_মডিউলগুলি rm -rf node_modules -আরএফ rm -rf node_modules এবং প্যাকেজ-লক.জসন rm -rf package-lock.json -আরএফ প্যাকেজ-লক.জসন অপসারণের চেষ্টা করুন, এটি npm install পরে।


"ERROR in No NgModule metadata found for 'AppModule'." 6 এ আপগ্রেড করার পরে আমি "ERROR in No NgModule metadata found for 'AppModule'." মুখোমুখি হয়েছি "ERROR in No NgModule metadata found for 'AppModule'." কৌণিক-বুটস্ট্র্যাপ-এমডি প্যাকেজ সহ, যার জন্য একটি tsconfig.json প্রয়োজন "অন্তর্ভুক্ত" নিম্নরূপ:

"include": ["node_modules/angular-bootstrap-md/**/*.ts", "src/**/*.ts"],

সমস্যা সমাধানের এবং চুল টানার কয়েক দিন পরে, সমাধানটি তালিকাটি সাজানো ছিল যাতে অ্যাপ্লিকেশন: module.ts প্রথমে "src / ** / *। Ts" এর অধীনে থাকে। একটি কৌণিক বাগ, সম্ভবত?

"include": ["src/**/*.ts","node_modules/angular-bootstrap-md/**/*.ts" ],

আমি সত্যিই আশা করি এটি কারওর পক্ষে সহায়তা করে, কারণ আমি এই পোস্টিংয়ের সমস্ত কিছু চেষ্টা করেছি এবং কিছুই সাহায্য করেনি। এই পরিবর্তনের পরে, সবকিছু প্রত্যাশার মতো সংকলিত এবং সুন্দরভাবে কাজ করে।