web-dev-qa-db-fra.com

TS2307: Impossible de trouver le module 'angular2/core' lors de l'importation de Angular2 sur TypeScript

Bonjour, j'ai un peu de fond angulaire 1, j'apprends angulaire 2.

pour démarrer avec Angular 1, seule la dépendance consiste à ajouter les sources angulaires soit le angular.js ou le angular.min.js,

en essayant la même chose avec Angular 2 via script tag,

<script src="angular2.js"></script>

Je reçois des erreurs comme

  • Uncaught ReferenceError: System is not defined
  • Uncaught ReferenceError: define is not defined

donc j'ai cherché sur SE et trouvé, system.js et require.js doivent être ajoutés chargés avant de charger angular2.

de toute façon j'ai réussi à charger les deux bibliothèques, 

J'aime compiler le TypeScript et servir le fichier js au lieu d'envoyer tous les scripts au client et de tout compiler/transpiler du côté client.

Mon IDE est WebStorm et lorsque j'essaie d'écrire un composant simple,

import {Component} from 'angular2/core';

@Component
class Hello{
    name:string;

    constructor() {
        this.name = "HelloWorld";
    }
}

Je reçois cette erreur sur le compilateur TypeScript sur main.ts, qui compile pour main.js,

Error:(1, 25) TS2307: Cannot find module 'angular2/core'.

TypeScript compile tout sans importer depuis angular.

mon simple index.html est montré ci-dessous,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>

</head>
<body>

    <script src="system.js"></script>
    <script src="require.js"></script>
    <script src="angular2.js"></script>
    <script src="main.js"></script>
</body>
</html>

Qu'est-ce qui empêche TypeScript de ne pas importer les modules d'angualr2? dois-je configurer TypeScript avec Angular2?

Je suis totalement nouveau sur TypeScript,

Merci beaucoup pour toute aide

Mettre à jour

la sortie tw main.ts --watch:

main.ts(1,25): error TS2307: Cannot find module 'angular2/core'.
main.ts(4,7): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
11:43:39 PM - Compilation complete. Watching for file changes.
javascriptangulartypescript
30
Rivadiz

Comme vous êtes nouveau dans TypeScript. Je vous suggère quand même de suivre dangular.io docs pendant 5 min de démarrage. Cela a des instructions spécifiques et très bien expliqué pour commencer avec elle. 

Angular2 page de démarrage rapide 5 min @ angular.io . 

Ce dont vous avez besoin pour commencer: 

  1. Node.js avec le gestionnaire de paquets npm.
  2. TypeScript avec compilateur.
  3. Un éditeur de texte ou n’importe quel IDE, Code VS.
  4. N'importe quel navigateur, comme Chrome.

Installez le noeud js et installe également npm (gestionnaire de package de noeud)}. Maintenant, à partir de là, vous devez suivre ces étapes pour commencer: 

  1. Créez un nom de dossier racine de votre choix, tel que ng2Playground.
  2. Vous devez maintenant créer un autre dossier dans celui-ci, qui contient en fait tous les fichiers .ts/Composant. Vous pouvez le nommer apple nom est identique à celui indiqué dans la documentation 
  3. Maintenant, au niveau racine, vous devez mettre 4 fichiers.
    3.1. tsconfig.json
    3.2 typings.json
    3.3 package.json
    3.4 index.html 
  4. Lorsque vous le configurez, nous n’avons pas encore terminé, mais vous pouvez npm start une fois toutes les dépendances chargées, exécutez cette commande pour lancer la compilation et regarder l’application pendant que vous développez d’autres composants.

Maintenant ce qui devrait être là dans ces fichiers selon le 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"
  }
}

Ça va très bien, félicitations! Pourtant, nous avons besoin du fichier le plus important index.html. 

3.4: index.html

<!doctype html>
<html>
<head>
  <title>Angular 2 QuickStart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- 1. Load libraries -->
  <!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

  <!-- 2. Configure SystemJS -->
  <script>
    System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        }
      }
    });
    System.import('app/main')
      .then(null, console.error.bind(console));
  </script>

</head>

