archivo - Problemas con la importación de clases desde módulos Angular 2 con Typescript 1.7

typescript con html

Question

Tengo problemas para entender cómo importar clases desde Módulos en TypeScript, específicamente para Angular 2 en Visual Studio 2015 (actualización 1) con TypeScript 1.7.

En cualquier lugar de la documentación de Angular 2 veo sentencias de importación como: import {Component} from ''angular2/core''; . Estos archivos están en node_modules/angular2/* . ¿Qué hace que solo angular2/* funcione?

Solo puedo deshacerme de los errores en Visual Studio cuando tengo una ruta relativa desde el directorio de la aplicación, como: ./../node_modules/angular2/platform/browser''; . Esto soluciona los errores de compilación de Visual Studio, pero cuando intento ejecutar la aplicación con System.import(''app/boot'') obtengo un montón de errores como este:

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

Otro problema es poder usar declaraciones tales como: import {SearchComponent} from ''./Components/Search/search.component''; en Visual Studio, pero cuando lo ejecuto hay muchos errores GET en system.src.js:2476 .

Pensé que establecer la defaultExtension: ''js'' para System.config debería haber System.config ese problema.

ACTUALIZAR Aquí están todos los archivos que creo que son relevantes:

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'';

Estructura del archivo:

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)

No estoy familiarizado con TypeScript, ¿podría haber un error causado por diferentes sistemas de módulos de TypeScript? Angular 2 recomienda que System.config se configure con el format: ''register'' pero https://www.npmjs.com/package/angular2 dice que los archivos se pueden consumir usando CommonJs.

Con estos archivos, obtengo estos dos errores de consola:

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

Answer 1

¿Cómo carga su archivo HTML la biblioteca Angular 2? Debería ser tan simple como

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

Notará que el archivo contiene la totalidad de la biblioteca Angular 2 construida / concatenada. No debe apuntar su página web a los archivos fuente brutos.

SystemJS sabe lo que significa angular2/core porque la biblioteca construida define lo que significa ese patrón. Aunque parece ser una estructura de directorios (que probablemente está en la biblioteca no compilada), en realidad es solo un nombre para un módulo la biblioteca construida. Busque este texto en la biblioteca creada y lo verá definido:

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

Answer 2

Las pequeñas líneas rojas onduladas probablemente se deben a tu tsconfig.json. Al menos eso es lo que me causó el problema. El problema que tuve fue que estaba usando ambos archivos [] y excluye []. Esto no funciona como se esperaba y no es una configuración válida.

Resolví este problema pero todavía tengo el problema "Uncaught ReferenceError: require is not defined".

Answer 3

"Resolví este problema, pero todavía tengo el problema" Uncaught ReferenceError: require is not defined ".

systemjs se puede configurar para usar requiere formato:

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

pero si está en su propio código, la salida del compilador puede ser configurada en tsconfig:

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

en su archivo de configuración de Visual Studio podría significar:

<TypeScriptModuleKind>system</TypeScriptModuleKind>

Answer 4

Tuve que hacer un par de ediciones en el inicio rápido de 5 minutos para que funcione con MAMP.

Tienes que decirle a SystemJS dónde encontrar tus módulos personalizados, pero no puedes establecer baseURL para hacerlo . Establecer baseURL parece arruinar la resolución del módulo para los módulos de nodo (como angular). Añada esto a la configuración de su sistemajs:

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

Pero no cambie las declaraciones de importación angular. Esos no son caminos, son nombres de módulos y systemjs debería resolverlos muy bien si ha incluido angular2.dev.js en una etiqueta de script principal, como lo hizo.

También debe incluir:

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

en la parte superior de tu app.ts (o donde quieras llamar bootstrap)

Answer 5

Lo siguiente funcionó para mí.

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

También incluí el texto mecanografiado en el encabezado

<script src="https://code.angularjs.org/tools/typescript.js"></script>