Not working with angular 5 #1385

riaadh · 2017-11-13T16:21:28Z

Hello,
I created a new Angular project using the official ASP.NET Core Web Application template in VS2017.
Then i updated angular 4 to Angular 5 using npm.
npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0 ``

At startup i have this error

System.AggregateException occurred HResult=0x80131500 Message=One or more errors occurred. (Version of @angular/compiler-cli needs to be 2.3.1 or greater. Current version is "5.1.0-beta.0". Error: Version of @angular/compiler-cli needs to be 2.3.1 or greater. Current version is "5.1.0-beta.0". at Object.<anonymous> (C:\darwinTFS\Car-e\Integration\Car-e.Website\node_modules\@ngtools\webpack\src\index.js:27:11) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> (C:\darwinTFS\Car-e\Integration\Car-e.Website\webpack.config.js:4:46) at Module._compile (module.js:570:32)) Source=<Cannot evaluate the exception source> StackTrace: at System.Threading.Tasks.Task1.GetResultCore(Boolean waitCompletionNotification)
at Microsoft.AspNetCore.Builder.WebpackDevMiddleware.UseWebpackDevMiddleware(IApplicationBuilder appBuilder, WebpackDevMiddlewareOptions options)
at Car_e_Website.Startup.Configure(IApplicationBuilder app, IHostingEnvironment env) in C:\darwinTFS\Car-e\Integration\Car-e.Website\Startup.cs:line 34

