2

I've been writing a simple app using Angular 4.2.5 just to learn some stuff. I'd been able to debug the typescript files in Chrome all that time. I recently updated to Angular 5.2.7 and am no longer able to see the typescript files in Chrome. They don't appear at all when doing a control-P on the source tab (nor do the javascript files). My tsconfig.json file hasn't changed, and as you can see, the "sourcemap" property is set to true. So I'm not sure why Chrome can't seem to find these files now.

{   "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true, // Workaround for https://github.com/angular/angular/issues/17863. Remove this if you upgrade to a fixed version of Angular.
    "strict": true,
    "lib": [ "es6", "dom" ],
    "types": [ "webpack-env" ]   },   "exclude": [ "bin", "node_modules" ],   "atom": { "rewriteTsconfig": false } }

Adding webpack.config as requested:

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts' ] },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
                { test: /\.scss$/, exclude: /node_modules/, loaders: ['raw-loader', 'sass-loader'] }
            ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': './ClientApp/boot.browser.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
                exclude: ['./**/*.server.ts']
            })
        ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, {
        resolve: { mainFields: ['main'] },
        entry: { 'main-server': './ClientApp/boot.server.ts' },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./ClientApp/dist/vendor-manifest.json'),
                sourceType: 'commonjs2',
                name: './vendor'
            })
        ].concat(isDevBuild ? [] : [
            // Plugins that apply in production builds only
            new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
                exclude: ['./**/*.browser.ts']
            })
        ]),
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
};

Adding the webpack.vendor file also:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const treeShakableModules = [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    'zone.js',
];
const nonTreeShakableModules = [
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);

module.exports = (env) => {
    const extractCSS = new ExtractTextPlugin('vendor.css');
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        resolve: { extensions: [ '.js' ] },
        module: {
            rules: [
                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
            ]
        },
        output: {
            publicPath: 'dist/',
            filename: '[name].js',
            library: '[name]_[hash]'
        },
        plugins: [
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
            new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
            new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
            new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
        ]
    };

    const clientBundleConfig = merge(sharedConfig, {
        entry: {
            // To keep development builds fast, include all vendor dependencies in the vendor bundle.
            // But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
            vendor: isDevBuild ? allModules : nonTreeShakableModules
        },
        output: { path: path.join(__dirname, 'wwwroot', 'dist') },
        module: {
            rules: [
                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
            ]
        },
        plugins: [
            extractCSS,
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    const serverBundleConfig = merge(sharedConfig, {
        target: 'node',
        resolve: { mainFields: ['main'] },
        entry: { vendor: allModules.concat(['aspnet-prerendering']) },
        output: {
            path: path.join(__dirname, 'ClientApp', 'dist'),
            libraryTarget: 'commonjs2',
        },
        module: {
            rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ]
        },
        plugins: [
            new webpack.DllPlugin({
                path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ]
    });

    return [clientBundleConfig, serverBundleConfig];
}
9
  • 1
    Are the mapping files being generated? Meaning is there a js.map file next to your generated javascript files and does the generated javascript contain a reference to this map file? Commented Mar 9, 2018 at 23:38
  • I selected the "show all files" option in solution explorer, and I don't see those files (not sure if I would have before or not). Is there somewhere specific I need to check? Is there something other than the setting mentioned above that would prevent them from being generated? Commented Mar 10, 2018 at 1:02
  • The TS files are definitely being transpiled, because I put in an "alert" and it showed up. But I put a "debugger" line in and it didn't even halt execution. I have source control and I don't see anything that changed after I upgraded that would explain this. Commented Mar 10, 2018 at 22:41
  • So you've found the generated .js files, but there are no .js.map files in the same folder, correct? Commented Mar 10, 2018 at 22:51
  • I just noticed that your typescript config file also has a webpack-env. Are you using webpack? In that case, please add the contents of your webpack.config, since it's webpack that will be responsible for generating the mapping files. Commented Mar 10, 2018 at 22:52

1 Answer 1

1

Angular template from visual studio by default v4.2.5 from dotnet core 2.x.x.

If you are wanting to update to version 5, it will struggle and will show UNMET PEER DEPENDENCY for updating npm. To avoid this problem, they make srink-wrap to lock version npm (npm-shrinkwrap.json). Some issue has report that, see more.

Problem you have now, because have not finished transpile your code. Remember, dotnet will always cache your app the last time it was compiled.

Make sure you are update dependency npm and rename or remove npm-shrinkwrap.json.

Following this blog:

As you know, Webpack is used as module bundler by Visual Studio. Webpack uses AotPlugin to compile the Angular 4 apps, now Webpack no longer uses Aotplugin for Angular 5. It now uses AngularCompilerPlugin. You can read more about this here.

so, your webpack.config has not yet updated Aotplugin to AngularCompilerPlugin. That just 1 problem need to fix, read this for more information.

Rather than upgrade angular manual, you can use current version 4.x.x and then you can focus to write code. And wait until dotnet have official update angular template to version 5.

Sign up to request clarification or add additional context in comments.

6 Comments

I could not find the file "npm-shrinkwrap.json" anywhere. Also, I tried following the steps in the blog link (with a totally new project), and couldn't even get the project to run after doing all the steps in the blog. All of my npm modules have been updated and are showing correctly in the project, and the project continues to run (and respond to changes I made in the TS files), I just can't see the TS (or JS) files in Chrome to debug.
@StarfleetSecurity, hi this sample I used by dotnet core to generate spa template, I see you are using visual studio template? what template are you used? or better provide example project in github
For my original issue, I used the Angular 4 template that is included with VS. I then upgraded everything and could no longer debug as usual, but the project still worked. I also tried starting with a fresh project using that same template and then upgrading according to the blog post, and then it wouldn't even run.
@StarfleetSecurity, are you using extensions angular? cause I don't find create angular project by vstudio
I'm using the Angular template that's included with Visual Studio 2017 using ASP.NET core 2.0 project.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.