Saltar al contenido

TS2307: No se puede encontrar el módulo ‘angular2 / core’ al importar Angular2 en TypeScript

Este team de trabajo ha estado mucho tiempo investigando para darle resolución a tu búsqueda, te regalamos la respuesta por esto nuestro objetivo es serte de mucha apoyo.

Solución:

Como eres nuevo en Mecanografiado. Todavía te sugiero que sigas Documentos de angular.io para un inicio de 5 minutos. Eso tiene instrucciones específicas y está bastante bien explicado para comenzar con él.

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

Lo que necesitas tener básicamente para comenzar:

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

Instala node js y también instala npm (administrador de paquetes de nodos). Ahora, desde aquí, debe 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 realmente contiene todos los .ts archivos / archivos de componentes, puede nombrarlo appel nombre es como por docs.
  3. Ahora en el nivel raíz tienes que 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 terminemos de cargar todas las dependencias, ejecute este comando para iniciar la compilación y ver la aplicación, mientras desarrolla otros componentes.

Ahora, ¿qué debería haber 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, ¡enhorabuena! Sin embargo, necesitamos el archivo más importante index.html.

3.4: index.html




  Angular 2 QuickStart
  

  
  
  
  

  
  
  
  

  
  






  Loading...

¡Okey!

Tenemos nuestra configuración básica bastante bien, pero necesitamos instalar todas las dependencias y dependencias de desarrollo, lo cual es absolutamente necesario. Necesitas correr 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 ocurre algún error mientras npm install solo necesita actualizar dev / dependencies.

Entonces, supongo que tiene todas las dependencias instaladas y comencemos:

Ahora, según el punto 2, tenemos una carpeta llamada app ahora pondremos nuestro .ts archivos en él.

Crea un archivo llamado app.component.ts, ver la convención de nomenclatura .component.ts lo que denota que es un archivo de componentes. 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: '
My First Angular 2 App
' // <---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 por index.html, hemos definido nuestro Systemjs cargador de módulos, vea esto en index.html

System.import ('aplicación / principal')

Este 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 ello tenemos que cd ng2Playgroud en ello. necesitamos ejecutar este comando desde el símbolo del sistema o si tiene instalado git bash, ejecute esto: 

npm start

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

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

en primer lugar respondiendo a la pregunta, ¿Qué está causando que TypeScript no importe módulos de angualr2? ¿Debo configurar TypeScript con Angular2? Ha importado el cargador de módulos pero no lo ha configurado. No tiene que configurar TypeScript con Angular2 sino con el cargador de módulos.

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

Muchas cosas cambiaron, incluido el cargador de módulos en el Release Candidate actual de Angular 2 (RC2). 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 bootstrap
bs-config.js: Configuración de Lite Server (un servidor de desarrollo basado en browsersync)
index.html: Página de índice de la aplicación
módulos_nodo: donde se instalan los paquetes npm
package.json: archivo de configuración npm
systemjs.config.js: Configuración de SystemJS
tsconfig.json: Configuración del compilador TypeScript
typings.json: Definiciones de tipo

Contenido de cada archivo.

  1. index.html expediente

    
  
    Hello Angular 2
    
    
    
    
     
    
    
    
    

    
    
    
  

  
  
    Loading...

  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: '
    Hello World from Angular 2
    '
)
export class AppComponent

Instalación de 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 para node_modules directorio que puede llevar algún tiempo dependiendo de la velocidad de su conexión.

Servidor de desarrollo en ejecución

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

Ahora podría abrirse una nueva ventana del navegador. Si no es así, apunte 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 de Angular 2

¡Eso es!.

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

module.exports = 
    "open": false
;

ejemplos de código de angular.io

Más adelante puedes encontrar las aclaraciones de otros sys admins, tú además puedes insertar el tuyo si te apetece.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4)

Tags : / / /

Utiliza Nuestro Buscador

Preguntas Relacionadas:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *