ts cannot find module '@angular/platform-browser';

Question

Images of files

I am having this error and i am not able to figure that out.I am trying to import angular/core and angular/platform-browser . I followed many links on stackoverflow but none of them helped me out.

this is my package.json file

{   "name": "angular-2",   "version": "1.0.0",   "scripts": {
    "start": "concurrently \"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.13",
    "systemjs": "0.19.25",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "@angular/router":  "3.0.0-alpha.7",
    "zone.js": "0.6.6"
       },   "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.8.9",
    "typings":"^0.7.11"   } }

I think for verify your imports will be good if you can share your package.json — Ricardo Cunha, Feb 14 '17 at 11:24
update your package.json file from this link https://github.com/angular/quickstart/blob/master/package.json — Ahmar, Feb 14 '17 at 12:18

score 15 · Answer 1 · answered Feb 14 '17 at 11:48

15

I think you need install and add @angular/platform-browser in your package.json you can do this:

npm install @angular/platform-browser --save

So, at this moment angular2 has a final version, youi don't need to use a beta version. You tagged your project like an ionic2 project, but he doesn't seen like a normal ionic2 app, you don't have any ionic/cordova dependecy in your package.json

answered Feb 14 '17 at 11:48

Ricardo Cunha

2,013
6
24
42

Ricardo, I agree. You need to install everything that's missing: sudo npm i @angular/core@ sudo npm i @angular/compiler@ sudo npm i @angular/platform-browser-dynamic@ ... – GenTech Mar 19 '18 at 09:58
this fixed this issue for me, aim at the directory your project is installed in and run the above. thanks for this! – petey m Jul 31 '18 at 14:03

score 7 · Answer 2 · answered Oct 20 '18 at 08:35

Gone through same problem, and here's one firm solution to this.

I am assuming you have generated an angular cli project and this is what you have ran into once you've started to code.

Solution

So what happens is at times angular fails to install all the required dependencies, and does not even update on npm install.

Steps

1. Delete existing folders @angular & @angular-devkit inside node_modules folder
2. perform npm install, or yarn

And this should work for almost all scenarios. At Least worked for me couple of times.

score 6 · Answer 3 · answered Oct 07 '18 at 11:30

6

Try running

npm install -g @angular/cli

if still getting errors then close and reopen your editor I faced it in my Visual Studio when I copied src of my existing project and placed it in newly created cli project (to avoid making new components again)

answered Oct 07 '18 at 11:30

T. Shashwat

1,135
10
23

7

close and reopen your editor!!!!!!!!!! i spend hours before i find this answer. – אברימי פרידמן Aug 13 '20 at 18:16
Spent hours trying to find a solution then booooom!!!! your answer saved the day. Thank you. – Dev Enock Jan 06 '23 at 10:50

score 2 · Answer 4 · edited Nov 11 '19 at 09:38

2

It's possible that the dependencies were just not installed right, or maybe you need to re-install them. I had a similar issue and all these answers are good.

try in your terminal:

npm install --save @angular/platform-browser

npm install --save @angular/core

hope this works!

edited Nov 11 '19 at 09:38

MohammedAli

2,361
2
19
36

answered Sep 13 '19 at 23:15

Jordan

117
1
1
11

score 1 · Answer 5 · answered Jun 28 '22 at 16:56

1

I too faced this issue, delete the node modules folder and then clean the cache using >npm cache clean --force. Install the node modules again globally using npm install --save @ng-bootstrap/ng-bootstrap npm install --legacy-peer-deps

it will work

answered Jun 28 '22 at 16:56

APARNA PATHAK

11
2

Hii Aparna. Thanks for you answer! Just a suggestion: stackoverflow supports code blocks. You can use them to make your answer clearer, with the commands you mentioned inside the code blocks – viniciusjssouza Jun 29 '22 at 14:35

score 0 · Answer 6 · answered Feb 14 '17 at 11:56

Looking at your package.json, you are using older version of angular2

"angular2": "2.0.0-beta.13"

You need to use below dependecies in your package.json

  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",

Please note - From angular2 2.0.0-rc.0 version, they moved into scoped packages hence you will see @angular/<packagename>. Before this, it was angular2. Refer this info

For latest versions refer this link

After updating dependency, have you ran `npm install` command? — Sanket, Feb 14 '17 at 13:30

Shehram Tahir · Answer 7 · 2017-02-14T14:07:50.953

0

i figured out the answer by applying changes to the tsconfig file

 {
  "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"
  ]
}

and I also updated package.json file.

edited Feb 14 '17 at 14:07

answered Feb 14 '17 at 13:45

Shehram Tahir

915
2
9
19

18

What changes to tsconfig file? Which setting was the problem, or which ones did you add? Also, what did you update in your package.json file? – Zoran Pavlovic Oct 22 '17 at 09:33

score 0 · Answer 8 · answered Oct 23 '17 at 03:51

0

Try to reinstall @types/node:

npm uninstall --save-dev @types/node
npm install --save-dev @types/node

If it doesn't help try the same with typescript:

npm uninstall --save-dev typescript
npm install --save-dev typescript

answered Oct 23 '17 at 03:51

Yekke

29
2

score 0 · Answer 9 · answered Oct 21 '19 at 07:00

You can update your application and its dependencies by using ng update command, like this:

ng update --all=true --force

here, flag all is set to true to update all dependencies and flag force is used to do it forcefully as name suggests.Now after doing so you may face some vulnerabilities for few dependencies which can be fixed by manually installing those dependencies.

score -5 · Answer 10 · edited May 20 '18 at 20:14

-5

Just use bellow command at project path.

E:\Ratna\Angular\Project1\Demo>npm install

npm install

it is works.

edited May 20 '18 at 20:14

Mohammad Kanan

4,452
10
23
47

answered May 20 '18 at 19:38

rathna kumar

1

This is entirely off topic – Adeel Shekhani Apr 14 '20 at 15:09

ts cannot find module '@angular/platform-browser';

10 Answers10

Solution