tools - debug angular visual studio code

¿Cómo se pueden asignar los archivos de CSS de CLI de Angular Map en Chrome Dev Tools?

Question

¿Hay alguna forma de crear mapas de origen para que las ediciones realizadas en Chrome Dev Tools puedan persistir en un espacio de trabajo local agregado?

Chrome Dev Tools muestra todos mis estilos en styles.scss en una styles.scss <style>...</style> en el inspector de elementos.

He configurado espacios de trabajo de Chrome Dev Tools similares a cómo @ vt5491 lo hizo en su SO aquí: https://stackoverflow.com/a/37627935/1762493 y eso funciona para los archivos .ts que creo, pero los estilos de elementos no. enlaza con los mapas de origen en el elemento inspeccionar, ya que se han creado con ng serve en el elemento <style> index.html que parece.

• Estoy ejecutando ng serve -dev -p=8081
• y probé ng serve -dev -p=8081 --aot=true pero obtuve un ENONET ng.factory.js missing error
• Intenté poner estilos en app.component.css contra styles.scss
• Intenté esto con ng build pero también pone todos los estilos en index.html <style>

¿Es así como está actualmente con el CLI angular? Tal vez pellizcando el paquete web debajo? Parece estar agregando etiquetas <style> por hoja de estilo compilada. Si esta es la forma en la que funciona actualmente la CLI, entonces quizás no sea solo una pregunta, sino una solicitud de función porque estamos haciendo el trabajo de front-end correctamente , por lo que tener este trabajo ahorraría tiempo.

Relacionado con:

• ¿Cómo guardar los cambios de estilo CSS en los componentes ANGULAR 2.0 de las Herramientas para desarrolladores de Chrome?
• Angular-cli no genera archivos mecanografiados con la opción --dev
• ¿Cómo depurar la aplicación angular 2 usando un webpack angular-cli? (en WebStorm)
• SCSS SourceMap señala solo al selector de padres.
  • github.com/angular/angular-cli Issue # 2826

Gracias por cualquier consejo ofrecido.

Answer 1

Angular-cli usa webpack, pero viene con sus propios archivos de configuración en / node_modules / angular-cli / models.

Puede modificarlos, pero si actualiza angular-cli, se sobrescribirán sus archivos. Así que asegúrate de respaldarlos.

Sí, está destinado a ir en línea etiquetas <style> . Estoy de acuerdo en que esto parece extraño y debería estar en un archivo separado, principalmente para que el usuario pueda guardarlo en caché y reducir el tamaño de las vistas. Puede ser que piensen que la línea es buena, ya que cuando estás en modo de desarrollo no quieres que esté en caché, lo cual está bien, pero en ''ng build'' debería compilarse en su propio archivo.

Sé que puede configurar el paquete web para hacer eso usando el "complemento-texto-paquete web-complemento", pero no estoy muy familiarizado con él.

Me gustaría ver angular-cli hacer eso en la compilación o tener una opción en la configuración para eso.

Answer 2

Cuando escribe ng serve de forma predeterminada, cli angular no incluye archivos de mapas fuente para archivos css, pero puede incluirlo escribiendo este comando

ng servir -sm -ec

o

ng servir --sourcemap --extractCss

Uso Angular Cli -v 1.0.3, y más información: casos especiales de Angular CLI