angular - الزاوي 2 مكون ليس جزءا من أي NgModule




upgrade (5)

أقوم بترقية مشروع Angular 2 من RC5 إلى 2.0.0. لقد حصلت على هذا الخطأ

رفض وعد غير معالج: المكون LoginComponent ليس جزءًا من أي NgModule أو الوحدة النمطية لم يتم استيرادها إلى الوحدة النمطية الخاصة بك. . المنطقة: المهمة: Promise.then ؛ القيمة: خطأ: مكون

Main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

AppModule:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';
import {RouterModule} from "@angular/router";
import {AppsAdminComponent} from './AppsAdmin/AppsAdmin.component';
import {AppsManagerComponent} from './AppsManager/AppsManager.component';
import {LoginComponent} from './Login/Login.component';
import {LogoutComponent} from './Logout/logout.component';
import { Routing }  from './App.routing';
import {HttpModule} from '@angular/http';
//import {AppsManagerService} from './Service/AppsManager.service';
import {GlobalService} from './Service/GlobalService';
import {Webservice} from './Service/Webservice';

@NgModule({
    declarations: [
        AppComponent,
        LoginComponent,
        LogoutComponent,
        AppsAdminComponent,
        AppsManagerComponent
    ],
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        Routing
    ],
    providers: [
        GlobalService,
        Webservice

    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {
}

تسجيل الدخولComponent:

@Component({
    selector: 'Login',
    templateUrl: 'App/Login/Login.html',
    providers: [LoginService],
    styleUrls: ['App/Login/Login.css']
})

ما المشكله؟


تأكد من تضمين المكون الجديد الخاص بك في app.routing.ts المراجع وكذلك app.module.ts.


في حالتي ، كانت المشكلة مع اختلاف الرسملة في app.routing.ts و app.module.ts . نحن بحاجة إلى التأكد من أن لدينا نفس المسار مع نفس الحالة المحددة في كلا الموقعين.

سابقا

app.routing.ts => import { HomeComponent } from './components/home.component';
app.module.ts => import { HomeComponent } from './Components/home.component'

حل

app.routing.ts => import { HomeComponent } from './Components/home.component';
app.module.ts => import { HomeComponent } from './Components/home.component'

ملاحظة ، التغيير في حالة المجلد المسمى "مكونات"


نفس المشكلة هنا وأنا حلها.

1) يمكنك إنشاء المكون الخاص بك

            import { Component } from '@angular/core';
            @Component({
              moduleId:module.id,
              selector: 'page-home',
              templateUrl:'HomeComponent.html',
            })
            export class HomeComponent  { }

2) يجب أن تعلن ذلك في app.module.ts

            import {HomeComponent}  from './Components/Pages/Home/HomeComponent';
            ...
            declarations: [ 
                AppComponent,
                HomeComponent
            ],

ويتم إصلاح المشكلة.


واجهت نفس الخطأ. كان لدي الكثير من المكونات وقد فاتني التطبيق في app.module.ts ولكني لم أكن متأكدًا منها.

لقد اكتشفت عن طريق إضافة بيان سجل إلى ..

/node_modules/@angular/compiler/bundles/compiler.umd.js

// I ADDED THIS LOG STATEMENT
console.log('compType', String(compType));
// THIS LINE EXISTS ALREADY
throw new Error("Component " + stringify(compType) + " is not part of any NgModule or the module has not been imported into your module.");

يوضح لك بيان السجل العنصر الذي نسيت إضافته إلى app.module.ts .. فقط انقر على إخراج بيان السجل في علامة تبويب وحدة التحكم في المستعرض للحصول على التفاصيل.

قم بإزالة بيان السجل عند الانتهاء.

ملاحظة: تأكد من أنك تستخدم compiler.umd.js (NOT compiler.umd.min.js) في ملف تكوين SystemJS الخاص بك.


يتم إنشاء الخطأ المذكور عندما لا تقوم بتضمين المكونات المرتبطة في قسم "الوحدة النمطية" الرئيسي للمكون المعني. لذا تأكد من ذكر المكون هناك في الوحدة النمطية.





upgrade