Impossibile trovare il modulo esterno 'angular2/angular2' - Angular2 w/Typescript

Sto passando attraverso il tutorial passo passo su angular.io (Angular 2). Sto usando dattiloscritto. Ottengo il seguente errore quando si tenta di compilare:Impossibile trovare il modulo esterno 'angular2/angular2' - Angular2 w/Typescript

Cannot find external module 'angular2/angular2'

usando il comando watch.

main.ts

import {Component, View, bootstrap} from 'angular2/angular2'; 

@Component({ 
    selector: 'my-app' 
}) 

@View({ 
    template: '<h1>My first Angular 2 App</h1>' 
}) 

class AppComponent { 
} 

bootstrap(AppComponent);

index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://jspm.io/[email protected]"></script> 
    <script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script> 
    </head> 
    <body> 

    <my-app></my-app> 

    <script> 
     System.import('main');  
    </script> 

    </body> 
</html>

Q Perché questo si verificano errori?

fonte

2015-06-16 karns

ho seguito il tutorial "Giro di Heros" sul angular.io e ottengo questo messaggio di errore da 'tsc', ma non impedisce al mio codice di compilare ed eseguire l'app angular2. –

@karns FYI, a partire da *[email protected]* l'importazione 'angular2/angular2' è stata cambiata in' angular2/core' e la funzione bootstrap è stata spostata in 'angular2/platform/browser'. –

L'aggiunta di questi file alla testa vi darà l'ultima versione di lavoro di Angular2.

<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script> 
<script src="https://jspm.io/[email protected]"></script> 
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>

Fonte: Angular.io: 5 Minute Quickstart

fonte

2015-06-16 04:10:13 shmck

Ohh, quindi sembra che mi manca il compilatore Traceur ... – karns

Questa era davvero la soluzione. Il tutorial passo-passo è un po 'vago su ciò che è necessario ... – karns

Perché si verifica questo errore?

assicuratevi di avere questo file: https://github.com/borisyankov/DefinitelyTyped/blob/master/angular2/angular2.d.ts incluso nel progetto (consiglio di usare tsconfig.json: https://github.com/TypeStrong/atom-typescript/blob/master/docs/tsconfig.md)

fonte

2015-06-16 03:44:44 basarat

Nel main.ts credo che è necessario aggiungere questa riga:

///<reference path="path/to/angular2"/> 
import {Component, View, bootstrap} from 'angular2/angular2'; // then it will be fine.

fonte

2015-06-16 06:41:27 Jai

Se tsdconfig.json è usato per il compilatore TypeScript, questa prima riga non è necessaria. – magiccrafter

La definizione dattiloscritto (TSD) per Angular2 manca:

- cd src    //go to the directory where your ts-file is 
- tsd install angular2 //load Angular2 TypeScript Definition

Quindi compilare nuovamente (ad es. tsc -p src -w)

Se tsd fallisce installarlo prima:

npm install -g [email protected]^0.6.0

fonte

2015-09-15 08:52:33 Dunken

'tsd' è deprecato, utilizzare' typings' invece – SeriousM

Per coloro che si trovano ad affrontare questo problema in "progetti di Visual Studio tipografico", quindi potrebbe essere necessario fare la seguente cosa per risolverlo.

Aprire il .csproject in editor di testo e

cambiamento del <TypeScriptModuleKind> come CommonJS
Inserire ulteriori impostazioni (TypeScriptEmitDecoratorMetadata, TypeScriptExperimentalDecorators) alla fine

Ecco il mio riferimento .csproject.

<PropertyGroup Condition="'$(Configuration)' == 'Debug'"> 
      <TypeScriptRemoveComments>false</TypeScriptRemoveComments> 
      <TypeScriptSourceMap>true</TypeScriptSourceMap> 
      <TypeScriptTarget>ES5</TypeScriptTarget> 
      <TypeScriptJSXEmit>None</TypeScriptJSXEmit> 
      <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled> 
      <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny> 
      <TypeScriptModuleKind>CommonJS</TypeScriptModuleKind> 
      <TypeScriptOutFile /> 
      <TypeScriptOutDir /> 
      <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations> 
      <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError> 
      <TypeScriptMapRoot /> 
      <TypeScriptSourceRoot/
    <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata> 
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> 
      </PropertyGroup>

fonte

2015-10-17 06:59:12 Senthil

mi ha colpito anche questo problema e quindi digitato i esattamente come specificato nelle istruzioni e tutto ha funzionato (immagino che). Inizialmente avevo provato ad installare solo l'ultima versione di angular e systemjs.Tuttavia, l'utilizzo delle versioni specifiche annotate nella pagina Quickstart ha risolto il problema per me.

fonte

2015-12-14 14:33:54 scottrudy

