1

In angular 2, say I have a route that uses a component:

{ path: 'new-project', component: BasicForm },

Now, this works if I import the component directly:

import { BasicForm } from './foo/basicForm.component';

But how should I go about importing the module instead:

import { BasicForm } from './foo/basicForm.module';

This doesn't work because BasicForm is not defined in the module file, but the component file.

So that the component is loaded with all the imports and declarations of the module available?


Following @HristoKolev suggestion, I added this to the module:

export { BasicForm } from './basicForm.component';

And that allows the route to see the BasicForm component from the module.

However, the BasicForm component does not seem to see the Imports from the NgModule. In particular, BasicForm doesn't have access to the FormsModule defined by the component module:

import { FormsModule } from '@angular/forms';
...
@NgModule({
  imports: [CommonModule, FormsModule],
  declarations: [BasicForm]
})

But in the BasicForm template, the error is:

Can't bind to 'ngModel' since it isn't a known property of 'input

The template line causing the error:

<input type="text" class="form-control" id="directory" placeholder="foo" [(ngModel)]="project.directory">

So angular is not finding the ngModel directive from the FormsModule while parsing this template.

4
  • 1
    NgModule also has an 'exports' property- you can try using it, but I'm not sure if you can use it the way you want. Commented Oct 1, 2016 at 14:55
  • 1
    @spongessuck You're rep is currently 666... not sure I should trust your advice :) Commented Oct 1, 2016 at 15:02
  • 1
    You could fix that with an upvote... ;) Commented Oct 1, 2016 at 15:02
  • @spongessuck Ok, done :P Commented Oct 1, 2016 at 15:04

1 Answer 1

1

In the module file add export * from './basicForm.component';

Sign up to request clarification or add additional context in comments.

2 Comments

That let me use the component from the route by importing the module, but the modules definitions don't seem to be available in the component. Updated question.
I don't see why it would behave that way. Try importing the BrowserModule

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.