Ngx-admin: No .ts files under the 'Sources' tab in 'Developer Tools'

[SujitGodavarti]

• I'm submitting a feature request
• Current behaviour
  I installed all the required tools, cloned the repository and installed dependencies using the commands given in 'Installation Guidelines' section and clicked on the link http://localhost:3000. I used Chrome browser and clicked on 'Developer tools' and clicked on 'Sources' tab. I could not see any transcript files (.ts files) under the 'Sources' tab and hence cannot debug the code. I have attached a screenshot of the 'Developer tools' for your reference. Please look into the issue and let me know how to view the required .ts files in 'Developer tools' so that I can debug the code and customise it to suit my requirements. I faced the same issue with Internet Explorer browser as well.

• Expected behavior

The .ts files should be visible under 'Sources' tab of 'Developer tools'.

• Environment

Angular version: 2.0.0-rc.4
Browser: Chrome, IE

[supermarcos]

Because it is not where you're looking for them.
It is under webpack:// >> . >> src
Think that you can't debug ts files out of the box, you need maps of those to sync js and ts files and that's webpack job.
:)

[SujitGodavarti]

Hi supermarcos! thanks for the response. How do I debug the .ts files? Even under webpack:// >> . >> src I can't find any .ts files. I don't know whether webpack did any mapping. The code we write is in .ts files and I am able to debug them normally in another angular2 app. How can I do that with this app?

[supermarcos]

What do you have in your webpack config? There should be a source-map-loader config section. That may be your problem.
These guys are using just cheap-module-eval-source-map, they are basing their job on AngularClass seed, however I got it slightly different in some point of the config. For instance, I can see they have in their config this:
devtool: 'cheap-module-source-map',
On webpack.dev.js
Instead of that I got this:

devtool: 'source-map',
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
    },

Not sure if that is your problem, but it may help.... Hopefully it helps for you.

[nnixaa]

Hey @SujitGodavarti, could you check out the latest commit for the development branch https://github.com/akveo/ng2-admin/tree/development to see if it's working now?

[SujitGodavarti]

Thank u so much @supermarcos. I changed the devtool: 'cheap-module-source-map' to devtool: 'eval-source-map' and it worked for me. I can now see the .ts files under 'webpack'.

Hi @nnixaa, the .ts files are now visible under 'webpack' after making the change mentioned above. I am now adding new pages to the existing app. After that I shall check whether I can debug it using developer tools and let you know.

[supermarcos]

I'm glad to hear it helped, @SujitGodavarti
:-)

[SujitGodavarti]

@nnixaa I am able to debug the application using Developer tools now. Thank you :)

[CredibleAshok]

in my case I had imports to JS files instead of ts.
Just check it should not be like import { CommonService } from './common.service.js';
This is added by automatic import. Please check if you have appended .js by mistake.

[niblux]

Because it is not where you're looking for them.
It is under webpack:// >> . >> src
Think that you can't debug ts files out of the box, you need maps of those to sync js and ts files and that's webpack job.
:)

this worked for me in a angular project 👍