SharedModule exports ReactiveFormsModule and I import SharedModule in another module and it doesn't work

Multi tool use
Multi tool use












0















I have some doubts about how SharedModule works. I need to use FormGroups and FormControl on a module, so I must import SharedModule to that module. SharedModule exports FormsModule, ReactiveFormsModule, so I dont't know why it doesn't recognize yet Formgroup and FormControl names. This is the error that I get: Can't bind to 'formGroup' since it isn't a known property of 'form'.



This is my shared.module.ts :



import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RequiredLabelDirective } from './directives/required-label.directive';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';



@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,

],
declarations: [RequiredLabelDirective],
exports: [
RequiredLabelDirective,
FormsModule,
ReactiveFormsModule
]
})
export class SharedModule { }


And this is the module in which I want to export the SharedModule so that:



import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule} from '../../shared/shared.module';

@NgModule({
imports: [
CommonModule,
SharedModule
],
declarations:
})
export class MisDatosModule { }


This is the code of MisDatos.component.ts:



import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-mis-datos',
templateUrl: './mis-datos.component.html',
styleUrls: ['./mis-datos.component.scss']
})
export class MisDatosComponent implements OnInit {


profileForm = new FormGroup({
Name: new FormControl('NombreDelProfesional'),
Surname: new FormControl('ApellidoDelProfesional'),
Dni: new FormControl('DNIPROFESIONAL'),
Email: new FormControl('unEmail@gmail.com'),
Password: new FormControl('ayquepasswordmasmalo'),
Phone: new FormControl('12354566')
});



constructor() { }

ngOnInit() {
}

}


And this is the structure of my Angular Project.



Structure



Other question that I have. For example, if MisDatos wouldn't have a module, what will happen? Could I import the SharedModule on ProfesionalModule and this could work???? I mean, can you use a module from another component that has no his one module????



Hope you help me, thanks so much. I am a begginner.










share|improve this question























  • so where do you declare MisDatos component?

    – Fateme Fazli
    Dec 30 '18 at 12:22











  • I declare MisDatos component in ProfesionalModule like this: import { MisDatosComponent } from './mis-datos/mis-datos.component'; import { MisDatosModule } from './mis-datos/mis-datos.module';

    – qbvp
    Dec 30 '18 at 12:30













  • you should declare MisDatosComponent in MisDatosModule not in ProfesionalModule.

    – Fateme Fazli
    Dec 30 '18 at 12:32











  • It doesn't work. You mean this? import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule} from '../../shared/shared.module'; import { MisDatosComponent } from './mis-datos.component'; @NgModule({ imports: [ CommonModule, SharedModule ], declarations: }) export class MisDatosModule { }

    – qbvp
    Dec 30 '18 at 12:37













  • declarations: [MisDatosComponent ] and remove the MisDatosComponent from ProfesionalModule.

    – Fateme Fazli
    Dec 30 '18 at 12:38


















0















I have some doubts about how SharedModule works. I need to use FormGroups and FormControl on a module, so I must import SharedModule to that module. SharedModule exports FormsModule, ReactiveFormsModule, so I dont't know why it doesn't recognize yet Formgroup and FormControl names. This is the error that I get: Can't bind to 'formGroup' since it isn't a known property of 'form'.



This is my shared.module.ts :



import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RequiredLabelDirective } from './directives/required-label.directive';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';



@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,

],
declarations: [RequiredLabelDirective],
exports: [
RequiredLabelDirective,
FormsModule,
ReactiveFormsModule
]
})
export class SharedModule { }


And this is the module in which I want to export the SharedModule so that:



import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule} from '../../shared/shared.module';

@NgModule({
imports: [
CommonModule,
SharedModule
],
declarations:
})
export class MisDatosModule { }


This is the code of MisDatos.component.ts:



import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-mis-datos',
templateUrl: './mis-datos.component.html',
styleUrls: ['./mis-datos.component.scss']
})
export class MisDatosComponent implements OnInit {


profileForm = new FormGroup({
Name: new FormControl('NombreDelProfesional'),
Surname: new FormControl('ApellidoDelProfesional'),
Dni: new FormControl('DNIPROFESIONAL'),
Email: new FormControl('unEmail@gmail.com'),
Password: new FormControl('ayquepasswordmasmalo'),
Phone: new FormControl('12354566')
});



constructor() { }

ngOnInit() {
}

}


And this is the structure of my Angular Project.



Structure



Other question that I have. For example, if MisDatos wouldn't have a module, what will happen? Could I import the SharedModule on ProfesionalModule and this could work???? I mean, can you use a module from another component that has no his one module????



Hope you help me, thanks so much. I am a begginner.










