webentwicklung-frage-antwort-db.com.de

TS2307: Das Modul 'angle2/core' kann während des Imports von Angular2 in TypeScript nicht gefunden werden

Hallo, ich habe ein kleines bisschen von Angular 1, ich lerne Angular 2.

für den Start mit Angular 1 besteht die einzige Abhängigkeit darin, die Winkelquellen entweder mit angular.js oder angular.min.js hinzuzufügen.

wenn Sie das gleiche mit dem Angular 2 über Script-Tag versuchen,

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

Ich bekomme Fehler wie

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

also habe ich über SE gesucht und festgestellt, dass system.js und require.js vor dem Laden von angular2 geladen hinzugefügt werden müssen.

wie auch immer, es gelang mir, die beiden Bibliotheken zu laden, 

Ich liebe es, das TypeScript zu kompilieren und die js-Datei bereitzustellen, als das gesamte Skript an den Client zu senden und alles auf der Client-Seite zu übersetzen.

Mein IDE ist WebStorm und wenn ich versuche, eine einfache Komponente zu schreiben,

import {Component} from 'angular2/core';

@Component
class Hello{
    name:string;

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

Ich erhalte diesen Fehler im TypeScript-Compiler unter main.ts, der nach main.js kompiliert wird.

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

TypeScript kompiliert alles, aber importiert nicht aus dem Winkel.

mein einfacher index.html ist unten gezeigt,

<!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>

Was bewirkt, dass TypeScript keine Module aus angualr2 importiert? sollte ich TypeScript mit Angular2 konfigurieren?

Ich bin völlig neu in TypeScript,

Vielen Dank für jede Hilfe

Update

die Ausgabe von tsc 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.
30
Rivadiz

Sie sind neu bei TypeScript. Ich empfehle Ihnen trotzdem, angle.io docs für 5 Minuten Startup zu folgen. Das hat eine spezifische Anweisung und ziemlich gut erklärt, um damit anzufangen. 

Angular2 5-Minuten-Schnellstartseite @ angle.io

Was müssen Sie grundsätzlich haben, um zu beginnen: 

  1. Node.js mit dem npm Paketmanager.
  2. TypeScript mit dem Compiler.
  3. Ein Texteditor oder eine IDE, VS-Code.
  4. Jeder Browser wie Chrome.

Installieren Sie den Knoten js und es wird auch npm (Node Package Manager) installiert. Nun müssen Sie von hier aus die folgenden Schritte ausführen: 

  1. Erstellen Sie einen Stammordnernamen Ihrer Wahl, z. B. ng2Playground.
  2. Jetzt müssen Sie einen weiteren Ordner in diesem Ordner erstellen, der alle .ts-Dateien/Komponentendateien enthält. Sie können den Namen appName ist wie in der Dokumentation
  3. Jetzt müssen Sie auf der Root-Ebene 4 Dateien ablegen.
    3.1. tsconfig.json
    3.2 typings.json
    3.3 package.json
    3.4 index.html 
  4. Wenn Sie es eingerichtet haben, da wir noch nicht fertig sind, npm start wenn Sie alle Abhängigkeiten geladen haben, starten Sie diesen Befehl, um die Kompilierung zu starten und die Anwendung zu beobachten, während Sie andere Komponenten entwickeln.

Was sollte nun in diesen Dateien gemäß Punkt 3 stehen? 

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

Sehr gut, Glückwunsch! Wir benötigen jedoch die wichtigste Datei 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>

Okay!

Wir haben unsere Grundeinstellung ziemlich gut, aber wir müssen alle Abhängigkeiten und Abhängigkeiten installieren, was absolut notwendig ist. Sie müssen npm install ausführen. Dies installiert alle Abhängigkeiten, die wir im package.json haben. 

Wenn die Paketinstallation abgeschlossen ist, können Sie einen Ordner mit dem Namen node_modules finden, in dem alle Dateien gemäß den Abhängigkeiten in package.json enthalten sind. 

Wenn während npm install ein Fehler auftritt, müssen Sie lediglich die dev/-abhängigkeiten aktualisieren. 

Ich gehe also davon aus, dass Sie alle Abhängigkeiten installiert haben, und lassen Sie uns einfach beginnen: 

Jetzt haben wir gemäß Punkt 2 einen Ordner mit dem Namen app. Jetzt werden wir unsere .ts-Dateien darin ablegen. 

Erstellen Sie eine Datei mit dem Namen app.component.ts, siehe Benennungskonvention .component.ts, die angibt, dass es sich um eine Komponentendatei handelt. Fügen Sie diesen Code ein: 

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.  

Erstellen Sie nun eine weitere Datei mit dem Namen main.ts. Warum main.ts? Dies liegt an index.html, wir haben unseren Systemjs-Modul-Loader definiert, siehe hierzu index.html 

System.import ('app/main') 

Dies ist der Inhalt von 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.  

Nun sind wir fertig. 

Yay!!!

Wir müssen es jedoch ausführen, dafür müssen wir cd ng2Playgrouden. Wir müssen diesen Befehl über die Eingabeaufforderung ausführen. Wenn Sie git bash installiert haben, führen Sie Folgendes aus: 

npm start  

und drücken Sie die Eingabetaste. Nun wird der lite-server als Abhängigkeit installiert und gestartet. Wenn alles gut geht, sehen Sie die im Browser gerenderte Vorlage My First Angular 2 App

38
Jai

Ich konnte dieses Problem durch Hinzufügen von "moduleResolution": "node" zu meiner Datei "tsconfig.json" beheben

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

beantworten Sie zunächst die Frage Was bewirkt, dass TypeScript keine Module aus angualr2 importiert? sollte ich TypeScript mit Angular2 konfigurieren? Sie haben den Modullader importiert, aber nicht konfiguriert. Sie müssen TypeScript nicht mit Angular2 konfigurieren, sondern den Modul-Loader.

Da die akzeptierte Antwort veraltet ist (für eine Beta-Version von Angular2),

Viele Dinge haben sich geändert, einschließlich des Moduls Loader im aktuellen Release Candidate of Angular 2 (RC2).

Die Verzeichnisstruktur.

.                             # 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

Die Dateien sind.

app: App-Verzeichnis, in dem sich die Projektdateien befinden. 
app.component.ts: App-Komponentendatei
main.ts: Einstiegspunkt und Bootstrap
bs-config.js: Konfiguration des Lite-Servers (eines dev-Servers basierend auf Browsersync)
index.html: Indexseite der Anwendung
node_modules: Hier werden die npm-Pakete installiert
package.json: npm-Konfigurationsdatei
systemjs.config.js: SystemJS-Konfiguration 
tsconfig.json: Konfiguration des TypeScript-Compilers
typings.json: Typdefinitionen

Inhalt jeder Datei.

  1. index.html datei

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


Abhängigkeiten installieren

Führen Sie nach dem Speichern aller oben genannten Dateien npm install in einem Terminalfenster am Projektspeicherort aus. Dadurch werden alle Abhängigkeiten im node_modules-Verzeichnis installiert. Dies kann je nach Verbindungsgeschwindigkeit einige Zeit in Anspruch nehmen.

Entwicklungsserver ausführen

Führen Sie nach der Installation aller Abhängigkeiten npm start am Terminal am Projektstandort aus. Dadurch werden der TypeScript-Compiler und der lite-server gleichzeitig ausgeführt. Dies hilft beim Kompilieren/Transpilieren des Codes und beim erneuten Laden der Webseite, wenn Sie den Quellcode ändern.

Jetzt öffnet sich möglicherweise ein neues Browserfenster. Wenn nicht, verweisen Sie in Ihrem bevorzugten Browser auf **http://127.0.0.1:3000/** oder http://localhost:3000/. Wenn alles gut geht, sehen Sie eine Seite mit der Aufschrift:

Hallo Welt von Angular 2

Das ist es!.


Wenn Sie nicht möchten, dass der Lite-Server den Browser bei jeder Ausführung von npm start automatisch öffnet, fügen Sie Ihrem bs-config.js Folgendes hinzu.

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

codebeispiele aus angle.io

3

Verwenden Sie stattdessen '@angular/core''angular2/core'

2
Sebastián Lara

Tun Sie dies in 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>

versuchen Sie es mit dieser ersten Komponente:

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

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

bootstrap(App); 

ihre Index.html-Datei enthält einen Alot. wie beim Importieren der Hauptkomponente mit system.js. das heißt 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

Stellen Sie sicher, dass sich der Ordner 'node_modules' (klicken Sie auf ausgeblendete Dateien anzeigen) am richtigen Ort (im Stammverzeichnis des Projekts, gleichgeordnetes Element mit wwwroot). Auch check @angular wird im Projekt Dependencies Ordner angezeigt:

[proj. name]/Abhängigkeiten/npm/@ angle ...

Ich habe Dateien verschoben, während ich die Schnellstartanleitung in ein neues ASP.NET Core-Projekt integriert hatte, und der Ordner node_modules wurde falsch platziert.

hoffe das hilft

0

Sie sollten diese Dateien importieren:

<!-- 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>

Und verwenden Sie diese Konfiguration für SystemJS:

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

Ich gehe davon aus, dass sich Ihre TypeScript-Dateien in einem app-Unterordner befinden und der app/boot.ts derjenige ist, der den Aufruf der bootstrap-Funktion enthält.

0