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

Question

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.

Jai · Accepted Answer

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:

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:

Erstellen Sie einen Stammordnernamen Ihrer Wahl, z. B. ng2Playground.
Jetzt müssen Sie einen weiteren Ordner in diesem Ordner erstellen, der alle .ts-Dateien/Komponentendateien enthält. Sie können den Namen app Name ist wie in der Dokumentation.
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
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.

Randall Melton · Answer

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

All Іѕ Vаиітy · Answer

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.

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>

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

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);

tsconfig.json

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

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

main.ts

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

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

Sebasti&#225;n Lara · Answer

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

Pardeep Jain · Answer

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

Carlos R Balebona · Answer

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

Thierry Templier · Answer

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.