Cannot find module 'angular2/angular2'
I am developing an node app with angular2 and gulp. I have written a component file login.ts as follows:
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 {
}
And my bootstrap.ts file is:
import {bootstrap} from 'angular2/angular2';
import {login} from './components/login/login';
bootstrap(login);
but when I compile these files it gives me the following errors:
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'.
Here is my tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"watch": true,
"removeComments": true,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
}
}
I have installed the typing for angular2 using:
tsd install angular2 --save
Please help to fix the error.
yups as said by @simon error is in imports. but for further imports i have posted this answer may be this is useful for others too.
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'
update -
@View
is no more in angular2 now, so no need to import
import {view} from 'angular2/core'
Update 2
As of angular2 is in RC so there is breaking change in all imports here is the list if all updated imports -
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
It changed module just ahead of going beta to
import {Component, View} from 'angular2/core';
FYI: bootstrap also changed to
import {bootstrap} from 'angular2/platform/browser';
as a result a lot of the blog posts on the net are out of date :-(
As per the new release of Angular2 rc1, you can update your package.json to
"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",
.....
}
In addition to this also import as following in your component or container:
import { Component } from '@angular/core';
import {ROUTER_DIRECTIVES, Router, RouteParams} from '@angular/router-deprecated';
Please note that as form Angular2 final release the correct answer is this.
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'
This is true as said in yups update 2 from above
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
You are trying to access Component from wrong/old directory of node_modules. Please access Component from
import { Component, OnInit } from '@angular/core';
instead of : import { Component, View } from 'angular2/angular2';
AND
Access bootstrap from bellow path :
import { bootstrap } from 'angular2/platform/browser';