módulo encuentra cannot javascript angular typescript

javascript - encuentra - TS2307: No se puede encontrar el módulo ''angular2/core'' al importar Angular2 en TypeScript



no se encuentra el módulo ''@ angular platform browser (7)

Asegúrese de que la carpeta ''node_modules'' (haga clic en show hidden files) esté en la ubicación correcta (en la raíz del proyecto, hermano con wwwroot). También marque @angular que se muestra en la carpeta Dependencias del proyecto:

[proj. nombre] / Dependencias / npm / @ angular ...

Estaba moviendo archivos mientras integraba la guía de inicio rápido en un nuevo proyecto ASP.NET Core, y la carpeta node_modules fue extraviada.

espero que esto ayude

Hola, tengo un poco de fondo angular 1, estoy aprendiendo Angular 2.

para comenzar con Angular 1, solo la dependencia es agregar las fuentes angulares ya sea angular.js o angular.min.js ,

cuando intente lo mismo con la etiqueta Angular 2 a través de script,

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

Recibo errores como,

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

así que busqué SE y encontré, system.js y system.js deben agregar cargados antes de cargar angular2 .

de cualquier manera que logré cargar las dos bibliotecas,

Me encanta compilar TypeScript y servir el archivo js que enviar todo el script al cliente y compilar / transpilar todo el lado del cliente.

Mi IDE es WebStorm y cuando intento escribir un componente simple,

import {Component} from ''angular2/core''; @Component class Hello{ name:string; constructor() { this.name = "HelloWorld"; } }

Estoy obteniendo este error en el compilador de TypeScript en main.ts , que se compila en main.js ,

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

TypeScript compila todo pero no importa desde angular.

mi simple index.html se muestra a continuación,

<!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á haciendo que TypeScript no importe módulos de angualr2? ¿Debería configurar TypeScript con Angular2?

Soy totalmente nuevo en TypeScript,

Muchísimas gracias por toda ayuda

Actualizar

tsc main.ts --ver la salida:

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.

Como es nuevo en TypeScript . Todavía te sugiero que sigas los documentos de angular.io durante 5 minutos de inicio . Eso tiene instrucciones específicas y bastante bien explicadas para comenzar a usarlo.

Angular2 página de inicio rápido de 5 minutos @ angular.io .

Lo que necesitas tener básicamente para comenzar:

  1. Node.js con el administrador de paquetes npm.
  2. Typescript con compilador.
  3. Un editor de texto o cualquier código IDE, VS.
  4. Cualquier navegador, como Chrome .

Instale el nodo js y también instala npm (node ​​package manager) . Ahora desde aquí necesita seguir estos pasos para comenzar:

  1. Cree un nombre de carpeta raíz de su elección como ng2Playground .
  2. Ahora tiene que crear una carpeta más dentro de ella que contenga todos los archivos .ts / archivos de componentes, puede nombrar el nombre de la app acuerdo con los documentos .
  3. Ahora, en el nivel raíz, debes poner 4 archivos.
    3.1. tsconfig.json
    3.2 typings.json
    3.3 paquete.json
    3.4 index.html
  4. Cuando lo configura, ya que aún no hemos terminado, pero puede npm start cuando terminamos de cargar todas las dependencias, ejecute este comando para comenzar la compilación y observar la aplicación, mientras desarrolla otros componentes.

Ahora, ¿qué debería estar allí en estos archivos según el punto 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: paquete.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" } }

¡Te va muy bien, felicitaciones! Sin embargo, necesitamos el archivo más importante 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>

¡Bueno!

Tenemos nuestra configuración básica bastante bien, sin embargo, necesitamos instalar todas las dependencias y dependencias, lo cual es absolutamente necesario. Necesitas ejecutar la npm install . Esto instalará toda la dependencia que tenemos en el package.json .

Cuando finaliza la instalación del paquete, puede encontrar una carpeta llamada node_modules que tiene todos los archivos según las dependencias en el package.json .

Si se produce algún error durante la npm install , solo necesita actualizar los desarrolladores / dependencias.