Inner Exception 1:
NodeInvocationException: Version of @angular/compiler-cli needs to be 2.3.1 or greater. Current version is "5.1.0-beta.0".
Error: Version of @angular/compiler-cli needs to be 2.3.1 or greater. Current version is "5.1.0-beta.0".
at Object. (C:\darwinTFS\Car-e\Integration\Car-e.Website\node_modules@ngtools\webpack\src\index.js:27:11)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (C:\darwinTFS\Car-e\Integration\Car-e.Website\webpack.config.js:4:46)
at Module._compile (module.js:570:32)`

I tried Angular 5 , 5.1.0beta nothing works

Thank you for your help

The text was updated successfully, but these errors were encountered:

jrmcdona · 2017-11-15T18:10:20Z

It worked fine for me in Angular 5

 "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@types/webpack-env": "1.13.0",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.2.1",
    "core-js": "^2.5.1",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "json-server": "^0.12.0",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rimraf": "^2.6.2",
    "rxjs": "^5.5.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "to-string-loader": "^1.1.5",
    "typescript": "2.5.2",
    "url-loader": "^0.5.7",
    "webpack": "^3.6.0",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-merge": "^4.1.0",
    "zone.js": "^0.8.17"
  },
  "devDependencies": {
    "@angular/cli": "^1.3.2",
    "@ngtools/webpack": "^1.8.0",
    "@types/chai": "^3.4.34",
    "@types/jasmine": "^2.5.37",
    "chai": "^3.5.0",
    "codelyzer": "^4.0.0",
    "istanbul-instrumenter-loader": "^3.0.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.7.1",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.4",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.3",
    "protractor": "^5.1.2",
    "tslint": "^5.7.0",
    "webpack-bundle-analyzer": "^2.9.0"
  }

riaadh · 2017-11-16T10:30:16Z

Hi,
Can you tell me How u did the upgrade?
Thanks

ntemirov · 2017-11-16T12:22:37Z

Hi.
I have the same problem.

it seems because of the version of the @ngtools/webpack. I update it from 1.5.0 to 1.5.2 and everything worked

chamikasandamal · 2017-11-20T04:45:58Z

@NazirTemirov can you share your webpack configurations. So we can get an idea about how to fix this.

ntemirov · 2017-11-20T08:31:59Z

webpack.config.vendor.js

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/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    'zone.js',
];
const nonTreeShakableModules = [
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    '@angular/material/prebuilt-themes/indigo-pink.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];
}

ntemirov · 2017-11-20T08:32:25Z

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$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-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.module.browser#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.module.server#AppModule'),
                exclude: ['./**/*.browser.ts']
            })
        ]),
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
};

ntemirov · 2017-11-20T08:35:01Z

package.json

{
  "name": "GroupBuying_Web",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "dependencies": {
    "@angular/animations": "^5.0.1",
    "@angular/cdk": "^5.0.0-rc0",
    "@angular/common": "^5.0.1",
    "@angular/compiler": "^5.0.1",
    "@angular/compiler-cli": "^5.0.1",
    "@angular/core": "^5.0.1",
    "@angular/forms": "^5.0.1",
    "@angular/http": "^5.0.1",
    "@angular/material": "^5.0.0-rc0",
    "@angular/platform-browser": "^5.0.1",
    "@angular/platform-browser-dynamic": "^5.0.1",
    "@angular/platform-server": "^5.0.1",
    "@angular/router": "^5.0.1",
    "@ngtools/webpack": "^1.8.0",
    "@ngx-translate/core": "^8.0.0",
    "@ngx-translate/http-loader": "2.0.0",
    "@types/grecaptcha": "^2.0.33",
    "@types/webpack-env": "^1.13.2",
    "angular2-promise-buttons": "2.0.1",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "0.11.2",
    "hammerjs": "^2.0.8",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "ngx-infinite-scroll": "^0.5.1",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "^5.5.2",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "typescript": "2.4.2",
    "url-loader": "0.5.9",
    "webpack": "^2.5.1",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-merge": "^4.1.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@types/chai": "4.0.1",
    "@types/jasmine": "2.5.53",
    "chai": "4.0.2",
    "jasmine-core": "2.6.4",
    "karma": "1.7.1",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.3"
  }
}

chamikasandamal · 2017-11-21T07:23:46Z

your configs gives me following error.

No NgModule metadata found for 'AppModule'.

when I turn off the server side prerendering, working without any issues.

ntemirov · 2017-11-21T13:12:06Z

It worked fine for me.
Try deleting dist folders from ClientApp and wwwroot and rebuilding the project.
But I had this problem #1388

chamikasandamal · 2017-11-21T17:39:11Z

Yes. that is the extract thing i'm saying. when you turn off the serverside prerendering app will work.

SteveSandersonMS · 2017-11-23T15:32:49Z

Thanks @NazirTemirov for the info.

Yes, if you want to upgrade to Angular 5, you will need to disable server-side rendering because Angular 5 (at least for production builds) requires it to work in a substantially different way. We're working on an Angular 5 template here: #1288 (comment)

Deilan · 2018-01-10T18:37:22Z

@SteveSandersonMS How to disable server-side rendering properly?

guillep2k · 2018-01-23T21:14:52Z

@Deilan Check this: TrilonIO/aspnetcore-angular-universal#460 (comment)

mak0t0san · 2018-01-25T04:37:32Z

You can utilize ngtools/webpack for the browser side and use angular2-template-loader for the server side. Here's my webpack config, which works with Angular 5 and doesn't sacrifice server side rendering.

const path = require('path');
const webpack = require('webpack');
const { DllReferencePlugin, SourceMapDevToolPlugin} = require('webpack');
const merge = require('webpack-merge');
const {AngularCompilerPlugin, PLATFORM} = require('@ngtools/webpack');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

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',
            chunkFilename:'[id].chunk.js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                {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)$/,
                    use: [{
                        loader: 'style-loader', // inject CSS to page
                    }, {
                        loader: 'css-loader', // translates CSS into CommonJS modules
                    }, {
                        loader: 'postcss-loader', // Run post css actions
                        options: {
                            plugins: function () { // post css plugins, can be exported to postcss.config.js
                                return [
                                    require('precss'),
                                    require('autoprefixer')
                                ];
                            }
                        }
                    }, {
                        loader: 'sass-loader' // compiles Sass to CSS
                    }]
                }
            ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        module:{
            rules:[
                {
                    test: /\.ts$/,
                    use: ['@ngtools/webpack']
                },
            ]
        },
        entry: {'main-client': './ClientApp/boot.browser.ts'},
        output: {path: path.join(__dirname, clientBundleOutputDir)},
        plugins: [
            new DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            }),
            new AngularCompilerPlugin({
                "mainPath": path.join(__dirname, 'ClientApp/boot.browser.ts'),
                platform: PLATFORM.Browser,
                tsConfigPath: './tsconfig.prod.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
                sourceMap: true
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new 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 UglifyJsPlugin({
                sourceMap: true
            })
        ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, {
        module:{
          rules:[
              { test: /\.ts$/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] },
          ]
        },
        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'
            })
        ],
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });


    return [clientBundleConfig, serverBundleConfig];
};

Mattek1979 · 2018-01-25T17:46:40Z

@mak0t0san I tried your config (minus sass stuff) still getting No NgModule metadata found for 'AppModule'. Anything else that you've changed?

SteveSandersonMS closed this as completed Nov 23, 2017

dobrinsky mentioned this issue Nov 28, 2017

No NgModule metadata found for 'e' angular/angular#20660

Closed

Darkseal mentioned this issue Jan 5, 2018

Chapter_08. An unhandled exception occurred while processing the request. PacktPublishing/ASP.NET-Core-2-and-Angular-5#9

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not working with angular 5 #1385

Not working with angular 5 #1385

riaadh commented Nov 13, 2017

jrmcdona commented Nov 15, 2017

riaadh commented Nov 16, 2017

ntemirov commented Nov 16, 2017 •

edited

Loading

chamikasandamal commented Nov 20, 2017

ntemirov commented Nov 20, 2017 •

edited

Loading

ntemirov commented Nov 20, 2017 •

edited

Loading

ntemirov commented Nov 20, 2017 •

edited

Loading

chamikasandamal commented Nov 21, 2017

ntemirov commented Nov 21, 2017

chamikasandamal commented Nov 21, 2017

SteveSandersonMS commented Nov 23, 2017

Deilan commented Jan 10, 2018

guillep2k commented Jan 23, 2018

mak0t0san commented Jan 25, 2018

Mattek1979 commented Jan 25, 2018

Not working with angular 5 #1385

Not working with angular 5 #1385

Comments

riaadh commented Nov 13, 2017

jrmcdona commented Nov 15, 2017

riaadh commented Nov 16, 2017

ntemirov commented Nov 16, 2017 • edited Loading

chamikasandamal commented Nov 20, 2017

ntemirov commented Nov 20, 2017 • edited Loading

ntemirov commented Nov 20, 2017 • edited Loading

ntemirov commented Nov 20, 2017 • edited Loading

chamikasandamal commented Nov 21, 2017

ntemirov commented Nov 21, 2017

chamikasandamal commented Nov 21, 2017

SteveSandersonMS commented Nov 23, 2017

Deilan commented Jan 10, 2018

guillep2k commented Jan 23, 2018

mak0t0san commented Jan 25, 2018

Mattek1979 commented Jan 25, 2018

ntemirov commented Nov 16, 2017 •

edited

Loading

ntemirov commented Nov 20, 2017 •

edited

Loading

ntemirov commented Nov 20, 2017 •

edited

Loading

ntemirov commented Nov 20, 2017 •

edited

Loading