<!-- 3. Display the application -->

<body>
  <my-app>Loading...</my-app>
</body>

</html>

D'accord!

Nous avons assez bien notre configuration de base, mais nous devons installer toutes les dépendances et devdependencies, ce qui est absolument nécessaire. Vous devez exécuter npm install. Cela installera toutes les dépendances que nous avons dans le package.json. 

Lorsque l'installation du package est terminée, vous pouvez trouver un dossier nommé node_modules qui contient tous les fichiers en fonction des dépendances dans le package.json. 

_ {Si une erreur survient pendant que npm install, il vous suffit de mettre à jour dev/dependencies.} _ 

Donc, je suppose que toutes les dépendances sont installées et commençons: 

En ce qui concerne le point 2, nous avons un dossier nommé app et nous y placerons nos fichiers .ts. 

Créez un fichier nommé app.component.ts, reportez-vous à la convention d'appellation .component.ts qui indique qu'il s'agit d'un fichier de composant. Mettez ce code dedans: 

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

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

Créez maintenant un autre fichier nommé main.ts. Pourquoi main.ts? C'est à cause de index.html, nous avons défini notre chargeur de module Systemjs, voir ceci dans index.html 

System.import ('app/main') 

C'est le contenu de 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.

Maintenant nous avons fini. 

Yay!!!

Cependant, nous devons l'exécuter, pour cela, nous devons cd ng2Playgroud dans celui-ci. nous devons exécuter cette commande à partir de la commande Invite ou, si vous avez installé git bash, lancez ceci: 

npm start

et appuyez sur Entrée. Maintenant, il va compiler et démarrer le lite-server installé en tant que dépendance. Si tout se passe bien, le modèle My First Angular 2 App sera affiché dans le navigateur. 

38
Jai

J'ai pu résoudre ce problème en ajoutant "moduleResolution": "node" à mon fichier tsconfig.json

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

tout d'abord, répondez à la question Qu'est-ce qui empêche TypeScript d'importer des modules depuis angualr2? dois-je configurer TypeScript avec Angular2? Vous avez importé le chargeur de modules mais ne l'avez pas configuré. Vous n'avez pas besoin de configurer TypeScript avec Angular2 mais avec le chargeur de module.

Puisque la réponse acceptée est obsolète (visant une version bêta d’Angular2),

Beaucoup de choses ont changé, y compris le chargeur de modules dans la version actuelle de la version candidate d’Angular 2 (RC2), c’est ce qui fonctionne pour moi,

La structure du répertoire.

.                             # project directory
├── app                       # main app directory
│   ├── app.component.ts
│   └── main.ts
├── bs-config.js             
├── index.html
├── node_modules              # npm package directory
├── package.json
├── styles.css
├── systemjs.config.js
├── tsconfig.json
└── typings.json

Les fichiers sont.

app: répertoire de l'application où résident les fichiers du projet. 
app.component.ts: fichier de composant d'application
main.ts: Point d'entrée et bootstrap
bs-config.js: configuration du serveur Lite (un serveur de développement basé sur browsersync)
index.html: page d'index de l'application
node_modules: où les packages npm sont installés
package.json: fichier de configuration npm
systemjs.config.js: configuration de SystemJS 
tsconfig.json: Configuration du compilateur TypeScript
typings.json: Définitions de type

