node.js لا يمكن العثور على الوحدة 'angular2/angular2'




typescript (9)

أقوم بتطوير تطبيق عقدة مع angular2 و gulp. لقد كتبت ملف login.ts للمكونات كما يلي:

import {Component, View} from 'angular2/angular2';
import {FormBuilder,  formDirectives } from 'angular2/forms';
@Component({
  selector: 'login',
  injectables: [FormBuilder]
})
@View({
  templateUrl: '/scripts/src/components/login/login.html',
  directives: [formDirectives]
})

export class login {

}

وملف bootstrap.ts الخاص بي هو:

import {bootstrap} from 'angular2/angular2';

import {login} from './components/login/login';

bootstrap(login);

ولكن عندما أقوم بتجميع هذه الملفات يعطيني الأخطاء التالية:

client\bootstrap.ts(1,25): error TS2307: Cannot find module 'angular2/angular2'.
client\components\login\login.ts(1,31): error TS2307: Cannot find module 'angular2/angular2
client\components\login\login.ts(2,45): error TS2307: Cannot find module 'angular2/forms'.

هنا هو بلدي tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true,
        "watch": true,
        "removeComments": true,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true
    }
}

لقد قمت بتثبيت الكتابة للزاوية 2 باستخدام:

tsd install angular2 --save

الرجاء المساعدة لإصلاح الخطأ.


انها تغيرت وحدة فقط قبل الذهاب إلى بيتا

import {Component, View} from 'angular2/core';

لمعلوماتك: bootstrap تغيرت أيضا إلى

import {bootstrap} from 'angular2/platform/browser';

ونتيجة لذلك الكثير من المشاركات بلوق على شبكة الإنترنت هي قديما :-(


أنت تحاول الوصول إلى مكون من الدليل الخاطئ / القديم لـ node_modules. يرجى الوصول إلى مكون من

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

بدلاً من: import { Component, View } from 'angular2/angular2';

و

وصول bootstrap من مسار رفع الصوت عاليا:

import { bootstrap } from 'angular2/platform/browser';

الاستيراد من '' angular2 / angular2 'كان في الإصدار السابق الذي لم يعد مدعومًا الآن. والآن يجب علينا استيراد نفس من "angular2 / core". لاستخدام مرجع التفاصيل ( https://angular.io/guide/quickstart )


"angular2 / angular2" ليست تبعيات صالحة للزاوية 2

يجب عليك أولاً التحقق من ملف package.json "@ angular / core" أو لا

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "2.0.0",
    "@angular/router-deprecated": "2.0.0",
    "@angular/upgrade": "2.0.0",
    .....
 }

انظر ملف مكون مثل هذا وأيضا لديك أيضا استخدام formGroup كما belove

    import { Component, OnInit, DoCheck } from '@angular/core'
    import { Router } from '@angular/router'

    import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms'

    @Component({
      selector: 'app-user-profile',
      templateUrl: './user-profile.component.html',
      styleUrls: ['./user-profile.component.scss'],
    })
    export class UserProfileComponent implements OnInit, DoCheck {
      profileForm: FormGroup

      constructor(private fb: FormBuilder) {
        this.profileForm = this.fb.group({
          firstName: ['', Validators.required],
          lastName: ['', Validators.required],
          email: ['', Validators.required],
          mobileNo: ['', Validators.required]
        });
    }

من عليك استيراد ReactiveFormsModule في ملف app.module.ts
import {ReactiveFormsModule} من '@ angular / forms'؛

بدون ReactiveFormsModule formGroup لا تعمل تجعل الخطأ

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserProfileComponent } from './user-profile.component';

import { UserProfileRoutingModule } from './user-profile-routing.module';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    UserProfileRoutingModule,
    ReactiveFormsModule
  ],
  declarations: [UserProfileComponent]
})

نعم كما قال من قبل @ سيمون خطأ في الواردات. ولكن لمزيد من الواردات لقد نشرت هذه الإجابة قد يكون هذا مفيد للآخرين أيضا.

import {Component, View, Directive, Input, Output, Inject, Injectable, provide} from 'angular2/core'; 

import {bootstrap} from 'angular2/platform/browser';

import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf  NgForm, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';

import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {Http, HTTP_PROVIDERS, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http'

تحديث -

@View لم يعد في angular2 الآن ، لذلك لا حاجة إلى الاستيراد

import {view} from 'angular2/core'

تحديث 2

اعتبارا من الزاوية 2 في RC لذلك هناك تغيير كسر في جميع الواردات هنا هي قائمة إذا كان كل الواردات المحدثة -

angular2/core -> @angular/core
angular2/compiler -> @angular/compiler
angular2/common -> @angular/common
angular2/platform/common -> @angular/common
angular2/common_dom -> @angular/common
angular2/platform/browser -> @angular/platform-browser-dynamic
angular2/platform/server -> @angular/platform-server
angular2/testing -> @angular/core/testing
angular2/upgrade -> @angular/upgrade
angular2/http -> @angular/http
angular2/router -> @angular/router
angular2/platform/testing/browser -> @angular/platform-browser-dynamic/testing

  • أولاً قم بتحديث برامج تحرير angular2 الخاصة بك في packege.json.
  • ثانيا

     import {Component} from "@angular/core";
     import {FormBuilder } from "@angular/forms";
    
     @Component({
      selector: "login",
      providers: [FormBuilder],
      templateUrl: "/scripts/src/components/login/login.html"
     })
    
    
     export class login {
    
     }
    

أفضل طريقة لركلة من مشروع angular2 هي استخدام Angular CLI .

يجعل CLIP الزاوي من السهل إنشاء تطبيق يعمل بالفعل ، مباشرة من خارج منطقة الجزاء. يتبع بالفعل أفضل ممارساتنا!

يرجى التحقق من ذلك لمزيد من التفاصيل.


يجب عليك تحديث إصدار Angular2 في الإصدار النهائي -

ثم استخدم مثل ----

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

هناك مكتبة محدثة مثل --- '@angular/core'


وفقًا للإصدار الجديد من Angular2 rc1 ، يمكنك تحديث الحزمة. json إلى

"dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.1",
    "@angular/upgrade": "2.0.0-rc.1",
    .....
 }

بالإضافة إلى ذلك أيضًا استيراد ما يلي في المكون أو الحاوية:

import { Component } from '@angular/core';
import {ROUTER_DIRECTIVES, Router, RouteParams} from '@angular/router-deprecated';






angular