3

i'm developing my first Angular2 app with Typescrypt. Here is an example of Component:

home.component.ts

import {Component} from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'home',
    templateUrl: 'home.component.html',
    styleUrls: ['home.component.css']
})

export class HomeComponent {
}

Since i have to process SASS files to get component-specific CSS, i created the following Gulp task:

gulpfile.js

gulp.task('create:styles', function(cb) {
  return gulp.src('src/app/**/*.scss')
             .pipe(sourcemap.init())
             .pipe(sass().on('error', sass.logError))
             .pipe(sourcemap.write())
             .pipe(gulp.dest(paths.dist + '/app/'));
});

As you can see i'm using sourcemaps Gulp plugin to map source files of styles.

As far as i know Angular injects component CSS files in HTML <style> element. So source mapping seems not to work for this reason.

Do you know any workaround to map CSS? I would figure out why i can't see the source files (.scss) in the inspection tools of browsers. What's wrong with sourcemaps plugin?

smartmouse
  • 13,912
  • 34
  • 100
  • 166

2 Answers2

1

The answer is that there is nothing we can do at the moment. The feature request is still open on Angular2 Github repository: enter link description here

smartmouse
  • 13,912
  • 34
  • 100
  • 166
0

Taken from this SO answer and this article https://medium.com/@IMM9O/angular-cli-some-special-cases-f48059fb33e5

These flags on ng serve include sourcemaps. 

ng serve -sm -ec

Or 

ng serve --sourcemap --extractCss

It does not include source maps for the components stylesheets, as you asked, but only for global stylesheets that are included with the angular-cli.json config file. It's still better than nothing, especially because when inspecting an element, you can infer that the only CSS that is not mapped to a source file but to a <style> tag is the CSS of the component's stylesheet.

I'm using angular-cli version 1.0.0-rc.4

Quentin
  • 1,085
  • 1
  • 11
  • 29
  • This is obsolete as of 6.x. See https://stackoverflow.com/questions/50318185/how-to-enable-css-sourcemaps-for-angular-6-application for that. – Yet Another User Aug 22 '18 at 06:10