CODEWITHSUNDEEP
angularangular2-routing
mtyson
mtyson

Reputation: 8580

Angular 2: Use component from Module in Routing

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.

Upvotes: 1

Views: 2208

Answers (1)

Hristo Kolev
Hristo Kolev

Reputation: 1584

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

Upvotes: 1

Related Questions