Javascriptservices: 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

[MarkPieszak]

Still a few things to work out in the integration, but here's what I have so far with .NET and Angular 4. I've started work in this repo (https://github.com/MarkPieszak/aspnetcore-angular2-universal) for now, but imagine it'll get into here soon enough

[ghost]

Wow! Thanks @MarkPieszak Wrongly assumed it was essentially a package update, with v2 to v4 meant to be basically non breaking

[MarkPieszak]

Yeah it's quite a bit more, also starting the process differently (now in the Controller) so that we can give .NET the other essential SEO data.

Of course, if you don't care about server rendering, you can just shut it off and update to 4.0 real easily :)

[peterdobson]

Fantastic! Just had to change the port number in fetchdata.components.ts from http://localhost:5000/api/test/users to http://localhost:1780/api/test/users to get the fetch-data sample working.

[MarkPieszak]

Yes so that eventually that'll be set dynamically from the server wth DI, going into Angular, just one of the improvements needed!
URLs must be absolute on the server, previously we patched them for you in Universal.

[skorunka]

After upgrading to Ang4 i get this error hile runnign webpack on webpack.config file:

ERROR in [at-loader] ./node_modules/angular2-universal/node_modules/angular2-platform-node/node-platform.d.ts:1:10
    TS2305: Module '"C:/Projects/EYC/Solutions/Anticipate/src/Eyc.Solutions.Anticipate.Ui.Web.2/node_modules/@angular/platform-browser/platform-browser"' has no exported member 'AnimationDriver'.

Any idea? Than kyou.

[MarkPieszak]

You actually can't just update the current project here to Angular4 my apologies. It takes re shifting and removing a lot a lot of things, pull down that branch I pointed to @skorunka and try to port your app to it.

Honestly though I'd suggest waiting a little bit until it's more cleaned up!

[skorunka]

@MarkPieszak No worries, I understand. Thank you for advice, i will give it a try.

[seven1986]

AOT

@starquake , sorry.
AOT = ahead-of-time https://angular.cn/docs/ts/latest/guide/glossary.html
We all expect officially asp net core angular upgrade to 4.0!

[starquake]

@seven1986 I'm sorry, what does 'AOT' mean?

[mounthorse-slns]

@MarkPieszak Will you let us know here when you've done?

[ns8482e]

@MarkPieszak For angular 4 branch you pointed is still using es6-shim. Is there any plan to update it to core-js?

[MarkPieszak]

Sure, I'll ping everyone when it's all finished. @bm-software
Yes there's a lot that needs to be updated along with core-js, such as AoT etc.

For now that branch is bare bones but sometime in the next few days I'm hoping I can find a good bunch of hours where I can focus on it and get it into Masters with everyone fixed up in it.

[skorunka]

@MarkPieszak You are our hero!

[ghost]

@starquake , Ahead of time compilation. I'm a noob, but essentially precompiling the entire angular app before even hosting on a server. It increases performance since the angular compiler no longer needs to render the templates. It also offers a feature called tree-shaking that reduces the size of bundles since the UI is rendered during compilation and things not used are not included.

[zihotki]

@MarkPieszak do you plan to include angular-cli into the template? If so, are you going to use AoT and other functionality from angular-cli? I'm asking because angular2 template had some custom functionality which is now supported by official angular-cli

[MarkPieszak]

The problem is that because we are trying to do server side pre-rendering, this breaks away from the use-case of the CLI. The CLI is helpful if you just want a normal client side application and your Rest API is a separate all together entity. Here, the goal is to unify them and .NET be aware of the application as well as aid in serializing it to a string (thus giving us the Prerender ability, since that's only available through Node, and Steve created an incredibly easy way to invoke node within .net core)

AoT will definitely be a part of the template as well, I haven't talked with @SteveSandersonMS yet about the plans for having it here as well, but once I clean a few things up i could make a PR to include it Steve?

At the end of the day the only thing we'll be missing compared to the CLI is the generators, but you could write those in just about any scripting language, even something as easy as Gulp if you wanted to write one.

[mounthorse-slns]

I'm trying to rapidly update my vs2015 project to use it with vs2017 but I'm getting the following errors:

Is there a quick fix for that? The project structure is the default one with ClientApp folder inside the project root folder

[zihotki]

For me actually the most missing feature in JSS is ability to use generators. It's possible to quickly create some custom generators but they will need to be updated to reflect changes in cli, etc. So if it's possible to reuse at least generators parts that would be great even if we will miss such things like 'ng serve'.

[AndeyR]

Any updates ?

[MarkPieszak]

It's all in here at the moment, I'm working on AoT in a different branch but having some strange issues (might be ngtools related).

It has dev & regular prod builds though, and most other things all work now. You could take it and just drop your /app folder in, don't delete the existing /app folder, as you need browser- & server-app.module files.

Hopefully have even more done today/tomorrow as ngConf starts tomorrow. @AndeyR

[AndeyR]

@MarkPieszak Thank you )

[cspaniard]

@MarkPieszak great news!!!

Starting a new project soon and I can´t wait to use the new templates for Angular 4

TIA,
David

[skorunka]

@MarkPieszak Hi, could you please be more specific on how to migrate the previous version into this new one? For example, I don't know what to do with "webpack.config.vendor.js". Thank you.

[MarkPieszak]

I'll have to add those (or some variation of them) back in, I was just keeping things simpler as I was trying to update everything. Getting some small issues with AoT. Takes time to get all this in there & working perfectly.

Honestly I'd wait a little bit unless you want to experience some growing pains as it evolves. Still trying to get a few things working, thankfully there's a few contributors helping with things here and there as well. There's a lot to figure out.

[skorunka]

@MarkPieszak I see, I will wait with the upgrade until it is done. Thank you.

[skorunka]

@MarkPieszak In which branch you guys are working? Master or ng4 or angular4.0-NEW-wip?

[MarkPieszak]

I just _deleted_ those 2 branches (and any other stale/old ones), Master has the latest right now.
It has a build build you can run normally, AoT build as well for when you publish or push to Azure.

Some important things left to finish, and I'd say it's good to go (at least for now) are:

• [ ] I still need to tweak & fix the aspnetcore-engine so that it uses that (instead of a temporary one inside the project)
• [ ] Add back vendor code-splitting etc
• [ ] See any other optimizations that could be made in webpack AoT prod build
• [ ] Fix bootstrap-sass icon errors happening on the browser

[skorunka]

Does AoT in your context mean Ahead of Time?

[MarkPieszak]

Yes :)

