TS2307: Cannot find module 'angular2/core' while importing Angular2 on TypeScript

Question

Hi I have a lil bit of Angular 1 background, I am learning Angular 2.

for starting up with Angular 1, only dependency is to add the angular sources either the angu

Answer 1

As you are new to TypeScript. I still suggest you to follow angular.io docs for 5 min startup. That has specific instruction and quite well explained to get started with it.

Angular2 5 min quickstart page @ angular.io.

What you need to have basically to start:

1. Node.js with npm package manager.
2. Typescript with compiler.
3. A text editor or any IDE, VS Code.
4. Any browser, like Chrome.

---

Install node js and it also installs npm (node package manager). Now from here you need to follow these steps to get started:

1. Create a root folder name of your choice like ng2Playground.
2. Now you have to create one more folder inside it which actually holds all the .ts files/ Component files, You can name it app name is just as per docs.
3. Now at the root level you have to put 4 files.
   3.1. tsconfig.json
   3.2 typings.json
   3.3 package.json
   3.4 index.html
4. When you set it up, as we are not finished yet but you can npm start when we done loading all the dependencies, run this command to start the compilation and watch the application, while you develop other components.

---

Now what should be there in these files as per point 3.

3.1 : tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

3.2 : typings.json

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
  }
}  

3.3 : package.json

{
  "name": "ng2-test",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",    
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install" 
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "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"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

Going very well, congratulations! Yet we need the most important file index.html.

3.4 : index.html

  
  

  
  
  
  

  
  
  
  

  
  






  Loading...

---

Okay!

We have our basic setup quite well, yet we need to install all the dependencies and devdependencies, which is absolutely required. You need to run npm install. This will install all the dependency which we have in the package.json.

When package installation finishes you can find one folder named node_modules which is having all the files as per dependencies in the package.json.

If any error occurs while npm install you just need to update the dev/dependencies.

So, i am assuming you have all the dependencies installed and just let's start:

Now as per point 2, we have a folder named app now we will put our .ts files in it.

Create a file named app.component.ts, see the naming convention .component.ts which denotes that it is a component file. Put this code in it:

import {Component} from 'angular2/core'; // <-- importing Component from core

@Component({
    selector: 'my-app', //<----the element defined in the index.html
    template: '
My First Angular 2 App
' // <---this is the template to put in the component.
})
export class AppComponent { } // <--- we need to export the class AppComponent.  

Now create another file named main.ts. Why main.ts? This is because of index.html, we have defined our Systemjs module loader, see this in index.html

System.import('app/main')

This the content of main.ts:

import {bootstrap}    from 'angular2/platform/browser' // import bootstrap
import {AppComponent} from './app.component' // import the component we just created

bootstrap(AppComponent); // finally bootstrap it.  

Now we are done.

Yay!!!

Yet we need to run it, for this we have to cd ng2Playgroud into it. we need to run this command from command prompt or if you have git bash installed run this:

npm start  

and hit enter. Now it will compile and start the lite-server installed as a dependency. If everything goes well then you'll see the template My First Angular 2 App rendered in the browser.