4

I updated my Angular's verision from 4 to 5. Below is the screenshot, I followed the instruction as per the link http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017/

screen shot

package.json file

{
  "name": "VotingWebsite",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "devDependencies": {
    "@angular/animations": "5.2.1",
    "@angular/common": "5.2.1",
    "@angular/compiler": "5.2.1",
    "@angular/compiler-cli": "5.2.1",
    "@angular/core": "5.2.1",
    "@angular/forms": "5.2.1",
    "@angular/http": "5.2.1",
    "@angular/platform-browser": "5.2.1",
    "@angular/platform-browser-dynamic": "5.2.1",
    "@angular/platform-server": "5.2.1",
    "@angular/router": "5.2.1",
    "@ngtools/webpack": "1.9.5",
    "@types/chai": "4.1.1",
    "@types/jasmine": "2.8.5",
    "@types/webpack-env": "1.13.3",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.4.1",
    "popper.js": "^1.12.5",
    "bootstrap": "4.0.0",
    "chai": "4.1.2",
    "css": "2.2.1",
    "css-loader": "0.28.9",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.12",
    "expose-loader": "0.7.4",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-loader": "0.5.5",
    "isomorphic-fetch": "2.2.1",
    "jasmine-core": "2.9.1",
    "jquery": "3.3.1",
    "json-loader": "0.5.7",
    "karma": "2.0.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.1",
    "karma-webpack": "2.0.9",
    "preboot": "6.0.0-beta.1",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.12",
    "rxjs": "5.5.6",
    "style-loader": "0.19.1",
    "to-string-loader": "1.1.5",
    "typescript": "2.6.2",
    "url-loader": "0.6.2",
    "webpack": "3.10.0",
    "webpack-hot-middleware": "2.21.0",
    "webpack-merge": "4.1.1",
    "zone.js": "0.8.20"
  }
}

I am getting an error as

Uncaught Error: Cannot find module "popper.js"
    at webpackMissingModule (vendor.js?v=g866IhqI_4JvgibiHgn9GiAXKfG42-s7C9LGGfxA0Tk:sourcemap:82252)
    at vendor.js?v=g866IhqI_4JvgibiHgn9GiAXKfG42-s7C9LGGfxA0Tk:sourcemap:82252
    at Object.<anonymous> (vendor.js?v=g866IhqI_4JvgibiHgn9GiAXKfG42-s7C9LGGfxA0Tk:sourcemap:82255)
    at __webpack_require__ (vendor.js?v=g866IhqI_4JvgibiHgn9GiAXKfG42-s7C9LGGfxA0Tk:sourcemap:21)
    at Object.<anonymous> (bootstrap.js from dll-reference vendor_19596f3f8868cecda14a:1)
    at __webpack_require__ (bootstrap acba0f7e8b1985fd75ba:678)
    at fn (bootstrap acba0f7e8b1985fd75ba:88)
    at Object.<anonymous> (process-update.js:146)
    at __webpack_require__ (bootstrap acba0f7e8b1985fd75ba:678)
    at fn (bootstrap acba0f7e8b1985fd75ba:88)

Webpack.config.js

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
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' }
            ]
        },
        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 AngularCompilerPlugin({
                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 AngularCompilerPlugin({
                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];
};

It was working perfectly with angular 4 template in asp.net core Visual Studio 2017. When I update the package to Angular 5, I'm getting an error as described above.

I tried to google the solution, but not able to find the solution.

6
  • No, I don't have .angular-cli.json. I was using angular template from visual studio. I, have added the webpack.config.js file . Please have a look
    – San Jaisy
    Commented Jan 23, 2018 at 13:12
  • Seems you are using bootstrap.js, Use bootstrap.bundle.js and bootstrap.bundle.min.js
    – Satpal
    Commented Jan 23, 2018 at 13:19
  • Not sure how is this related to the upgrade, popper.js is not required by Angular itself. Commented Jan 23, 2018 at 13:24
  • stackoverflow.com/questions/46952775/…
    – Satpal
    Commented Jan 23, 2018 at 13:26
  • I need to use bootstrap.bundle.js and bootstrap.bundle.min.js. Where should I, add in angular 5 asp.net project
    – San Jaisy
    Commented Jan 25, 2018 at 23:45

3 Answers 3

7

I fixed the same problem in my project by:

1) Adding popper.js to the package.json file (I see you already have this), and running "npm install":

"popper.js": "^1.12.9",

2) Adding an Import popper.js statement to the boot.browser.js file before the import bootstrap statement:

import 'popper.js';
import 'bootstrap';
6

For newer versions of Angular, npm install @popperjs/core did the trick!

1

Probably you need to run npm install after you have updated your package.json file.

0

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.