[英]Cannot find module 'angular2/angular2'
我正在開發一個帶有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
}
}
我已經安裝了angular2的輸入:
tsd install angular2 --save
請幫助修復錯誤。
@simon錯誤說是在進口中。 但對於進一步的進口,我發布了這個答案可能對其他人也有用。
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'
由於angular2在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
它在測試之前就改變了模塊
import {Component, View} from 'angular2/core';
僅供參考:bootstrap也改為
import {bootstrap} from 'angular2/platform/browser';
因此,網上的很多博客文章都已過時:-(
根據Angular2 rc1的新版本,您可以將package.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';
請注意,作為Angular2最終版本的形式,正確答案是這樣的。
import {Component, View, Directive, Input, Output, Inject, Injectable, provide} from 'angular/core';
import {bootstrap} from 'angular/platform/browser';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf NgForm, Control, ControlGroup, FormBuilder, Validators} from 'angular/common';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router, LocationStrategy, HashLocationStrategy} from 'angular/router';
import {Http, HTTP_PROVIDERS, RequestOptions, Headers, Request, RequestMethod} from 'angular/http'
如上面的yups update 2中所述,這是正確的
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
您正在嘗試從node_modules的錯誤/舊目錄訪問Component。 請從中訪問組件
import { Component, OnInit } from '@angular/core';
而不是: import { Component, View } from 'angular2/angular2';
和
從波紋管路徑訪問bootstrap:
import { bootstrap } from 'angular2/platform/browser';
你必須在最終版本中更新Angular2版本 -
然后使用像----
import { Component } from '@angular/core';
有一個像'@angular/core'
這樣的更新庫
從''angular2 / angular2'導入的是之前的版本,現在不再支持了。現在我們必須從'angular2 / core'導入相同的內容。有關詳細參考用途( https://angular.io/guide/quickstart )
'angular2 / angular2'不是angular2的有效依賴項
你必須首先檢查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]
});
}
而不是必須在app.module.ts文件中導入ReactiveFormsModule
從'@ angular / forms'導入{ReactiveFormsModule};
沒有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} from "@angular/core";
@Component({
selector: "userForm",
template: '<div><input type="text" name="name" [disabled]="flag"/></div>'
});
export class userForm{
public flag = false; //boolean value: true/false
}
第二
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 { }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.