Rails 5.1 Plantilla AngularUrl

Pregunta

¿Qué debo hacer para que mi aplicación Angular me permita usar la propiedad templateUrl del decorador de Component ? Cuando creas una nueva aplicación Rails 5.1 y usas la bandera --webpack=angular , te da una prueba de concepto de aplicación Angular, pero tan pronto como comencé a crear más componentes, comencé a reconocer que no sé cómo refiérase a la ruta correcta en la que se sirven las plantillas. Ni siquiera estoy seguro de si están siendo atendidos, para ser honesto.

Lo que he intentado

  • Probé muchas variaciones diferentes de la ruta, desde solo el nombre del archivo hasta la raíz de la aplicación, una carpeta a la vez.
  • Buscar en Google para otra persona corriendo en el mismo problema.
  • incluir el CommonModule en mis importaciones en app.module.ts .

Fondo

Estoy acostumbrado a usar la CLI angular y no recuerdo haber tenido problemas con la propiedad templateUrl . ¿Qué tiene de diferente un proyecto de Angular CLI a lo que se le entrega en una aplicación Rails 5.1 en términos de configuración que afecta a las plantillas? ¿Podría usar Angular CLI en una aplicación Rails 5.1 sin tener que cambiar gran parte de la aplicación Rails?

Se puede hacer. Pero esto necesita una configuración diferente del cargador de paquetes web y varios ajustes menores.

Pero primero: ¡de compras!

 $ yarn add \ html-loader \ awesome-typescript-loader \ angular2-template-loader \ @types/node \ --dev 

Con todos los paquetes necesarios instalados, reemplace config/webpack/loaders/angular.js con esto:

 const {env} = require('../configuration.js'); isProd = env.NODE_ENV === 'production'; module.exports = { test: /\.ts$/, use: [ { loader: 'awesome-typescript-loader', options: { useCache: !isProd } }, 'angular2-template-loader' ] }; 

angular2-template-loader escanea los decoradores de componentes en busca del argumento templateUrl y lo reemplaza con algo como template: require('...')' . La llamada require() es la razón para instalar @types/node por cierto. awesome-typescript-loader está un poco más optimizado que el ts-loader predeterminado (que probablemente también funcione aquí, pero no lo probé).

Hasta ahora tan bueno. Luego debemos decirle al paquete web cómo cargar archivos HTML en realidad. Agregue config/webpack/loaders/html.js con el siguiente contenido:

 module.exports = { test: /\.html$/, loader: 'html-loader', }; 

Nada oscuro aquí. Seguir adelante

En su aplicación Javascript, agregue información de tipo para los archivos * .html a app/javascript/hello_angular/html.d.ts :

 declare module "*.html" { const content: string export default content } 

Esto le dice al comstackdor de TypeScript que require('template.html') devuelve una cadena.

Por último, pero no menos importante, debe agregar .html a las extensiones reconocidas en config/webpacker.yml :

 default: &default # ... extensions: # ... - .html # ... 

Ahora deberías ser bueno para ir:

 import { Component } from '@angular/core'; @Component({ selector: 'hello-angular', templateUrl: './template.html' }) export class AppComponent { name = 'Angular!'; } 

No te olvides de reiniciar bin/webpack-dev-server .

Teóricamente podrías hacer lo mismo con styleUrls . Pero esto está más enredado con los Rails / webpacker y perdería algunas de sus características.

Intereting Posts