web-dev-qa-db-fra.com

Problèmes liés à l'importation de classes à partir de modules Angular 2 avec TypeScript 1.7

J'ai quelques difficultés à comprendre comment importer des classes à partir de Modules dans TypeScript, en particulier pour Angular 2 dans Visual Studio 2015 (mise à jour 1) avec TypeScript 1.7.

Partout dans la documentation Angular 2, je vois des instructions import telles que: import {Component} from 'angular2/core';. Ces fichiers sont en node_modules/angular2/*. Qu'est-ce qui fait que angular2/* fonctionne? 

Je ne peux me débarrasser des erreurs dans Visual Studio que lorsque j'ai un chemin relatif depuis le répertoire de l'application, tel que: ./../node_modules/angular2/platform/browser';. Cela corrige les erreurs de compilation de Visual Studio, mais lorsque j'essaie d'exécuter l'application avec System.import('app/boot'), je reçois un tas d'erreurs comme celle-ci:

system.src.js: 1049 GET http: // localhost: 8080/node_modules/angular2/platform/browser 404 (Introuvable)

Un autre problème est de pouvoir utiliser des instructions telles que: import {SearchComponent} from './Components/Search/search.component'; dans Visual Studio, mais lorsque je l'exécute, il y a beaucoup d'erreurs GET à system.src.js:2476.

Je pensais que définir le defaultExtension: 'js' pour System.config aurait dû résoudre ce problème.

UPDATE Voici tous les fichiers que je pense être pertinents:

views/home/index.html

<script src="node_modules/es6-shim/es6-shim.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>
System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
System.import('app/app')
    .then(null, console.error.bind(console));

test.csproj

<TypeScriptToolsVersion>1.7</TypeScriptToolsVersion>
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
<TypeScriptModuleResolution>Node</TypeScriptModuleResolution>
<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptJSXEmit>None</TypeScriptJSXEmit>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
<TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
<TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
<TypeScriptRemoveComments>False</TypeScriptRemoveComments>
<TypeScriptOutFile />
<TypeScriptOutDir />
<TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptSourceMap>True</TypeScriptSourceMap>
<TypeScriptMapRoot />
<TypeScriptSourceRoot />

typings/tsd.d.ts

export * from './../node_modules/angular2/core';
export * from './../node_modules/angular2/common';
export * from './../node_modules/angular2/http';
export * from './../node_modules/angular2/router';
export * from './../node_modules/angular2/platform/browser';

Structure de fichier:

app/
    app.ts
    components/
    models/
    services/
node_modules/ (npm install using Angular 2 quickstart's package.json)
    angular2/ (not all the files listed)
        bundles/ (not all the files listed)
            angular2.dev.js
        platform/
        src/
        ts/
        typings/
        common.d.ts
        core.d.ts
        http.d.ts
        router.d.ts
    es6-module-loader/
    es6-promise/
    es6-shim/
    rxjs/
    systemjs/
    zone.js/
    TypeScript/ (not sure if this needs to be here)

Je ne connais pas bien TypeScript. Une erreur peut-elle être générée par différents systèmes de modules TypeScript? Angular 2 recommandé que System.config soit défini avec format: 'register' mais https://www.npmjs.com/package/angular2 indique que les fichiers peuvent être consommés à l'aide de CommonJs.

Avec ces fichiers, j'obtiens ces deux erreurs de console:

app.ts:1 Uncaught ReferenceError: require is not defined(anonymous function) @ app.ts:1
angular2-polyfills.js:143 Uncaught TypeError: Cannot read property 'split' of undefined
typescriptvisual-studio-2015angularsystemjs
18
Adam Hitchens

Je devais apporter quelques modifications au quickstart de 5 minutes pour que cela fonctionne avec MAMP. 

Vous devez indiquer à SystemJS où trouver vos modules personnalisés, mais vous ne pouvez pas définir baseURL pour le faire . Définir baseURL semble gâcher la résolution de module pour les modules de nœud (comme angular). Ajoutez ceci à votre configuration systemjs à la place:

map: {
    app: 'path/to/app/folder'
},

Mais ne changez pas les instructions d'importation angulaires. Ce ne sont pas des chemins, ce sont des noms de modules et systemjs devraient les résoudre correctement si vous avez inclus angular2.dev.js dans une balise de script en tête, comme vous l'avez fait. 

Vous devrez peut-être aussi inclure: 

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

au sommet de vos applications (ou où que vous appeliez bootstrap) 

5
Brad

Comment votre fichier HTML charge-t-il la bibliothèque Angular 2? Il devrait être aussi simple que

<script src="path/to/my/libs/angular2.dev.js"></script>

Vous remarquerez que ce fichier contient l'intégralité de la bibliothèque Angular 2 construite/concaténée. Vous ne devriez pas diriger votre page Web vers les fichiers source bruts.

SystemJS sait ce que angular2/core signifie, car la bibliothèque générée définit la signification de ce modèle. Bien qu'il semble y avoir une structure de répertoires (qui se trouve probablement dans la bibliothèque non construite), il ne s'agit en réalité que du nom d'un module de la bibliothèque construite. Recherchez ce texte dans la bibliothèque construite et vous le verrez défini:

System.register("angular2/core", ...

0
pe8ter

"J'ai résolu ce problème, mais le problème" Uncaught ReferenceError: require n'est pas défini "est toujours présent."

systemjs peut être configuré pour utiliser le format requis: 

System.config({
  packages: {
    app: {   // must be replaced 
      format: 'AMD'
    }
  }
});

mais si cela se trouve dans votre propre code, la sortie du compilateur TypeScript peut être définie dans tsconfig:

{
  "compilerOptions": {
    ...
    "module": "system"
    ... 
  }
}

dans votre fichier de configuration Visual Studio, cela peut signifier:

<TypeScriptModuleKind>system</TypeScriptModuleKind>
0
Dániel Kis

Ce qui suit a fonctionné pour moi.

System.config({    
          transpiler: 'TypeScript', 
          typescriptOptions: { emitDecoratorMetadata: true }, 
          packages: {       
          app: {
              defaultExtension: 'ts'
          }
        }
      });

J'ai également inclus le TypeScript int dans l'en-tête

<script src="https://code.angularjs.org/tools/TypeScript.js"></script>
0
Jerry

Les petites lignes ondulées rouges sont probablement dues à votre tsconfig.json. Au moins c'est ce qui a causé le problème pour moi. Le problème que j'ai eu était que j'utilisais les deux fichiers [] et exclut []. Cela ne fonctionne pas comme prévu et n'est pas une configuration valide.

J'ai résolu ce problème mais j'ai toujours le problème "Uncaught ReferenceError: require n'est pas défini".

0
user3448990