share|improve this question























  • so where do you declare MisDatos component?

    – Fateme Fazli
    Dec 30 '18 at 12:22











  • I declare MisDatos component in ProfesionalModule like this: import { MisDatosComponent } from './mis-datos/mis-datos.component'; import { MisDatosModule } from './mis-datos/mis-datos.module';

    – qbvp
    Dec 30 '18 at 12:30













  • you should declare MisDatosComponent in MisDatosModule not in ProfesionalModule.

    – Fateme Fazli
    Dec 30 '18 at 12:32











  • It doesn't work. You mean this? import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule} from '../../shared/shared.module'; import { MisDatosComponent } from './mis-datos.component'; @NgModule({ imports: [ CommonModule, SharedModule ], declarations: }) export class MisDatosModule { }

    – qbvp
    Dec 30 '18 at 12:37













  • declarations: [MisDatosComponent ] and remove the MisDatosComponent from ProfesionalModule.

    – Fateme Fazli
    Dec 30 '18 at 12:38
















0












0








0








I have some doubts about how SharedModule works. I need to use FormGroups and FormControl on a module, so I must import SharedModule to that module. SharedModule exports FormsModule, ReactiveFormsModule, so I dont't know why it doesn't recognize yet Formgroup and FormControl names. This is the error that I get: Can't bind to 'formGroup' since it isn't a known property of 'form'.



This is my shared.module.ts :



import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RequiredLabelDirective } from './directives/required-label.directive';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';



@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,

],
declarations: [RequiredLabelDirective],
exports: [
RequiredLabelDirective,
FormsModule,
ReactiveFormsModule
]
})
export class SharedModule { }


And this is the module in which I want to export the SharedModule so that:



import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule} from '../../shared/shared.module';

@NgModule({
imports: [
CommonModule,
SharedModule
],
declarations:
})
export class MisDatosModule { }


This is the code of MisDatos.component.ts:



import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-mis-datos',
templateUrl: './mis-datos.component.html',
styleUrls: ['./mis-datos.component.scss']
})
export class MisDatosComponent implements OnInit {


profileForm = new FormGroup({
Name: new FormControl('NombreDelProfesional'),
Surname: new FormControl('ApellidoDelProfesional'),
Dni: new FormControl('DNIPROFESIONAL'),
Email: new FormControl('unEmail@gmail.com'),
Password: new FormControl('ayquepasswordmasmalo'),
Phone: new FormControl('12354566')
});



constructor() { }

ngOnInit() {
}

}


And this is the structure of my Angular Project.



Structure



Other question that I have. For example, if MisDatos wouldn't have a module, what will happen? Could I import the SharedModule on ProfesionalModule and this could work???? I mean, can you use a module from another component that has no his one module????



Hope you help me, thanks so much. I am a begginner.










share|improve this question














I have some doubts about how SharedModule works. I need to use FormGroups and FormControl on a module, so I must import SharedModule to that module. SharedModule exports FormsModule, ReactiveFormsModule, so I dont't know why it doesn't recognize yet Formgroup and FormControl names. This is the error that I get: Can't bind to 'formGroup' since it isn't a known property of 'form'.



This is my shared.module.ts :



import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RequiredLabelDirective } from './directives/required-label.directive';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';



@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,

],
declarations: [RequiredLabelDirective],
exports: [
RequiredLabelDirective,
FormsModule,
ReactiveFormsModule
]
})
export class SharedModule { }


And this is the module in which I want to export the SharedModule so that:



import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule} from '../../shared/shared.module';

@NgModule({
imports: [
CommonModule,
SharedModule
],
declarations:
})
export class MisDatosModule { }


This is the code of MisDatos.component.ts:



import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-mis-datos',
templateUrl: './mis-datos.component.html',
styleUrls: ['./mis-datos.component.scss']
})
export class MisDatosComponent implements OnInit {


profileForm = new FormGroup({
Name: new FormControl('NombreDelProfesional'),
Surname: new FormControl('ApellidoDelProfesional'),
Dni: new FormControl('DNIPROFESIONAL'),
Email: new FormControl('unEmail@gmail.com'),
Password: new FormControl('ayquepasswordmasmalo'),
Phone: new FormControl('12354566')
});



constructor() { }

ngOnInit() {
}

}


And this is the structure of my Angular Project.



Structure



Other question that I have. For example, if MisDatos wouldn't have a module, what will happen? Could I import the SharedModule on ProfesionalModule and this could work???? I mean, can you use a module from another component that has no his one module????



Hope you help me, thanks so much. I am a begginner.







angular forms module components






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Dec 30 '18 at 12:15









qbvpqbvp

62




