Update to Angular 4.0.0

[ghost]

Angular 4.0.0 has now been released http://angularjs.blogspot.com.au/2017/03/angular-400-now-available.html with some good improvements

[SteveSandersonMS]

PR at https://github.com/aspnet/JavaScriptServices/pull/930

[paddyza]

That plan sounds perfect!

[SteveSandersonMS]

@philip-reed If you only do client-side rendering, updating the version number is just about all you have to do (haven't checked exactly though). However, if you do server-side rendering, there's far more to it - Angular's approach to server-side rendering is completely different in version 4. In that case you'll have to look at the diffs in this PR and make a corresponding set of changes. But note this is still something we're working on, so don't go ahead yet unless you're willing to debug any problems on your own.

[AmrineA]

@philip-reed: @SteveSandersonMS is correct, you can upgrade the current template to Angular 4 if you're only doing client side rendering. I've used the Angular 2 template and removed all the server configuration for it along with the server side prerendering and been able to upgrade to Angular 4. However, I had to add some polyfills in that were being taken care of by some of the angular 2 packages. It's possible, but not without some work and debugging.

[SteveSandersonMS]

Please see #930 for instructions on how to try the Angular 4 version of the template.

[Vx2gas]

@AmrineA: Would you mind posting details of what stuff we need to remove for serverside rendering to help with the transition to angular 4? I started a new thread here in #938

[AmrineA]

@Vx2gas I posted the changes and steps I found in my project from comparing the commits. You can ask me any questions in the other thread if you run into issues.

[Vx2gas]

When I upgrade to angular4 I get the following error when I webpack:

> WARNING in ./~/@angular/core/@angular/core.es5.js
>     5877:15-36 Critical dependency: the request of a dependency is an expression

Any fixes?

Update: Was fixed in a follow-up here: #938

[SteveSandersonMS]

This is now done and is released in package version 0.9.2.

There are still some other Angular 4 updates we want to do later (e.g., AoT, cleaning up error handling), but you can go ahead and use it now.

[AmrineA]

I just pulled down the latest ones and I'm getting an error in vendor.js.

[AmrineA]

@SteveSandersonMS I've got this resolved. Would it be okay to submit a PR for the fix?

[SteveSandersonMS]

@AmrineA I'm not getting any error with this, so I'm not sure what you'd be fixing. A PR might help to clarify what the issue is though, even if we don't apply it. Thanks for looking into this!

[AmrineA]

@SteveSandersonMS It's related to using IE to run the application. I had the same issue with the template that @MarkPieszak had created and the solution was to add the necessary polyfills. I'll try to get a PR in soon.

[AmrineA]

@SteveSandersonMS PR #953 has been created with the polyfills to fix this issue in IE.

[MarkPieszak]

Yes those appear in lower IEs unless you have the correct polyfills from core-js. It'd be a good idea to include them (but leave them commented out, as not everyone needs lower than IE11, as it increases bundle size)

[AmrineA]

@MarkPieszak I get the error in IE 11 on Windows 7. Not sure if it should work without​ them in that browser version or not.

[MarkPieszak]

That's usually the evergreen polyfills that's usually needed, I think you're right! Too many combinations of things 🙈 Haha

[ADefWebserver]

Yes those appear in lower IEs unless you have the correct polyfills from core-js. It'd be a good idea to include them (but leave them commented out, as not everyone needs lower than IE11, as it increases bundle size)

In this PR (https://github.com/aspnet/JavaScriptServices/pull/952) I am able to make my IE issue go away just by including:

import "core-js/client/shim";

at the top of boot-client.ts. Isn't core-js already included by Angular?

[MarkPieszak]

It's not included, as trimming down package size is important, but adding that client/shim can get it to work yes! More details here: https://angular.io/docs/ts/latest/guide/browser-support.html

[AmrineA]

I was able to add the client/shim reference and it worked. I also removed all references to core-js and it's still in my node_modules folder after running npm prune. Something must be referencing it and pulling it down as part of the template.

[cbcolleenb]

Hello, I can't seem to figure this out (how to replace angular2-universal-polyfills/browser with core-js/shim polyfills)? I try to reference core-js/shim in the boot-client.ts but it doesn't recognize it and i find that my core-js folder doesn't have a shim sub-directory. When I try to install lates of core-js it says it's dependent on zone.js but I have the correct zone.js. Please let me know if and how you resolved these things to upgrade to Angular 4. I get the error "reflect-metadata shim is required when using class decorators" when running.

My boot-client.ts file is as follows: mport { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import "reflect-metadata"; import 'bootstrap'; import { enableProdMode } from '@angular/core';

import "core-js/es6"; enableProdMode(); // Enable either Hot Module Reloading or production mode

// Boot the application, either now or when the DOM content is loaded const platform = platformBrowserDynamic(); const bootApplication = () => { platform.bootstrapModule(AppModule); }; if (document.readyState === 'complete') { bootApplication(); } else { document.addEventListener('DOMContentLoaded', bootApplication); }

Thank you, Colleen -- | --

[AmrineA]

@cbcolleenb I use a separate polyfills.ts file with the following contents.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

import 'zone.js';

I then import that at the very top of the boot-client.ts. I'm wondering if perhaps the order of the imports is causing you issues. Also, what do you have in your webpack.config.vendor.js file?

[cbcolleenb]

Hi Adam, thanks for the quick response...my webpack.config.vendor.js file has the following:

var isDevBuild = process.argv.indexOf('--env.prod') < 0; var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var extractCSS = new ExtractTextPlugin('vendor.css');

module.exports = { node: { fs: 'empty' }, resolve: { extensions: ['*', '.ts', '.js'] }, module: { loaders: [ { test: /.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, { test: /.css(\?|$)/, loader: extractCSS.extract(['css-loader']) } ] }, entry: { vendor: [ 'reflect-metadata', 'rxjs', 'zone.js', '@angular/common', '@angular/compiler', '@angular/core', '@angular/forms', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', 'systemjs', "acorn" ]

},
output: {
    path: path.join(__dirname, 'wwwroot', 'dist'),
    filename: '[name].js',
    library: '[name]_[hash]',
},
plugins: [
    extractCSS,
    new webpack.ProvidePlugin({
        $: 'jquery', jQuery: 'jquery'
    }), // Maps these identifiers to the jQuery package (because

Bootstrap expects it to be a global variable) //new webpack.optimize.OccurrenceOrderPlugin(), new webpack.DllPlugin({ path: path.join(_dirname, 'wwwroot', 'dist', '[name]-manifest.json'), name: '[name][hash]' }) ].concat(isDevBuild ? [] : [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ]) };

I'm going to try your polyfill.ts . Thanks! Colleen

On Mon, Sep 25, 2017 at 2:33 PM, Adam Amrine notifications@github.com wrote:

@cbcolleenb https://github.com/cbcolleenb I use a separate polyfills.ts file with the following contents.

/ IE9, IE10 and IE11 requires all of the following polyfills. / import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/set';

/ Evergreen browsers require these. / import 'core-js/es6/reflect'; import 'core-js/es7/reflect';

import 'zone.js';

I then import that at the very top of the boot-client.ts. I'm wondering if perhaps the order of the imports is causing you issues. Also, what do you have in your webpack.config.vendor.js file?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-331987868, or mute the thread https://github.com/notifications/unsubscribe-auth/AS0dkto5sqkW14QMCDFg4K-N92FmDcYuks5sl__-gaJpZM4Mo5ff .

[cbcolleenb]

also, this is my tsconfig.json:

{ "compilerOptions": { "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es6", "dom" ], "module": "es2015", "moduleResolution": "node", "noImplicitAny": false, "sourceMap": true, "suppressImplicitAnyIndexErrors": true, "target": "es5" }, "types": [ "node", "core-js" ], "exclude": [ "node_modules/*" ], "atom": { "rewriteTsconfig": false } }

and package.json:

{ "name": "Angular2Spa", "version": "0.0.0", "license": "UNLICENSED", "dependencies": { "@angular/common": "^4.4.3", "@angular/compiler": "^4.4.3", "@angular/core": "^4.4.3", "@angular/forms": "^4.4.3", "@angular/http": "^4.4.3", "@angular/platform-browser": "^4.4.3", "@angular/platform-browser-dynamic": "^4.4.3", "@angular/platform-server": "4.4.3", "@angular/router": "^4.4.3", "@angular/animations": "^4.4.3", "acorn": "^0.8.0", "core-js": "^2.5.1", "enhanced-resolve": "^3.0.2", "extract-text-webpack-plugin": "^3.0.0", "npm": "^5.0.3", "systemjs": "^0.19.47", "uglify-js": "^2.8.29", "babel-loader": "^7.1.1", "babel-core": "6.26.0", "file-loader": "^0.11.2", "postcss-loader": "^2.0.6", "style-loader": "^0.18.2", "webpack": "^3.2.0", "webpack-node-externals": "1.6.0", "webpack-merge": "4.1.0", "ts-loader": "2.3.7", "raw": "0.1.4", "to-string": "0.2.0", "bootstrap": "3.3.7", "css-loader": "0.28.7", "raw-loader": "0.5.1", "jquery": "3.2.1", "zone.js": "^0.8.17", "reflect-metadata": "0.1.10", "@progress/telerik-angular-report-viewer": "2.17.913" }, "devDependencies": { "@angular/compiler-cli": "4.4.3", "rxjs": "^5.2.0", "@types/node": "^6.0.60", "concurrently": "^3.1.0", "lite-server": "^2.3.0", "typescript": "^2.2.2" } } thanks, Colleen

On Mon, Sep 25, 2017 at 2:40 PM, Colleen cbcolleenb@gmail.com wrote:

Hi Adam, thanks for the quick response...my webpack.config.vendor.js file has the following:

var isDevBuild = process.argv.indexOf('--env.prod') < 0; var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var extractCSS = new ExtractTextPlugin('vendor.css');

module.exports = { node: { fs: 'empty' }, resolve: { extensions: ['*', '.ts', '.js'] }, module: { loaders: [ { test: /.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, { test: /.css(\?|$)/, loader: extractCSS.extract(['css-loader']) } ] }, entry: { vendor: [ 'reflect-metadata', 'rxjs', 'zone.js', '@angular/common', '@angular/compiler', '@angular/core', '@angular/forms', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', 'systemjs', "acorn" ]

},
output: {
    path: path.join(__dirname, 'wwwroot', 'dist'),
    filename: '[name].js',
    library: '[name]_[hash]',
},
plugins: [
    extractCSS,
    new webpack.ProvidePlugin({
        $: 'jquery', jQuery: 'jquery'
    }), // Maps these identifiers to the jQuery package (because

Bootstrap expects it to be a global variable) //new webpack.optimize.OccurrenceOrderPlugin(), new webpack.DllPlugin({ path: path.join(_dirname, 'wwwroot', 'dist', '[name]-manifest.json'), name: '[name][hash]' }) ].concat(isDevBuild ? [] : [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ]) };

I'm going to try your polyfill.ts . Thanks! Colleen

On Mon, Sep 25, 2017 at 2:33 PM, Adam Amrine notifications@github.com wrote:

@cbcolleenb https://github.com/cbcolleenb I use a separate polyfills.ts file with the following contents.

/ IE9, IE10 and IE11 requires all of the following polyfills. / import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/set';

/ Evergreen browsers require these. / import 'core-js/es6/reflect'; import 'core-js/es7/reflect';

import 'zone.js';

I then import that at the very top of the boot-client.ts. I'm wondering if perhaps the order of the imports is causing you issues. Also, what do you have in your webpack.config.vendor.js file?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-331987868, or mute the thread https://github.com/notifications/unsubscribe-auth/AS0dkto5sqkW14QMCDFg4K-N92FmDcYuks5sl__-gaJpZM4Mo5ff .

[AmrineA]

@cbcolleenb Try the polyfills.ts first and see if that works for you.

[emonney]

@cbcolleenb Take a look at how I implemented it here: https://github.com/emonney/QuickApp/blob/master/src/QuickApp/ClientApp/boot.browser.ts Using core.js sim. The project is based off this repo.

[cbcolleenb]

Hi, after using polyfills.ts and removing the other references I had, I got a new error: "Uncaught TypeError: n.replace is not a function at Ie (vendor.js?v=cF-oRSzI7zKtOJYCqo4-VM3BFrYBGvp2TIrRTJXoo80:453) at vendor.js?v=cF-oRSzI7zKtOJYCqo4-VM3BFrYBGvp2TIrRTJXoo80:551 at Array.map () at t.normalizeStylesheet (vendor.js?v=cF-oRSzI7zKtOJYCqo4-VM3BFrYBGvp2TIrRTJXoo80:551) at t.normalizeLoadedTemplate (vendor.js?v=cF-oRSzI7zKtOJYCqo4-VM3BFrYBGvp2TIrRTJXoo80:551) at vendor.js?v=cF-oRSzI7zKtOJYCqo4-VM3BFrYBGvp2TIrRTJXoo80:551 at Object.then (vendor.js?v=cF-oRSzI7zKtOJYCqo4-VM3BFrYBGvp2TIrRTJXoo80:523) at t.normalizeTemplateOnly (vendor.js?v=cF-oRSzI7zKtOJYCqo4-VM3BFrYBGvp2TIrRTJXoo80:551) at t.normalizeTemplate (vendor.js?v=cF-oRSzI7zKtOJYCqo4-VM3BFrYBGvp2TIrRTJXoo80:551) at t.loadDirectiveMetadata (vendor.js?v=cF-oRSzI7zKtOJYCqo4-VM3BFrYBGvp2TIrRTJXoo80:572)

On Mon, Sep 25, 2017 at 2:50 PM, Adam Amrine notifications@github.com wrote:

@cbcolleenb https://github.com/cbcolleenb Try the polyfills.ts first and see if that works for you.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-331992445, or mute the thread https://github.com/notifications/unsubscribe-auth/AS0dkkoiAWXAFJLzJLpu3y7y3-1m6sdfks5smAQcgaJpZM4Mo5ff .

[cbcolleenb]

Hi, I looked at your code.. I had tried import 'core-js/client/shim'; before, but my version of core-js must not have shim as i couldn't find a shim sub-directory. Thanks, Colleen

On Mon, Sep 25, 2017 at 2:51 PM, Ebenezer Monney notifications@github.com wrote:

Take a look at how I implemented it here: https://github.com/emonney/ QuickApp/blob/master/src/QuickApp/ClientApp/boot.browser.ts Using core.js sim. The project is based off this repo.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-331992706, or mute the thread https://github.com/notifications/unsubscribe-auth/AS0dkp0FMEwP5ZmDp51bMWAiPEoGGUkzks5smARPgaJpZM4Mo5ff .

[AmrineA]

Have you rebuilt your vendor.js file recently?

On Mon, Sep 25, 2017 at 4:02 PM, Colleen notifications@github.com wrote:

Hi, I looked at your code.. I had tried import 'core-js/client/shim'; before, but my version of core-js must not have shim as i couldn't find a shim sub-directory. Thanks, Colleen

On Mon, Sep 25, 2017 at 2:51 PM, Ebenezer Monney <notifications@github.com

wrote:

Take a look at how I implemented it here: https://github.com/emonney/ QuickApp/blob/master/src/QuickApp/ClientApp/boot.browser.ts Using core.js sim. The project is based off this repo.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800# issuecomment-331992706, or mute the thread https://github.com/notifications/unsubscribe-auth/ AS0dkp0FMEwP5ZmDp51bMWAiPEoGGUkzks5smARPgaJpZM4Mo5ff

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-331995634, or mute the thread https://github.com/notifications/unsubscribe-auth/AGDtPf8TvDoRhEX64XEb3ZaTJoxz_9nmks5smAbrgaJpZM4Mo5ff .

[cbcolleenb]

it seems to build when I publish it.. is there an explicit way to re-build vendor?

On Mon, Sep 25, 2017 at 3:06 PM, Adam Amrine notifications@github.com wrote:

Have you rebuilt your vendor.js file recently?

On Mon, Sep 25, 2017 at 4:02 PM, Colleen notifications@github.com wrote:

Hi, I looked at your code.. I had tried import 'core-js/client/shim'; before, but my version of core-js must not have shim as i couldn't find a shim sub-directory. Thanks, Colleen

On Mon, Sep 25, 2017 at 2:51 PM, Ebenezer Monney < notifications@github.com

wrote:

Take a look at how I implemented it here: https://github.com/emonney/ QuickApp/blob/master/src/QuickApp/ClientApp/boot.browser.ts Using core.js sim. The project is based off this repo.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800# issuecomment-331992706, or mute the thread https://github.com/notifications/unsubscribe-auth/ AS0dkp0FMEwP5ZmDp51bMWAiPEoGGUkzks5smARPgaJpZM4Mo5ff

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800# issuecomment-331995634, or mute the thread https://github.com/notifications/unsubscribe-auth/ AGDtPf8TvDoRhEX64XEb3ZaTJoxz_9nmks5smAbrgaJpZM4Mo5ff

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-331996501, or mute the thread https://github.com/notifications/unsubscribe-auth/AS0dkuICvkAcWJ2mfEjgjQJhAV2lpputks5smAesgaJpZM4Mo5ff .

[AmrineA]

I believe it's webpack --config webpack.config.vendor.js. You have to run it from the command line in the directory that your webpack.config.vendor.js file is in.

On Mon, Sep 25, 2017 at 4:08 PM, Colleen notifications@github.com wrote:

it seems to build when I publish it.. is there an explicit way to re-build vendor?

On Mon, Sep 25, 2017 at 3:06 PM, Adam Amrine notifications@github.com wrote:

Have you rebuilt your vendor.js file recently?

On Mon, Sep 25, 2017 at 4:02 PM, Colleen notifications@github.com wrote:

Hi, I looked at your code.. I had tried import 'core-js/client/shim'; before, but my version of core-js must not have shim as i couldn't find a shim sub-directory. Thanks, Colleen

On Mon, Sep 25, 2017 at 2:51 PM, Ebenezer Monney < notifications@github.com

wrote:

Take a look at how I implemented it here: https://github.com/emonney/ QuickApp/blob/master/src/QuickApp/ClientApp/boot.browser.ts Using core.js sim. The project is based off this repo.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800# issuecomment-331992706, or mute the thread https://github.com/notifications/unsubscribe-auth/ AS0dkp0FMEwP5ZmDp51bMWAiPEoGGUkzks5smARPgaJpZM4Mo5ff

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800# issuecomment-331995634, or mute the thread https://github.com/notifications/unsubscribe-auth/ AGDtPf8TvDoRhEX64XEb3ZaTJoxz_9nmks5smAbrgaJpZM4Mo5ff

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800# issuecomment-331996501, or mute the thread https://github.com/notifications/unsubscribe-auth/ AS0dkuICvkAcWJ2mfEjgjQJhAV2lpputks5smAesgaJpZM4Mo5ff .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-331997165, or mute the thread https://github.com/notifications/unsubscribe-auth/AGDtPbat3sIptVQZuDjsNo27Ykaej3qsks5smAhYgaJpZM4Mo5ff .

[cbcolleenb]

oh ok.. the application does this when I publish, so i have been building it by publishing

On Mon, Sep 25, 2017 at 3:13 PM, Adam Amrine notifications@github.com wrote:

I believe it's webpack --config webpack.config.vendor.js. You have to run it from the command line in the directory that your webpack.config.vendor.js file is in.

On Mon, Sep 25, 2017 at 4:08 PM, Colleen notifications@github.com wrote:

it seems to build when I publish it.. is there an explicit way to re-build vendor?

On Mon, Sep 25, 2017 at 3:06 PM, Adam Amrine notifications@github.com wrote:

Have you rebuilt your vendor.js file recently?

On Mon, Sep 25, 2017 at 4:02 PM, Colleen notifications@github.com wrote:

Hi, I looked at your code.. I had tried import 'core-js/client/shim'; before, but my version of core-js must not have shim as i couldn't find a shim sub-directory. Thanks, Colleen

On Mon, Sep 25, 2017 at 2:51 PM, Ebenezer Monney < notifications@github.com

wrote:

Take a look at how I implemented it here: https://github.com/emonney/ QuickApp/blob/master/src/QuickApp/ClientApp/boot.browser.ts Using core.js sim. The project is based off this repo.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800# issuecomment-331992706, or mute the thread https://github.com/notifications/unsubscribe-auth/ AS0dkp0FMEwP5ZmDp51bMWAiPEoGGUkzks5smARPgaJpZM4Mo5ff

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800# issuecomment-331995634, or mute the thread https://github.com/notifications/unsubscribe-auth/ AGDtPf8TvDoRhEX64XEb3ZaTJoxz_9nmks5smAbrgaJpZM4Mo5ff

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800# issuecomment-331996501, or mute the thread https://github.com/notifications/unsubscribe-auth/ AS0dkuICvkAcWJ2mfEjgjQJhAV2lpputks5smAesgaJpZM4Mo5ff .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800# issuecomment-331997165, or mute the thread https://github.com/notifications/unsubscribe-auth/ AGDtPbat3sIptVQZuDjsNo27Ykaej3qsks5smAhYgaJpZM4Mo5ff

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-331998284, or mute the thread https://github.com/notifications/unsubscribe-auth/AS0dkmTZKnfXFwv1JV6SKqUQk0K_-2Grks5smAlWgaJpZM4Mo5ff .

[AmrineA]

I'm not sure if this helps, but here is my package.json. I wouldn't copy it verbatim or you'll get stuff you don't need and remove things you do.

{
  "name": "appname",
  "version": "1.0.0",
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/platform-server": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@types/node": "^7.0.12",
    "angular2-template-loader": "^0.6.2",
    "aspnet-webpack": "^1.0.17",
    "awesome-typescript-loader": "^3.0.0",
    "core-js": "^2.4.1",
    "css": "^2.2.1",
    "css-loader": "^0.28.0",
    "es6-shim": "^0.35.3",
    "es6-promise": "^4.1.0",
    "event-source-polyfill": "^0.0.9",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "json-loader": "^0.5.4",
    "preboot": "^4.5.2",
    "raw-loader": "^0.5.1",
    "rxjs": "^5.3.0",
    "style-loader": "^0.16.1",
    "to-string-loader": "^1.1.5",
    "typescript": "^2.2.2",
    "url-loader": "^0.5.8",
    "webpack": "^2.3.3",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0",
    "zone.js": "^0.8.5",
    "font-awesome": "^4.7.0",
    "ionicons": "^3.0.0",
    "admin-lte": "^2.3.11"
  }
}

Here is my webpack.config.vendor.js:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');

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: /\.(jpg|png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
            ]
        },
        entry: {
            vendor: [
                '@angular/common',
                '@angular/compiler',
                '@angular/core',
                '@angular/forms',
                '@angular/http',
                '@angular/platform-browser',
                '@angular/platform-browser-dynamic',
                '@angular/router',
                '@angular/platform-server',
                'admin-lte/bootstrap/css/bootstrap.css',
                'admin-lte/dist/css/AdminLTE.css',
                'admin-lte/dist/css/skins/skin-black.css',
                'core-js',
                'es6-shim',
                'es6-promise',
                'event-source-polyfill',
                'font-awesome/css/font-awesome.css',
                'ionicons/dist/css/ionicons.css',
                //'jquery',
                'zone.js',
            ]
        },
        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(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')),
            new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
        ]
    };

    const clientBundleConfig = merge(sharedConfig, {
        output: { path: path.join(__dirname, 'wwwroot', 'dist') },
        module: {
            rules: [
                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) }
            ]
        },
        plugins: [
            extractCSS,
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    return [clientBundleConfig];
}

Is there a specific browser you're using? Have you tried other browsers?

[cbcolleenb]

ok thanks! I'll look at it and get back tomorrow.

I've been using Chrome primarily but our company still uses IE11. The ngFors are extremely slow in IE11, so that's why I upgraded to Angular4 and better polyfills. I'm hoping this will solve the slowness problem. Did you notice that?

On Mon, Sep 25, 2017 at 3:22 PM, Adam Amrine notifications@github.com wrote:

I'm not sure if this helps, but here is my package.json. I wouldn't copy it verbatim or you'll get stuff you don't need and remove things you do.

{ "name": "appname", "version": "1.0.0", "dependencies": { "@angular/animations": "^4.0.0", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/platform-server": "^4.0.0", "@angular/router": "^4.0.0", "@types/node": "^7.0.12", "angular2-template-loader": "^0.6.2", "aspnet-webpack": "^1.0.17", "awesome-typescript-loader": "^3.0.0", "core-js": "^2.4.1", "css": "^2.2.1", "css-loader": "^0.28.0", "es6-shim": "^0.35.3", "es6-promise": "^4.1.0", "event-source-polyfill": "^0.0.9", "expose-loader": "^0.7.3", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.11.1", "html-loader": "^0.4.5", "json-loader": "^0.5.4", "preboot": "^4.5.2", "raw-loader": "^0.5.1", "rxjs": "^5.3.0", "style-loader": "^0.16.1", "to-string-loader": "^1.1.5", "typescript": "^2.2.2", "url-loader": "^0.5.8", "webpack": "^2.3.3", "webpack-hot-middleware": "^2.18.0", "webpack-merge": "^4.1.0", "zone.js": "^0.8.5", "font-awesome": "^4.7.0", "ionicons": "^3.0.0", "admin-lte": "^2.3.11" } }

Here is my webpack.config.vendor.js:

const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const merge = require('webpack-merge');

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: /.(jpg|png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' } ] }, entry: { vendor: [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/forms', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/platform-server', 'admin-lte/bootstrap/css/bootstrap.css', 'admin-lte/dist/css/AdminLTE.css', 'admin-lte/dist/css/skins/skin-black.css', 'core-js', 'es6-shim', 'es6-promise', 'event-source-polyfill', 'font-awesome/css/font-awesome.css', 'ionicons/dist/css/ionicons.css', //'jquery', 'zone.js', ] }, 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(\|\/)core(\|\/)@angular/, path.join(__dirname, './ClientApp')), new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100 ] };

const clientBundleConfig = merge(sharedConfig, {
    output: { path: path.join(__dirname, 'wwwroot', 'dist') },
    module: {
        rules: [
            { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) }
        ]
    },
    plugins: [
        extractCSS,
        new webpack.DllPlugin({
            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
            name: '[name]_[hash]'
        })
    ].concat(isDevBuild ? [] : [
        new webpack.optimize.UglifyJsPlugin()
    ])
});

return [clientBundleConfig];

}

Is there a specific browser you're using? Have you tried other browsers?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-332000573, or mute the thread https://github.com/notifications/unsubscribe-auth/AS0dkguaCFwsKK7qHe6RVjoYA9XZXZ97ks5smAt8gaJpZM4Mo5ff .

[cbcolleenb]

Can you send your tsconfig.json and webpack.config.js? Your webpack.config.vendor.js you sent before has some code that is in my webpack.config.js

On Mon, Sep 25, 2017 at 3:24 PM, Colleen cbcolleenb@gmail.com wrote:

ok thanks! I'll look at it and get back tomorrow.

I've been using Chrome primarily but our company still uses IE11. The ngFors are extremely slow in IE11, so that's why I upgraded to Angular4 and better polyfills. I'm hoping this will solve the slowness problem. Did you notice that?

On Mon, Sep 25, 2017 at 3:22 PM, Adam Amrine notifications@github.com wrote:

I'm not sure if this helps, but here is my package.json. I wouldn't copy it verbatim or you'll get stuff you don't need and remove things you do.

{ "name": "appname", "version": "1.0.0", "dependencies": { "@angular/animations": "^4.0.0", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/platform-server": "^4.0.0", "@angular/router": "^4.0.0", "@types/node": "^7.0.12", "angular2-template-loader": "^0.6.2", "aspnet-webpack": "^1.0.17", "awesome-typescript-loader": "^3.0.0", "core-js": "^2.4.1", "css": "^2.2.1", "css-loader": "^0.28.0", "es6-shim": "^0.35.3", "es6-promise": "^4.1.0", "event-source-polyfill": "^0.0.9", "expose-loader": "^0.7.3", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.11.1", "html-loader": "^0.4.5", "json-loader": "^0.5.4", "preboot": "^4.5.2", "raw-loader": "^0.5.1", "rxjs": "^5.3.0", "style-loader": "^0.16.1", "to-string-loader": "^1.1.5", "typescript": "^2.2.2", "url-loader": "^0.5.8", "webpack": "^2.3.3", "webpack-hot-middleware": "^2.18.0", "webpack-merge": "^4.1.0", "zone.js": "^0.8.5", "font-awesome": "^4.7.0", "ionicons": "^3.0.0", "admin-lte": "^2.3.11" } }

Here is my webpack.config.vendor.js:

const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const merge = require('webpack-merge');

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: /.(jpg|png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' } ] }, entry: { vendor: [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/forms', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/platform-server', 'admin-lte/bootstrap/css/bootstrap.css', 'admin-lte/dist/css/AdminLTE.css', 'admin-lte/dist/css/skins/skin-black.css', 'core-js', 'es6-shim', 'es6-promise', 'event-source-polyfill', 'font-awesome/css/font-awesome.css', 'ionicons/dist/css/ionicons.css', //'jquery', 'zone.js', ] }, 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(\|\/)core(\|\/)@angular/, path.join(__dirname, './ClientApp')), new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100 ] };

const clientBundleConfig = merge(sharedConfig, {
    output: { path: path.join(__dirname, 'wwwroot', 'dist') },
    module: {
        rules: [
            { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) }
        ]
    },
    plugins: [
        extractCSS,
        new webpack.DllPlugin({
            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
            name: '[name]_[hash]'
        })
    ].concat(isDevBuild ? [] : [
        new webpack.optimize.UglifyJsPlugin()
    ])
});

return [clientBundleConfig];

}

Is there a specific browser you're using? Have you tried other browsers?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-332000573, or mute the thread https://github.com/notifications/unsubscribe-auth/AS0dkguaCFwsKK7qHe6RVjoYA9XZXZ97ks5smAt8gaJpZM4Mo5ff .

[k-krupka]

after rebuilding vendor, it's worth to restart IIS if working

2017-09-25 23:05 GMT+02:00 Colleen notifications@github.com:

Can you send your tsconfig.json and webpack.config.js? Your webpack.config.vendor.js you sent before has some code that is in my webpack.config.js

On Mon, Sep 25, 2017 at 3:24 PM, Colleen cbcolleenb@gmail.com wrote:

ok thanks! I'll look at it and get back tomorrow.

I've been using Chrome primarily but our company still uses IE11. The ngFors are extremely slow in IE11, so that's why I upgraded to Angular4 and better polyfills. I'm hoping this will solve the slowness problem. Did you notice that?

On Mon, Sep 25, 2017 at 3:22 PM, Adam Amrine notifications@github.com wrote:

I'm not sure if this helps, but here is my package.json. I wouldn't copy it verbatim or you'll get stuff you don't need and remove things you do.

{ "name": "appname", "version": "1.0.0", "dependencies": { "@angular/animations": "^4.0.0", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/platform-server": "^4.0.0", "@angular/router": "^4.0.0", "@types/node": "^7.0.12", "angular2-template-loader": "^0.6.2", "aspnet-webpack": "^1.0.17", "awesome-typescript-loader": "^3.0.0", "core-js": "^2.4.1", "css": "^2.2.1", "css-loader": "^0.28.0", "es6-shim": "^0.35.3", "es6-promise": "^4.1.0", "event-source-polyfill": "^0.0.9", "expose-loader": "^0.7.3", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.11.1", "html-loader": "^0.4.5", "json-loader": "^0.5.4", "preboot": "^4.5.2", "raw-loader": "^0.5.1", "rxjs": "^5.3.0", "style-loader": "^0.16.1", "to-string-loader": "^1.1.5", "typescript": "^2.2.2", "url-loader": "^0.5.8", "webpack": "^2.3.3", "webpack-hot-middleware": "^2.18.0", "webpack-merge": "^4.1.0", "zone.js": "^0.8.5", "font-awesome": "^4.7.0", "ionicons": "^3.0.0", "admin-lte": "^2.3.11" } }

Here is my webpack.config.vendor.js:

const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const merge = require('webpack-merge');

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: /.(jpg|png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' } ] }, entry: { vendor: [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/forms', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/platform-server', 'admin-lte/bootstrap/css/bootstrap.css', 'admin-lte/dist/css/AdminLTE.css', 'admin-lte/dist/css/skins/skin-black.css', 'core-js', 'es6-shim', 'es6-promise', 'event-source-polyfill', 'font-awesome/css/font-awesome.css', 'ionicons/dist/css/ionicons.css', //'jquery', 'zone.js', ] }, 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(\|\/)core(\|\/)@angular/, path.join(__dirname, './ClientApp')), new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100 ] };

const clientBundleConfig = merge(sharedConfig, { output: { path: path.join(dirname, 'wwwroot', 'dist') }, module: { rules: [ { test: /.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) } ] }, plugins: [ extractCSS, new webpack.DllPlugin({ path: path.join(dirname, 'wwwroot', 'dist', '[name]-manifest.json'), name: '[name]_[hash]' }) ].concat(isDevBuild ? [] : [ new webpack.optimize.UglifyJsPlugin() ]) });

return [clientBundleConfig]; }

Is there a specific browser you're using? Have you tried other browsers?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800# issuecomment-332000573, or mute the thread https://github.com/notifications/unsubscribe-auth/ AS0dkguaCFwsKK7qHe6RVjoYA9XZXZ97ks5smAt8gaJpZM4Mo5ff .

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-332012289, or mute the thread https://github.com/notifications/unsubscribe-auth/ATW_NTC_5M0D5L-9Y_3CjtVzz79rThnTks5smBV9gaJpZM4Mo5ff .

[cbcolleenb]

Hi Adam, I tried to match as much as possible and still get the error below.. is it possible to send me your tsconfig.json, webpack.config.js, boot-client.ts and boot-server.ts? thanks, Colleen

TypeError: n.replace is not a function at Ie (vendor.js?v=VR6o4twlFeL2-3FmU0tcayQhCR53UZjDReSWrNOnoB0:453) at vendor.js?v=VR6o4twlFeL2-3FmU0tcayQhCR53UZjDReSWrNOnoB0:551 at Array.map () at t.normalizeStylesheet (vendor.js?v=VR6o4twlFeL2-3FmU0tcayQhCR53UZjDReSWrNOnoB0:551) at t.normalizeLoadedTemplate (vendor.js?v=VR6o4twlFeL2-3FmU0tcayQhCR53UZjDReSWrNOnoB0:551) at vendor.js?v=VR6o4twlFeL2-3FmU0tcayQhCR53UZjDReSWrNOnoB0:551 at Object.then (vendor.js?v=VR6o4twlFeL2-3FmU0tcayQhCR53UZjDReSWrNOnoB0:523) at t.normalizeTemplateOnly (vendor.js?v=VR6o4twlFeL2-3FmU0tcayQhCR53UZjDReSWrNOnoB0:551) at t.normalizeTemplate (vendor.js?v=VR6o4twlFeL2-3FmU0tcayQhCR53UZjDReSWrNOnoB0:551) at t.loadDirectiveMetadata

On Mon, Sep 25, 2017 at 3:22 PM, Adam Amrine notifications@github.com wrote:

I'm not sure if this helps, but here is my package.json. I wouldn't copy it verbatim or you'll get stuff you don't need and remove things you do.

{ "name": "appname", "version": "1.0.0", "dependencies": { "@angular/animations": "^4.0.0", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/platform-server": "^4.0.0", "@angular/router": "^4.0.0", "@types/node": "^7.0.12", "angular2-template-loader": "^0.6.2", "aspnet-webpack": "^1.0.17", "awesome-typescript-loader": "^3.0.0", "core-js": "^2.4.1", "css": "^2.2.1", "css-loader": "^0.28.0", "es6-shim": "^0.35.3", "es6-promise": "^4.1.0", "event-source-polyfill": "^0.0.9", "expose-loader": "^0.7.3", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.11.1", "html-loader": "^0.4.5", "json-loader": "^0.5.4", "preboot": "^4.5.2", "raw-loader": "^0.5.1", "rxjs": "^5.3.0", "style-loader": "^0.16.1", "to-string-loader": "^1.1.5", "typescript": "^2.2.2", "url-loader": "^0.5.8", "webpack": "^2.3.3", "webpack-hot-middleware": "^2.18.0", "webpack-merge": "^4.1.0", "zone.js": "^0.8.5", "font-awesome": "^4.7.0", "ionicons": "^3.0.0", "admin-lte": "^2.3.11" } }

Here is my webpack.config.vendor.js:

const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const merge = require('webpack-merge');

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: /.(jpg|png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' } ] }, entry: { vendor: [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/forms', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/platform-server', 'admin-lte/bootstrap/css/bootstrap.css', 'admin-lte/dist/css/AdminLTE.css', 'admin-lte/dist/css/skins/skin-black.css', 'core-js', 'es6-shim', 'es6-promise', 'event-source-polyfill', 'font-awesome/css/font-awesome.css', 'ionicons/dist/css/ionicons.css', //'jquery', 'zone.js', ] }, 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(\|\/)core(\|\/)@angular/, path.join(__dirname, './ClientApp')), new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100 ] };

const clientBundleConfig = merge(sharedConfig, {
    output: { path: path.join(__dirname, 'wwwroot', 'dist') },
    module: {
        rules: [
            { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) }
        ]
    },
    plugins: [
        extractCSS,
        new webpack.DllPlugin({
            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
            name: '[name]_[hash]'
        })
    ].concat(isDevBuild ? [] : [
        new webpack.optimize.UglifyJsPlugin()
    ])
});

return [clientBundleConfig];

}

Is there a specific browser you're using? Have you tried other browsers?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-332000573, or mute the thread https://github.com/notifications/unsubscribe-auth/AS0dkguaCFwsKK7qHe6RVjoYA9XZXZ97ks5smAt8gaJpZM4Mo5ff .

[AmrineA]

tsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipDefaultLibCheck": true,
    "lib": [ "es6", "dom" ],
    "types": [ "node" ]
  },
  "exclude": [ "bin", "node_modules" ],
  "atom": { "rewriteTsconfig": false }
}

