Imansible trovare il modulo esterno ‘angular2 / angular2’ – Angular2 w / Typescript

Sto seguendo il tutorial passo passo su angular.io (Angular 2). Sto usando typescript. Ottengo il seguente errore quando provo a compilare:

Cannot find external module 'angular2/angular2'

usando il comando di controllo.

main.ts

 import {Component, View, bootstrap} from 'angular2/angular2'; @Component({ selector: 'my-app' }) @View({ template: '

My first Angular 2 App

' }) class AppComponent { } bootstrap(AppComponent);

index.html

          System.import('main');    

D Perché si verifica questo errore?

L’aggiunta di questi file alla testa ti darà l’ultima versione funzionante di Angular2.

    

Origine: Angular.io: 5 minuti di avvio rapido

Manca la definizione TypeScript (TSD) per Angular2:

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

Quindi compilare di nuovo (es. tsc -p src -w )

Se tsd fallisce installalo prima:

 npm install -g [email protected]^0.6.0 

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

Nell’esempio dal vivo su plunker trasponiamo (AKA compile) su JavaScript nel browser al volo. Va bene per una demo. Questa non è la nostra preferenza per lo sviluppo o la produzione.

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 e gli errori del compilatore 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.

  • Ripetiamo lo sviluppo più velocemente perché ricompiliamo solo i file modificati. Notiamo la differenza non appena l’app cresce oltre una manciata di file.

  • la pre-compilazione si inserisce in un processo di integrazione continua di build, test, deployment.

Una soluzione migliore:

Crea un stream di lavoro per la tua app angular2, ad esempio gulp per creare attività di compilazione di ts. ecco un buon tutorial che ho trovato Creazione di un stream di lavoro TypeScript con Gulp

puoi anche usare editor vscode che compila automaticamente i tuoi file ts, leggi di più .

se ti senti troppo pigro per creare il tuo stream 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

seme angular-2

  • Progetto TypeScript VS2015

CommonJS non genererà il codice js corretto da utilizzare all’interno del codice tutorial quickstart ng2 così com’è oggi (20160215): import {Component} da ‘angular2 / core’;

Ho ragione?

CommonJS genererà questo come ES6: var core_1 = require (‘angular2 / core’); …

Ciò non funzionerà nel browser e dirà che il bisogno non è definito poiché il quickstart usa SystemJS. L’editor di codice non darà errori, comunque, tutto bene in VS2015.

SystemJS genererà questo come ES6: System.register ([‘angular2 / core’], function (exports_1) {…

Funziona come un fascino nel browser, ma darà l’errore “Imansible trovare il modulo”. Non so come risolvere questo problema se non utilizzando l’applicazione Web ASP.NET HTML vuota -> Questo ti darà l’inferno di includere node_modules all’interno di wwwroot senza effettivamente copiarlo lì (almeno per un programmatore .net newbie).

Raf.

Perché si verifica questo errore?

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

In main.ts immagino sia necessario aggiungere questa riga:

 /// import {Component, View, bootstrap} from 'angular2/angular2'; // then it will be fine. 

Per coloro che si trovano ad affrontare questo problema in “Progetti Visual Studio TypeScript”, potrebbe essere necessario eseguire le seguenti operazioni per risolverlo.

Apri il tuo .csproject nell’editor di testo e

  1. cambia come CommonJS
  2. Inserire impostazioni aggiuntive (TypeScriptEmitDecoratorMetadata, TypeScriptExperimentalDecorators) alla fine

Ecco il mio riferimento a .csproject.

  false true ES5 None True False CommonJS   False True  True True  

Ho riscontrato anche questo problema e poi ho digitato tutto esattamente come specificato nelle istruzioni e tutto ha funzionato (immaginalo). 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.

checkout my sample MVC5 + Angular2 (Beta1 & TypeScript) Soluzione VS2015: https://github.com/hobe/angular2mvc5

Passaggi di base:

  1. TypeScriptModuleKind deve essere impostato su CommonJS
  2. TypeScriptEmitDecoratorMetadata e TypeScriptExperimentalDecorators devono essere impostati nel file .csproj

Richiede anche “TypeScript 1.7.6.0 per Visual Studio 2015 Update 1”

Se stai utilizzando un’applicazione meteor-angular2, la mia soluzione ti aiuterà; aggiungi semplicemente la riga sottostante nella tua app typescript prima delle istruzioni di importazione:

 ///