Entonces, supongo que tienes todas las dependencias instaladas y solo comencemos:

Ahora, según el punto 2, tenemos una carpeta llamada app ahora pondremos nuestros archivos .ts en ella.

Cree un archivo llamado app.component.ts , consulte la convención de nomenclatura .component.ts que denota que es un archivo de componente. Pon este código en él:

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.

Ahora crea otro archivo llamado main.ts ¿Por qué main.ts ? Esto es debido a index.html , hemos definido nuestro cargador de módulos Systemjs , vea esto en index.html

System.import (''app / main'')

Este es el contenido 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.

Ahora hemos terminado.

¡¡¡Hurra!!!

Sin embargo, tenemos que ejecutarlo, para esto tenemos que cd ng2Playgroud en él. necesitamos ejecutar este comando desde el símbolo del sistema o si tiene instalado git bash, ejecute esto:

npm start

y presiona enter. Ahora compilará e iniciará el lite-server instalado como una dependencia. Si todo va bien, verá la plantilla My First Angular 2 App renderizada en el navegador.

Debe importar estos archivos:

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

Y use esta configuración para SystemJS:

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

Supongo que sus archivos TypeScript se encuentran en una subcarpeta de la app/boot.ts y la app/boot.ts es la que contiene la llamada a la función de bootstrap .

En primer lugar, respondiendo a la pregunta: ¿Qué hace que TypeScript no importe módulos de angualr2? ¿Debería configurar TypeScript con Angular2? Has importado el cargador de módulos pero no lo has configurado. No es necesario configurar TypeScript con Angular2, sino el cargador de módulos.

Dado que la respuesta aceptada está desactualizada (dirigida a una versión beta de Angular2),

Han cambiado muchas cosas, incluido el cargador de módulos en el Release Candidate of Angular 2 (RC2) actual, esto es lo que funciona para mí,

La estructura del directorio.

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

Los archivos son

aplicación : directorio de la aplicación donde residen los archivos del proyecto.
app.component.ts : archivo de componente de la aplicación
main.ts : Punto de entrada y arranque
bs-config.js : bs-config.js servidor Lite (un servidor dev basado en browsersync)
index.html : página de índice de la aplicación
node_modules : donde se instalan los paquetes npm
package.json : archivo de configuración de npm
systemjs.config.js : configuración de SystemJS
tsconfig.json : configuración del compilador de TypeScript
typings.json : definiciones de tipos

Contenido de cada archivo.

  1. archivo 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 { }


Instalando dependencias

Después de guardar todos los archivos anteriores, ejecute npm install en una ventana de terminal en la ubicación del proyecto, esto instalará todas las dependencias al directorio node_modules , lo que puede llevar un tiempo dependiendo de la velocidad de su conexión.

Ejecutando el servidor de desarrollo

Después de instalar todas las dependencias, ejecute npm start en la terminal en la ubicación del proyecto. Esto ejecutará el compilador de mecanografía y el lite-servidor al mismo tiempo, esto ayuda a compilar / transpilar el código y volver a cargar la página web cada vez que cambie el código fuente.

Ahora se puede abrir una nueva ventana del navegador. De lo contrario, **http://127.0.0.1:3000/** su navegador favorito a **http://127.0.0.1:3000/** o http://localhost:3000/ , si todo va bien, verá una página que dice:

Hola mundo desde angular 2

¡Eso es!.

Si no desea que lite-server abra el navegador automáticamente cada vez que ejecute npm start , agregue lo siguiente a su bs-config.js .

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

muestras de código de angular.io

Haz esto en 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>

Intenta usar este tu primer componente:

import {Component} from ''angular2/core''; import {bootstrap} from ''angular2/platform/browser''; @Component({ selector: ''app'', template: "Hello" }) export class App{ constructor(){ } } bootstrap(App);

su archivo Index.html ha perdido mucho. como importar el componente principal utilizando system.js. es decir System.import(''App'');

tsconfig.json:

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

Pude resolver este problema agregando "moduleResolution": "node" a mi archivo 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" ] }

Use ''@angular/core'' lugar ''angular2/core''