62













  • so where do you declare MisDatos component?

    – Fateme Fazli
    Dec 30 '18 at 12:22











  • I declare MisDatos component in ProfesionalModule like this: import { MisDatosComponent } from './mis-datos/mis-datos.component'; import { MisDatosModule } from './mis-datos/mis-datos.module';

    – qbvp
    Dec 30 '18 at 12:30













  • you should declare MisDatosComponent in MisDatosModule not in ProfesionalModule.

    – Fateme Fazli
    Dec 30 '18 at 12:32











  • It doesn't work. You mean this? import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule} from '../../shared/shared.module'; import { MisDatosComponent } from './mis-datos.component'; @NgModule({ imports: [ CommonModule, SharedModule ], declarations: }) export class MisDatosModule { }

    – qbvp
    Dec 30 '18 at 12:37













  • declarations: [MisDatosComponent ] and remove the MisDatosComponent from ProfesionalModule.

    – Fateme Fazli
    Dec 30 '18 at 12:38





















  • so where do you declare MisDatos component?

    – Fateme Fazli
    Dec 30 '18 at 12:22











  • I declare MisDatos component in ProfesionalModule like this: import { MisDatosComponent } from './mis-datos/mis-datos.component'; import { MisDatosModule } from './mis-datos/mis-datos.module';

    – qbvp
    Dec 30 '18 at 12:30













  • you should declare MisDatosComponent in MisDatosModule not in ProfesionalModule.

    – Fateme Fazli
    Dec 30 '18 at 12:32











  • It doesn't work. You mean this? import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule} from '../../shared/shared.module'; import { MisDatosComponent } from './mis-datos.component'; @NgModule({ imports: [ CommonModule, SharedModule ], declarations: }) export class MisDatosModule { }

    – qbvp
    Dec 30 '18 at 12:37













  • declarations: [MisDatosComponent ] and remove the MisDatosComponent from ProfesionalModule.

    – Fateme Fazli
    Dec 30 '18 at 12:38



















so where do you declare MisDatos component?

– Fateme Fazli
Dec 30 '18 at 12:22





so where do you declare MisDatos component?

– Fateme Fazli
Dec 30 '18 at 12:22













I declare MisDatos component in ProfesionalModule like this: import { MisDatosComponent } from './mis-datos/mis-datos.component'; import { MisDatosModule } from './mis-datos/mis-datos.module';

– qbvp
Dec 30 '18 at 12:30







I declare MisDatos component in ProfesionalModule like this: import { MisDatosComponent } from './mis-datos/mis-datos.component'; import { MisDatosModule } from './mis-datos/mis-datos.module';

– qbvp
Dec 30 '18 at 12:30















you should declare MisDatosComponent in MisDatosModule not in ProfesionalModule.

– Fateme Fazli
Dec 30 '18 at 12:32





you should declare MisDatosComponent in MisDatosModule not in ProfesionalModule.

– Fateme Fazli
Dec 30 '18 at 12:32













It doesn't work. You mean this? import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule} from '../../shared/shared.module'; import { MisDatosComponent } from './mis-datos.component'; @NgModule({ imports: [ CommonModule, SharedModule ], declarations: }) export class MisDatosModule { }

– qbvp
Dec 30 '18 at 12:37







It doesn't work. You mean this? import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule} from '../../shared/shared.module'; import { MisDatosComponent } from './mis-datos.component'; @NgModule({ imports: [ CommonModule, SharedModule ], declarations: }) export class MisDatosModule { }

– qbvp
Dec 30 '18 at 12:37















declarations: [MisDatosComponent ] and remove the MisDatosComponent from ProfesionalModule.

– Fateme Fazli
Dec 30 '18 at 12:38







declarations: [MisDatosComponent ] and remove the MisDatosComponent from ProfesionalModule.

– Fateme Fazli
Dec 30 '18 at 12:38














1 Answer
1






active

oldest

votes


















0














SharedModule should also import FormsModule. You can't export something that hasn't been imported or declared in an Angular module.






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53977495%2fsharedmodule-exports-reactiveformsmodule-and-i-import-sharedmodule-in-another-mo%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    SharedModule should also import FormsModule. You can't export something that hasn't been imported or declared in an Angular module.






    share|improve this answer




























      0














      SharedModule should also import FormsModule. You can't export something that hasn't been imported or declared in an Angular module.






      share|improve this answer


























        0












        0








        0







        SharedModule should also import FormsModule. You can't export something that hasn't been imported or declared in an Angular module.






        share|improve this answer













        SharedModule should also import FormsModule. You can't export something that hasn't been imported or declared in an Angular module.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Dec 30 '18 at 14:22









        David WalschotsDavid Walschots

        8,10352647




        8,10352647






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53977495%2fsharedmodule-exports-reactiveformsmodule-and-i-import-sharedmodule-in-another-mo%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            0MTitlX5KoPNDzKT pCCx AK75AofL6yjWPsbUzxCEMX,FC
            ZnvH4t

            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas