Angular4中的模板解析错误

Question

I'm trying to separate the declaration of components. I've created a new file called "Components.ts" and I wrote the declaration codes there and I'm exporting It.

import { NgModule } from '@angular/core';
import { Component1} from '../components/Component1.component';
import { Component2} from '../components/Component2.component';
import { Component3} from 
'../components/Component3.component';

@NgModule({
  declarations: [
    Component1,
    Component2,
    Component3
  ] 
})

export class Components { }

And I'm defining into my "App.module.ts" file

import { NgModule } from '@angular/core';
import { Components } from './Misc/Components';//Custom Module


@NgModule({
    declarations: [AppComponent], //This is my main component
    imports: [
       Components  // This is the custom module containg declarations of 
                   // other components
    ],

Here is the error:

UPDATE I've already Imported ReactiveForm Module.

My project is running fine if i define all the components in the "App.module.ts" file like this:

declarations: [
    AppComponent,
    Component1,
    Component2,
    Component3
  ];

Problem occurs when i'm trying to seperate the declarations of all other components.

Answer 1

You need to export those components since you want to use it to other modules

And base in the error you need to import ReactiveFormsModule since you're using formGroup and CommonModule since you're using ngIf

Do it like this

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';  
import { NewComponentComponent } from '../components/Component1.component';
import { New2Component } from '../components/Component2.component';
import { ChildComponentComponent } from 
'../components/Component3.component';

@NgModule({
  imports: [ReactiveFormsModule, FormsModule, CommonModule],
  declarations: [
    Component1,
    Component2,
    Component3
  ],
 exports: [
    Component1,
    Component2,
    Component3
  ] 
})

export class Components { }

Answer 2

you need to add declarable classes to an NgModule's declarations list, not the file name.
Every element defined in the declarations array is private by default. use Exports property and you should only export whatever the other modules in our application need to perform its job.

 import { NgModule } from '@angular/core';
    import { NewComponentComponent } from '../components/Component1.component';
    import { New2Component } from '../components/Component2.component';
    import { ChildComponentComponent } from 
    '../components/Component3.component';

    @NgModule({
      declarations: [
        NewComponentComponent,
        New2Component,
        ChildComponentComponent
      ],
   exports: [ NewComponentComponent,
              New2Component,
             ChildComponentComponent]
    })

    export class Components { }

The template error is because of formGroup, You need to import ReactiveFormsModule in your root module

    import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
    imports: [
        BrowserModule,

        ReactiveFormsModule
    ],