boot-client.ts

import './polyfills/polyfills.ts';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const rootElemTagName = 'app'; // Update this if you change your root component selector

// Enable either Hot Module Reloading or production mode
if (module['hot']) {
    module['hot'].accept();
    module['hot'].dispose(() => {
        // Before restarting the app, we create a new root element and dispose the old one
        const oldRootElem = document.querySelector(rootElemTagName);
        const newRootElem = document.createElement(rootElemTagName);
        oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem);
        platform.destroy();
    });
} else {
    enableProdMode();
}

// Boot the application, either now or when the DOM content is loaded
const platform = platformBrowserDynamic();

const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
    bootApplication();
} else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
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: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: ['to-string-loader', 'css-loader'] },
                { 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-client.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()
            ])
    });

    return [clientBundleConfig];
};

We don't have a boot-server.ts because we removed server side rendering. You may also notice that some of these files have the pieces removed from them that are required for server side rendering. You should be able to disable SSR to see if that is part of the issue.

[cbcolleenb]

thanks.. is awesome-typescript-loader part of npm or your own library? can i use ts-loader instead?

On Tue, Sep 26, 2017 at 10:53 AM, Adam Amrine notifications@github.com wrote:

tsconfig.json:

{ "compilerOptions": { "moduleResolution": "node", "target": "es5", "sourceMap": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipDefaultLibCheck": true, "lib": [ "es6", "dom" ], "types": [ "node" ] }, "exclude": [ "bin", "node_modules" ], "atom": { "rewriteTsconfig": false } }

boot-client.ts

import './polyfills/polyfills.ts'; import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; const rootElemTagName = 'app'; // Update this if you change your root component selector

// Enable either Hot Module Reloading or production mode if (module['hot']) { module['hot'].accept(); module['hot'].dispose(() => { // Before restarting the app, we create a new root element and dispose the old one const oldRootElem = document.querySelector(rootElemTagName); const newRootElem = document.createElement(rootElemTagName); oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem); platform.destroy(); }); } else { enableProdMode(); }

// Boot the application, either now or when the DOM content is loaded const platform = platformBrowserDynamic();

const bootApplication = () => { platform.bootstrapModule(AppModule); }; if (document.readyState === 'complete') { bootApplication(); } else { document.addEventListener('DOMContentLoaded', bootApplication); }

webpack.config.js

const path = require('path'); const webpack = require('webpack'); const merge = require('webpack-merge'); 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: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] }, { test: /.html$/, use: 'html-loader?minimize=false' }, { test: /.css$/, use: ['to-string-loader', 'css-loader'] }, { 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-client.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()
        ])
});

return [clientBundleConfig];

};

We don't have a boot-server.ts because we removed server side rendering. You may also notice that some of these files have the pieces removed from them that are required for server side rendering. You should be able to disable SSR to see if that is part of the issue.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-332244164, or mute the thread https://github.com/notifications/unsubscribe-auth/AS0dkjr6LEADfmgQcu86yJ9Oywc02Luoks5smR3qgaJpZM4Mo5ff .

[AmrineA]

It would have come from npm. I'm not sure if ts-loader will work. That is what it was using when I pulled down the sample app and I didn't change it.

On Tue, Sep 26, 2017 at 12:11 PM, Colleen notifications@github.com wrote:

thanks.. is awesome-typescript-loader part of npm or your own library? can i use ts-loader instead?

On Tue, Sep 26, 2017 at 10:53 AM, Adam Amrine notifications@github.com wrote:

tsconfig.json:

{ "compilerOptions": { "moduleResolution": "node", "target": "es5", "sourceMap": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipDefaultLibCheck": true, "lib": [ "es6", "dom" ], "types": [ "node" ] }, "exclude": [ "bin", "node_modules" ], "atom": { "rewriteTsconfig": false } }

boot-client.ts

import './polyfills/polyfills.ts'; import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser- dynamic'; import { AppModule } from './app/app.module'; const rootElemTagName = 'app'; // Update this if you change your root component selector

// Enable either Hot Module Reloading or production mode if (module['hot']) { module['hot'].accept(); module['hot'].dispose(() => { // Before restarting the app, we create a new root element and dispose the old one const oldRootElem = document.querySelector(rootElemTagName); const newRootElem = document.createElement(rootElemTagName); oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem); platform.destroy(); }); } else { enableProdMode(); }

// Boot the application, either now or when the DOM content is loaded const platform = platformBrowserDynamic();

const bootApplication = () => { platform.bootstrapModule(AppModule); }; if (document.readyState === 'complete') { bootApplication(); } else { document.addEventListener('DOMContentLoaded', bootApplication); }

webpack.config.js

const path = require('path'); const webpack = require('webpack'); const merge = require('webpack-merge'); 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: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] }, { test: /.html$/, use: 'html-loader?minimize=false' }, { test: /.css$/, use: ['to-string-loader', 'css-loader'] }, { 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-client.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() ]) });