vi dirò perché la soluzione accettata è male, secondo la stessa fonte 5 MIN QUICKSTART:

Nell'esempio in diretta su plunker abbiamo transpile (AKA compilazione) a JavaScript nel browser al volo. Va bene per una demo. Questa non è la nostra preferenza per lo sviluppo o la produzione.

Si consiglia transpiling (AKA compilazione) a JavaScript nel corso di una fase di costruzione prima di eseguire l'applicazione per diversi motivi, tra cui:

Vediamo avvisi del compilatore e gli errori che sono nascosti da noi nel browser.

La pre-compilazione semplifica il processo di caricamento del modulo ed è molto più semplice diagnosticare il problema quando questo è un passaggio esterno separato.

Pre-compilazione significa un'esperienza utente più veloce perché il browser non spreca tempo a compilarlo.

Abbiamo iterato lo sviluppo più veloce perché abbiamo solo ricompilato i file modificati. Notiamo la differenza non appena l'app cresce oltre una manciata di file.

pre-compilazione si inserisce in un processo di integrazione continua di build, test, distribuzione.

Una soluzione migliore:

Creare un flusso di lavoro per la vostra angular2 app, uso sorso ad esempio per creare ts compilare compito. ecco un buon tutorial che ho trovato Creating a TypeScript Workflow with Gulp

puoi anche usare editor vscode che compila automaticamente i tuoi file ts, read more.

se ti senti troppo pigro per creare il tuo flusso di lavoro, ci sono un paio di buoni antipasti per giocare con angular2. ognuno usa strumenti diversi ma tutti sono migliori dell'utilizzo di un compilatore di runtime.

NG6-starter

angular2-webpack-starter

angular-2 seed

fonte

2015-12-14 16:49:50

Non riesco a trovare questi commenti nella versione corrente di Avvio rapido. Apparentemente è stato sostituito con il seguente: Raccomandiamo il transpiling (compilazione AKA) su JavaScript durante una fase di compilazione prima di eseguire l'applicazione per diversi motivi tra cui: Vediamo gli avvertimenti del compilatore e gli errori che sono nascosti da noi nel browser. La pre-compilazione semplifica il processo di caricamento del modulo .... --- ecc. Non c'è nulla che permetta al download dal web di essere una cattiva idea perché la cache viene sballata. Mi chiedo se quella parte sia davvero vera? Sembra un problema separato. – ckapilla

@ckapilla sì hanno aggiornato i documenti. –

In seguito al commento di @ ckapilla. Vorrei raccomandare * contro * questo approccio. Se gulp è configurato per raggruppare l'output, dovrai traspolare * e * raggruppando il codice ogni volta che desideri aggiornare la pagina. Il transpiling inline funziona meglio. Il caricamento a caldo (ovvero quello che usa angular2-seed) è molto meglio. –

checkout mio campione MVC5 + Angular2 (Beta1 & dattiloscritto) soluzione VS2015: https://github.com/hobe/angular2mvc5

procedura di base:

TypeScriptModuleKind deve essere impostato su CommonJS
TypeScriptEmitDecoratorMetadata e TypeScriptExperimentalDecorators deve essere impostato nel vostro.csproj presentare

richiede anche "dattiloscritto 1.7.6.0 per Visual Studio 2015 Update 1" progetto

fonte

2016-01-26 19:14:05

dattiloscritto VS2015

CommonJS non generare il codice js il diritto di utilizzare all'interno del quickstart codice tutorial ng2 così com'è oggi (20160215): import {Component} da 'angular2/core';

Ho ragione?

CommonJS genererà questo come ES6: var core_1 = require ('angular2/core'); ...

Che non funzionerà nel browser e dirà che non è necessario richiedere che quickstart usi SystemJS. L'editor di codice non darà errori, comunque, tutto bene in VS2015.

SystemJS genereranno questo come ES6: System.register ([ 'angular2/core'], la funzione (exports_1) {...

funziona come un fascino nel browser, ma daranno che "non riesce a trovare "Errore di modulo." Non so come risolvere questo problema se non utilizzando l'applicazione Web ASP.NET HTML vuota -> Questo ti darà l'opportunità di includere node_modules all'interno di wwwroot senza copiarlo effettivamente (almeno per un programmatore .net newbie) .

Raf.

fonte

2016-02-05 17:06:35 Pirolla

Se si esegue un'applicazione meteora angular2 mia soluzione vi aiuterà ; semplicemente aggiungere la riga in basso nelle vostre app.ts dattiloscritto prima di istruzioni di importazione:

/// <reference path="typings/angular2-meteor/angular2-meteor.d.ts" />

fonte

2016-03-23 09:11:17

/// –

Si prega di fornire un codice di esempio –

Impossibile trovare il modulo esterno 'angular2/angular2' - Angular2 w/Typescript

risposta

Problemi correlati