curso - angular wikipedia

Uso de la ruta relativa para templateUrl en Angular2 Component con SystemJS

Question

Estoy intentando usar la ruta relativa al definir templateUrl en el componente angular2, como se describe aquí: http://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/

@Component({
    selector: ''login-app'',
    moduleId: module.id,
    templateUrl: ''./app.html''
})

aunque sigo recibiendo:

ERROR: el módulo no está definido

Estoy usando --m commonjs en la configuración de compilación ts.

¿Cómo hacer que funcione?

Answer 1

Como esta pregunta recibe mucha atención, publicaré un enlace a un buen artículo en el LIBRO DE COCCIÓN ANGULAR OFICIAL : Rutas relativas a los componentes

Explica por qué se usan las rutas absolutas de manera predeterminada y cómo usar las rutas relativas en función del paquete y las estrategias de carga del módulo.

Answer 2

Con systemjs, primero declare la cadena __moduleName (dos guiones bajos) y luego úsela en lugar de module.id de la siguiente manera:

declare var __moduleName: string;

@Component({
    selector: ''login-app'',
    moduleId: __moduleName,
    templateUrl: ''./app.html''
})

Answer 3

El módulo se define realmente dentro de index.d.ts en la tipificación de nodos.

Agregue un nodo a su typings.json como se muestra a continuación y ejecute ''npm run typings install''.

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

Esto debería resolver su problema.

Answer 4

Esto simplemente no parece funcionar para mí. Puedo ver en el repositorio de Github para Angular 2 que supuestamente se agregó la característica a principios de diciembre, pero no funciona en todo lo que puedo decir.

Los documentos no se han actualizado para reflejarlos, y aún faltan pruebas adecuadas de lo que puedo decir.

Actualizar:

Esto es parte de lo que está pasando. Esto requiere una característica específica de CommonJS para que funcione, por lo que debe tener ese sistema de módulos en uso en su archivo tsconfig.json.

Además de eso, hay un problema al usar SystemJS debido a la forma en que incluye todo en la raíz.

Básicamente, parece que hay muchas restricciones para poder usar esta nueva función.

Answer 5

Puedes intentar algunos pasos como sigue:

Paso 1. Declara el objeto de módulo de formato ''commonjs'' que identifica la "id del módulo" para el módulo actual.

"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    ...
}

Paso 2: agregar typings.d.ts en la carpeta wwwroot para identificar el "id del módulo".

/// <reference path="../typings/globals/core-js/index.d.ts" />
 declare var module: { id: string };

Paso 3: Establezca la propiedad de metadatos moduleId un componente en module.id para las urls relativas al módulo (tenga en cuenta la convención).

@Component({
    selector: ''login-app'',
    moduleId: module.id,
    templateUrl: ''app.component.html''
})

Espero que esto ayude.

Answer 6

Simplemente configure la propiedad "moduleId" del componente con el valor de module.id. Consulte el ejemplo aquí: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html#!#set-the-moduleid-

Código de ejemplo: @Component ({moduleId: module.id, selector: ''login'', templateUrl: "login.component.html"})

Trabajó para mi.

Answer 7

Una solución alternativa: use require with template en lugar de templateUrl

@Component({
    selector: ''login-app'',
    template: require(''./app.html'')
})

Answer 8

Use la ruta absoluta del archivo html cuando use temlplateUrl. por ejemplo: si su jerarquía de aplicaciones es MyApp-> app-> yourComponent.ts y, a nivel de la aplicación, su app.html está allí, diríjase al decorador de componentes de yourComponent.ts de la siguiente manera, debería funcionar.

@Component ({selector: ''login-app'', templateUrl: ''app / app.html''})

la ruta relativa nunca funcionó para mí, incluso después de configurar moduleID para module.id o cualquier otra solución. Si funciona para alguien, por favor comparte.

Answer 9

Yo tuve el mismo problema:

error TS2304: No se puede encontrar el nombre ''módulo''.

por alguna razón, incluso con "module": "commonjs" en compilerOptions en el archivo tsconfig.json , TypeScript tsconfig.json este error. Así que resolví el problema agregando declaración para ello:

declare var module: {
    id: string;
};