Contenu de chaque fichier.

  1. fichier index.html

    <html>
  <head>
    <title>Hello Angular 2</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

  2. package.json

    {
    "name": "hello-angular-2",
    "version": "1.0.0",
    "scripts": {
      "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
      "lite": "lite-server",
      "postinstall": "typings install",
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "typings": "typings"
    },
    "license": "ISC",
    "dependencies": {
      "@angular/common":  "2.0.0-rc.2",
      "@angular/compiler":  "2.0.0-rc.2",
      "@angular/core":  "2.0.0-rc.2",
      "@angular/http":  "2.0.0-rc.2",
      "@angular/platform-browser":  "2.0.0-rc.2",
      "@angular/platform-browser-dynamic":  "2.0.0-rc.2",
      "@angular/router":  "2.0.0-rc.2",
      "@angular/router-deprecated":  "2.0.0-rc.2",
      "@angular/upgrade":  "2.0.0-rc.2",
      "systemjs": "0.19.27",
      "core-js": "^2.4.0",
      "reflect-metadata": "^0.1.3",
      "rxjs": "5.0.0-beta.6",
      "zone.js": "^0.6.12",
      "angular2-in-memory-web-api": "0.0.12",
      "bootstrap": "^3.3.6"
    },
    "devDependencies": {
      "concurrently": "^2.0.0",
      "lite-server": "^2.2.0",
      "TypeScript": "^1.8.10",
      "typings":"^1.0.4"
    }
  }

  3. systemjs.config.js

    /**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

  4. tsconfig.json

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

  5. typings.json

    {
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

  6. main.ts

    import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

  7. app.component.ts

    import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>Hello World from Angular 2</h1>'
})
export class AppComponent { }


Installation de dépendances

Après avoir enregistré tous les fichiers ci-dessus, exécutez npm install sur une fenêtre de terminal à l’emplacement du projet. Toutes les dépendances seront installées dans le répertoire node_modules, ce qui peut prendre un certain temps en fonction de la vitesse de votre connexion.

Exécution du serveur de développement

Après avoir installé toutes les dépendances, exécutez npm start sur le terminal à l'emplacement du projet. Ceci exécutera simultanément le compilateur TypeScript et le lite-server, ce qui aidera à compiler/transpiler le code et à recharger la page Web chaque fois que vous modifierez le code source.

Une nouvelle fenêtre de navigateur peut maintenant s'ouvrir. Sinon, pointez votre navigateur préféré sur **http://127.0.0.1:3000/** ou http://localhost:3000/. Si tout se passe bien, vous verrez une page disant:

Bonjour tout le monde de Angular 2

C'est ça!.

Si vous ne voulez pas que le serveur lite ouvre le navigateur automatiquement à chaque fois que vous exécutez npm start, ajoutez ce qui suit à votre bs-config.js.

module.exports = {
    "open": false
};

exemples de code de angular.io

3
All Іѕ Vаиітy

Utilisez '@angular/core' à la place de 'angular2/core'

2
Sebastián Lara

Faites ceci dans index.html:

<html>

<head>
    <base href="/"></base>
</head>

<body>
    <app>Loading....</app>
</body>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
    System.config({
                defaultJSExtensions: true
            });

</script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>    
<script>
    System.import('App');
</script>

</html>

essayez d'utiliser ceci votre premier composant:

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

@Component({
    selector: 'app',
    template: "Hello"
})
export class App{  
    constructor(){ }    
}

bootstrap(App);

votre fichier Index.html a beaucoup de manquant. comme importer le composant principal en utilisant system.js. i.e System.import('App');

tsconfig.json:

{
  "version": "1.5.3",
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false
  }
}
1
Pardeep Jain

Assurez-vous que le dossier 'node_modules' (cliquez sur Afficher les fichiers cachés) se trouve au bon emplacement (à la racine du projet, frère de wwwroot). Vérifiez également que @angular est affiché dans le dossier projet Dépendances :

[proj. name]/Dependencies/npm/@ angular ...

Je déplaçais des fichiers alors que j'intégrais le guide de démarrage rapide dans un nouveau projet ASP.NET Core et que le dossier node_modules était égaré.

j'espère que cela t'aides

0
Carlos R Balebona

Vous devriez importer ces fichiers:

<!-- ZonesJS and Reflect-metadata -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- RxJS (observables) -->
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<!-- Main Angular2 bundle -->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

Et utilisez cette configuration pour SystemJS:

<script>
  System.config({
    defaultJSExtensions: true,
    packages: {
      app: {
        defaultExtension: 'js',
        format: 'register'
      }
    }
  });
  System.import('app/boot')
    .then(null, console.error.bind(console));
</script>

Je suppose que vos fichiers TypeScript sont situés dans un sous-dossier app et que le app/boot.ts est celui qui contient l'appel à la fonction bootstrap.

0
Thierry Templier