[skorunka]

Alright, was not sure ;) BTW After upgrading to VS2017, for some reason, if we make any change in TS, it get compiled(that's what browser log says) but the change is not propagated to the browser. It only happens with a TY files, if we change a Angular HTML template, all works fine. Dont you have any clue on that? ta

PS: what helps is a full VS build

[swaner]

@skorunka You have to add TypeScriptCompileBlocked=true to .csproj in order to stop VS to compiling .ts files:
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

More info:
http://stackoverflow.com/questions/40667665/how-to-prevent-visual-studio-2017-from-build-javascript

[MarkPieszak]

@skorunka Strange I have that (ts block tag) in the Repo, guessing you're talking about converting/upgrading your own project to 2017

[skorunka]

@swaner That helped!
@MarkPieszak Im still using Angular2 version.

[skorunka]

@MarkPieszak Hi Mark, how does it look with ng4 update? Thank you.

[MarkPieszak]

It's actually going fairly well, vendor splitting should be added sometime the next few days, I'm adding TransferData back in later tonight, which helps set the window object with things you want transferred.

You should be able to start using / playing around with it safely very soon 🎈
You could try now if you wanted to get more familiar with it, be great to have some more feedback or help from the community 🎁
Sorry for any delay its been a very busy past few weeks!

[skorunka]

@MarkPieszak Cool! Good to hear it is going pretty well. i can not wait to upgrade to ng4 and have all the sweets in one place. I would love to contribute, but my webpack/angular knowledge is still very limited. Thank you for your hard work and keep going! Good job.

[tanwarsatya]

@MarkPieszak very much appreciate all the good work towards ng4.

[stalek71]

Hello @MarkPieszak
could you add some working test case also (unit test file) to use as a starting point for our own unit tests? The current one config I use (for Ang 2.4 yet so in "old" template) doesn't work. When I run Karma then Webpack claims it doesn't know Set, Map and similar definitions. It looks like an issue with a compilation against ES5 (missign ES6 libs or polyfills ???) The app starts without any problems of course (and publishing it through WebPack doesn't show any problems during building/boundling also). Maybe I just do something wrong way?

[cspaniard]

@MarkPieszak Great to hear things are going well..

No pressure, but any updates on this issue... ? We are about to start a new project and it would be great to have this...

TIA,
David

[MarkPieszak]

I mean everything is basically working, you could start using it and building your app, any updates that come from now on won't be touching the Client or Server folders, they will be build system (webpack etc) updates, so you could just as easily pull down latest, and port your app over (or follow commits)to get the latest bundling updates / chunking updates etc. I need to fix these and add DLL chunking to improve build performance and HMR speed.

Maybe wait a few days so I can get the vendor chunking / CSS extraction / any other things like that out of the way. Otherwise you could always use get going and fix up webpack however you'd like!

• All SEO and HttpTransfer (server -> client) is finished.
• Title, meta even link (canonical, hreflang, etc) are finished.
• You have your separate Browser and Server NgModules. App.module is where you'll import almost everything.
• HttpTransfer is included and functioning, you use it when you want an http call to not get re-ran during the client render. (No flicker this way, only use it for important GETs)
• At the moment there is still redundant main.server and main.server.aot files, but once a PR goes into ngtools/webpack, it'll handle the AoT one automatically.
• There are things documented in HomeController that you can see how the server rendering gets started, and also how we are transferring things.
• We have ORIGIN_URL and REQUEST tokens now. (Remember the server doesn't know relative paths anymore). You can't just don't http.get('/API/whatever') so ORIGIN_URL is there to inject and use for when you have your API in the same project (such as these repos)

Plenty of other things

• I'm waiting to merge and publish to npm the ng-aspnetcore-engine into Universal (https://github.com/angular/universal/pull/682) which will replace the temp one find inside the project)

You can see a Readme here on how everything works now:
https://github.com/MarkPieszak/universal/blob/54dec51f09fa0f13743fe92bd822866fff1267e1/modules/aspnetcore-engine/README.md
I'm sure I'll be updating it more soon as well.

@SteveSandersonMS maybe you have some time this week, and we can go over everything together, see if there's any other way from the .NET side we could improve the developer experience here? I'll shoot you an email.

[cspaniard]

Hi @MarkPieszak

Great, great news... and wonderful explanation...

Thank you so much for your great work...

[skorunka]

@MarkPieszak Hi Mark, it seems https://github.com/angular/universal/pull/682 was merged, do you plan to update the code accordingly? We are struggling with HMR rebuild speed at the moment, it takes 20 sec, do you think the above might help?

[danobri]

@MarkPieszak - I'm guessing you are aware, but Angular 4.1.0 is out now as well - http://angularjs.blogspot.com/2017/04/angular-410-now-available.html

Any status updates? Thanks for all your work on the project!

[paddyza]

Hi @MarkPieszak. Do you perhaps have an ETA for when your changes will be merged? Thanks!

[binoypatel]

Knowing ETA is super important for planing the production, please share your roadmap,

many thanks,

[lee-alderdice]

Finding this thread is a life saver. Thanks so much all, been tearing my hair out for the past 3 hours trying to upgrade the template. Being an Angular noob wasn't helping either.

[SteveSandersonMS]

It's great to see this discussion and especially @MarkPieszak's progress with the update. Hopefully this is something we can proceed with pretty soon.

I think the most stable way for us to proceed with the changes is incrementally. Rather than making a massive set of dramatic changes all at once (e.g., all the stuff in @MarkPieszak's repo), I'd like to start with the minimal set of changes needed to make Angular 4 work correctly on both server and client, without necessarily adding new features such as the SEO stuff or AoT compilation. Then, we can add the new functionality piecemeal. In the meantime, people can get on with updating their existing apps to Angular 4 without having to wait for every last detail about how the new stuff will work. Hope that sounds OK to everyone!

I'm about to post a pull request that includes what I think is a minimal set of changes needed for Angular 4. Hopefully I'll also be able to put a prerelease version of generator-aspnetcore-spa onto NPM so that people can easily try it out without having to build the repo from sources.

[JohnGalt1717]

THAT WOULD BE FANTASTIC! Thank you!

[dennyio]

Thanks!

[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 [e-mail]
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 [e-mail] 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 [e-mail]
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 [e-mail]
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 [e-mail]
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 [e-mail] 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 >
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
issuecomment-331992706>,
or mute the thread
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 [e-mail]
wrote:

Have you rebuilt your vendor.js file recently?

On Mon, Sep 25, 2017 at 4:02 PM, Colleen [e-mail] 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 <
[email protected]
>
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
issuecomment-331992706>,
or mute the thread
AS0dkp0FMEwP5ZmDp51bMWAiPEoGGUkzks5smARPgaJpZM4Mo5ff>

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
issuecomment-331995634>,
or mute the thread
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 [e-mail] 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 [e-mail]
wrote:

Have you rebuilt your vendor.js file recently?

On Mon, Sep 25, 2017 at 4:02 PM, Colleen [e-mail]
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 <
[email protected]
>
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
issuecomment-331992706>,
or mute the thread
AS0dkp0FMEwP5ZmDp51bMWAiPEoGGUkzks5smARPgaJpZM4Mo5ff>

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
issuecomment-331995634>,
or mute the thread
AGDtPf8TvDoRhEX64XEb3ZaTJoxz_9nmks5smAbrgaJpZM4Mo5ff>

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
issuecomment-331996501>,
or mute the thread
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 [e-mail]
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 [e-mail] 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 [e-mail]
wrote:

Have you rebuilt your vendor.js file recently?

On Mon, Sep 25, 2017 at 4:02 PM, Colleen [e-mail]
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 <
[email protected]
>
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
issuecomment-331992706>,
or mute the thread
AS0dkp0FMEwP5ZmDp51bMWAiPEoGGUkzks5smARPgaJpZM4Mo5ff>

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
issuecomment-331995634>,
or mute the thread
AGDtPf8TvDoRhEX64XEb3ZaTJoxz_9nmks5smAbrgaJpZM4Mo5ff>

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
issuecomment-331996501>,
or mute the thread
AS0dkuICvkAcWJ2mfEjgjQJhAV2lpputks5smAesgaJpZM4Mo5ff>
.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
issuecomment-331997165>,
or mute the thread
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 [e-mail]
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 [e-mail] 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 [e-mail]
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
.

[xagon]

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

2017-09-25 23:05 GMT+02:00 Colleen [e-mail]:

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 [e-mail] 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 [e-mail]
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
issuecomment-332000573>,
or mute the thread
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 [e-mail]
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 [e-mail]
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 [e-mail] 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 [e-mail]
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
issuecomment-332244164>,
or mute the thread
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 [e-mail]
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 [e-mail]
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 [e-mail]
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
issuecomment-332244164>,
or mute the thread
AS0dkjr6LEADfmgQcu86yJ9Oywc02Luoks5smR3qgaJpZM4Mo5ff>

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
issuecomment-332248895>,
or mute the thread
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
.