return [clientBundleConfig]; };

We don't have a boot-server.ts because we removed server side rendering. You may also notice that some of these files have the pieces removed from them that are required for server side rendering. You should be able to disable SSR to see if that is part of the issue.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800# issuecomment-332244164, or mute the thread https://github.com/notifications/unsubscribe-auth/ AS0dkjr6LEADfmgQcu86yJ9Oywc02Luoks5smR3qgaJpZM4Mo5ff

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-332248895, or mute the thread https://github.com/notifications/unsubscribe-auth/AGDtPfkIrBB2V417J3usbG9axzWXHUQrks5smSEigaJpZM4Mo5ff .

[cbcolleenb]

Thank you so much for your help.. it worked after I got rid of the server-side rendering code... it hangs up locally, but it works on our dev server after publish. thanks, Colleen

On Tue, Sep 26, 2017 at 12:30 PM, Adam Amrine notifications@github.com wrote:

It would have come from npm. I'm not sure if ts-loader will work. That is what it was using when I pulled down the sample app and I didn't change it.

On Tue, Sep 26, 2017 at 12:11 PM, Colleen notifications@github.com wrote:

thanks.. is awesome-typescript-loader part of npm or your own library? can i use ts-loader instead?

On Tue, Sep 26, 2017 at 10:53 AM, Adam Amrine notifications@github.com wrote:

tsconfig.json:

{ "compilerOptions": { "moduleResolution": "node", "target": "es5", "sourceMap": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipDefaultLibCheck": true, "lib": [ "es6", "dom" ], "types": [ "node" ] }, "exclude": [ "bin", "node_modules" ], "atom": { "rewriteTsconfig": false } }

boot-client.ts

import './polyfills/polyfills.ts'; import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser- dynamic'; import { AppModule } from './app/app.module'; const rootElemTagName = 'app'; // Update this if you change your root component selector

// Enable either Hot Module Reloading or production mode if (module['hot']) { module['hot'].accept(); module['hot'].dispose(() => { // Before restarting the app, we create a new root element and dispose the old one const oldRootElem = document.querySelector(rootElemTagName); const newRootElem = document.createElement(rootElemTagName); oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem); platform.destroy(); }); } else { enableProdMode(); }

// Boot the application, either now or when the DOM content is loaded const platform = platformBrowserDynamic();

const bootApplication = () => { platform.bootstrapModule(AppModule); }; if (document.readyState === 'complete') { bootApplication(); } else { document.addEventListener('DOMContentLoaded', bootApplication); }

webpack.config.js

const path = require('path'); const webpack = require('webpack'); const merge = require('webpack-merge'); 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: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] }, { test: /.html$/, use: 'html-loader?minimize=false' }, { test: /.css$/, use: ['to-string-loader', 'css-loader'] }, { 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-client.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() ]) });

return [clientBundleConfig]; };

We don't have a boot-server.ts because we removed server side rendering. You may also notice that some of these files have the pieces removed from them that are required for server side rendering. You should be able to disable SSR to see if that is part of the issue.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800# issuecomment-332244164, or mute the thread https://github.com/notifications/unsubscribe-auth/ AS0dkjr6LEADfmgQcu86yJ9Oywc02Luoks5smR3qgaJpZM4Mo5ff

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800# issuecomment-332248895, or mute the thread https://github.com/notifications/unsubscribe-auth/ AGDtPfkIrBB2V417J3usbG9axzWXHUQrks5smSEigaJpZM4Mo5ff

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/JavaScriptServices/issues/800#issuecomment-332274439, or mute the thread https://github.com/notifications/unsubscribe-auth/AS0dkg7QqzesA5Da5ATbpKiRT-vUeTJeks5smTSxgaJpZM4Mo5ff .