Error: The Typescript module in Angular 2 does not have the constant 'FORM_DIRECTIVES' available for export

Question

Error: The Typescript module in Angular 2 does not have the constant 'FORM_DIRECTIVES' available for export

I need to integrate an existing component into my app, but I am facing some issues with the dependencies. Originally, the sample code provided me with these dependencies:

import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';

Now, I am transitioning to using '@angular' instead of 'angular2', which I believe should look something like this:

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

However, I encountered the following error:

mypath/node_modules/@angular/forms/index"' has no exported member 'FORM_DIRECTIVES'.
mypath/node_modules/@angular/core/index"' has no exported member 'CORE_DIRECTIVES'.

How can I include FORM_DIRECTIVES now that they are not part of angular2? What is the new way or replacement for resolving such dependencies?

I have searched through the angular changelog but couldn't find any relevant information.

javascript angularjs angular typescript

Answer 1

Answer №1

FORM_DIRECTIVES have been incorporated into FormsModule, therefore, it is necessary to import FormsModule and include it in your module's imports.

CORE_DIRECTIVES are now included in CommonModule, which is exported by BrowserModule. Since you are already importing BrowserModule in your AppModule, there is no further action required for CORE_DIRECTIVES. Here is a sample of a basic module with imported FormsModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

Answer 2

FORM_DIRECTIVES have been incorporated into FormsModule, therefore, it is necessary to import FormsModule and include it in your module's imports.

CORE_DIRECTIVES are now included in CommonModule, which is exported by BrowserModule. Since you are already importing BrowserModule in your AppModule, there is no further action required for CORE_DIRECTIVES. Here is a sample of a basic module with imported FormsModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

Answer 3

Answer №2

To properly set up your project, you need to follow these steps:

npm install --save angular2

Additionally, make sure you have the following dependencies in your package.json file:

"dependencies": {
    "@ngrx/store": "^1.2.1",
    "angular2": "^2.0.0-beta.7",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  }

After setting up the project, you can use the following code successfully:

import {ControlGroup, Control, FORM_DIRECTIVES} from "angular2/common";

@Component({
    selector: 'person-form',
    directives: [FORM_DIRECTIVES],
    template: require('./person_form.html')
})

export class PersonForm { ... } 
Unfortunately, if you exclude FORM_DIRECTIVES, it will result in an error:

import {ControlGroup, Control} from "angular2/common";

@Component({
    selector: 'person-form',
    directives: [FORM_DIRECTIVES],
    template: require('./person_form.html')
})

export class PersonForm { ... }

Answer 4

To properly set up your project, you need to follow these steps:

npm install --save angular2

Additionally, make sure you have the following dependencies in your package.json file:

"dependencies": {
    "@ngrx/store": "^1.2.1",
    "angular2": "^2.0.0-beta.7",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  }

After setting up the project, you can use the following code successfully:

import {ControlGroup, Control, FORM_DIRECTIVES} from "angular2/common";

@Component({
    selector: 'person-form',
    directives: [FORM_DIRECTIVES],
    template: require('./person_form.html')
})

export class PersonForm { ... } 
Unfortunately, if you exclude FORM_DIRECTIVES, it will result in an error:

import {ControlGroup, Control} from "angular2/common";

@Component({
    selector: 'person-form',
    directives: [FORM_DIRECTIVES],
    template: require('./person_form.html')
})

export class PersonForm { ... }

Error: The Typescript module in Angular 2 does not have the constant 'FORM_DIRECTIVES' available for export

Answer №1

Answer №2

Similar questions

Encountered an issue during installation: Error message states that Typings command was not

Is there a way to format this into four columns within a single row while ensuring it is responsive?

Tips on incorporating a URL from a text file into a string

Utilize Vue Component by assigning a computed property to the data source

Can you explain what happens to "npm install" and "npm update" when modifications are made to package.json?

Implementing requirejs alongside retinajs for enhanced performance and compatibility

Pinia has not been instantiated yet due to an incorrect sequence of JavaScript file execution within Vue.js

I'm having trouble importing sqlite3 and knex-js into my Electron React application

Obtain the result and retrieve it using `window.angularComponentRef.zone.run`

Encountering complications when importing TypeScript declarations

I'm encountering an issue with VUEJS components including my show route in their get call. How can I make my journals/:id pages function properly without encountering a Mime

React.js: You cannot call this expression. The type 'never' does not have any call signatures

Provide props to vue-router along with boostrap-vue's b-nav-item

"Stay entertained with a captivating animated gif that appears when you refresh the

Tips for resolving the error of encountering a forbidden and unexpected token in JSON at position 0 while using React hooks

Troubleshooting localhost issue with a Chrome extension in Visual Studio Code

express has a req.body that is devoid of any content

If viewed on a mobile device, separate the array (indexed list) into two rows

I am able to retrieve JSON data from the server using Angular, however, I am facing an

Implementing circular generic in Typescript tutorial