Angularjs 2 RC5 表单无法加载答案

【问题标题】：Angularjs 2 RC5 Form can not be loadedAngularjs 2 RC5 表单无法加载
【发布时间】：2016-12-28 06:44:24
【问题描述】：

这对于表单来说是一个非常烦人的问题。我的 package.json 是：

 "dependencies": {

     "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",

     "angular2-in-memory-web-api": "0.0.15",

    "systemjs": "0.19.36",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.11",
    "zone.js": "^0.6.12",

    "bootstrap": "^3.3.6"
  },

但是当我使用这个时：

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

发送错误，找不到表单。我也没有在 angular/forms 目录中看到 FormsModule。

谁能帮我看看你是如何在 angular2 中导入表单的？

我试过这个：

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

但现在在我的 webConsole 中，我确实看到了：

zone.js:101 GET http://localhost:3010/node_modules/@angular/forms@0.3.0//bundles/forms.umd.js 404 (Not Found)

为什么它一直在表单名称中添加 0.3.0？应该是：

http://localhost:3010/node_modules/@angular/forms/bundles/forms.umd.js

【问题讨论】：

你的 systemjs.config.js 是什么样的？我问的原因是因为在此文件中解析了表单模块的地址（以及其他模块）。
知道了，我是这样的：'@angular/forms': 'node_modules/@angular/forms' + formsVer，但在我将其更改为：'@angular/forms': 'node_modules/ @angular/forms'，现在很好。比

标签： angularjs angular angular2-template angular2-forms

【解决方案1】：

//在app.module.ts中

//对于数据驱动的表单 -->

import { DataDrivenComponent } from "./data-driven/data-driven.component";
import { ReactiveFormsModule } from '@angular/forms';

//其他必要的导入

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

//Ng模块

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

//导出类

export class AppModule {}

【讨论】：