Closed sipi41 closed 6 years ago
Belka383
commented
6 years ago @sipi41 Good afternoon! Do not worry, everyone faced such problems! Do not let go of your hands. Let's start in order. Do you get to run the original project with the Angular template without making any changes?
sipi41
commented
6 years ago Thanks Belka383 for your prompt answer. These are the steps I made:
The problem is that the project > dependencies > npm show we are using version 4.2.5, and we should update to 5, right? after hours here, the only thing that seems to work is a guide at https://www.codeproject.com/Articles/1221503/Angular-and-NET-Core-with-Visual-Studio but my question is... is this the proper way to do it? as it perform so many changes to config files in order to make it work...
Also, after follow the update guide, this is the result after running ncu -u twice:
this means that I have successfully updated all my npm packages to the latest version, right?, is this enough? because when I come to the solution explorer and check dependencies >> npm >> what I see is this:
it seems like it updated to the latest version but shows 4.2.5... please help!
is there a way for you to record the right steps in a video or a guide, using the latest VS version? a brief explanation on the proper commands to use would be ideal, at least for newbies like me... :-) Thank you!
Belka383
commented
6 years ago That's where you're wrong: step 2 - Installed the latest version of Node.js 9.x. Required version NodeJS 6.9.0. Read the book carefully: page 24.
Good luck!
sipi41
commented
6 years ago You did start really good, but ended really bad!... good luck? I uninstalled the latest version and tried to download the version you recommend, this is what I have:
now what? a black screen with a command prompt? no installer at all... what to do with that? if you are recommending a version you should explain how to... instead of "good luck"... I will need that if I can make your examples work! need real help here, please.
Belka383
commented
6 years ago @sipi41 I do not understand the reason for your aggression. A good programmer will try to look for solutions on the Internet, rather than crying at forums and all the more in the author's repository.
To make you feel ashamed, I will record you the video on the first part of "Getting Ready". I'll post it a little later
sipi41
commented
6 years ago aggression? crying? your mama is crying! very disrespectful! first you should work with the latest versions as soon as possible, second, I did ask you if the URL I provided was a possible solution... was it?
I think maybe is not the right time to study version 5... everybody on the "forums" talk about v4... this is the first book I see trying to deal with v5... probably is better to wait a little longer.
Belka383
commented
6 years ago @sipi41 1) step: make sure that the following tools are installed
2) create a project:
3) close project
4) open "package.json" file
5) paste:
{
"name": "MyApp",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"dependencies": {
"@angular/animations": "5.0.2",
"@angular/common": "5.0.2",
"@angular/compiler": "5.0.2",
"@angular/compiler-cli": "5.0.2",
"@angular/core": "5.0.2",
"@angular/forms": "5.0.2",
"@angular/http": "5.0.2",
"@angular/platform-browser": "5.0.2",
"@angular/platform-browser-dynamic": "5.0.2",
"@angular/platform-server": "5.0.2",
"@angular/router": "5.0.2",
"@ngtools/webpack": "1.8.2",
"@types/webpack-env": "1.13.2",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "3.0.1",
"aspnet-webpack": "2.0.1",
"awesome-typescript-loader": "3.4.0",
"bootstrap": "3.3.7",
"bootswatch": "3.3.7",
"css": "2.2.1",
"css-loader": "0.28.7",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "1.1.5",
"html-loader": "0.5.1",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.7",
"preboot": "5.1.7",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.5.2",
"style-loader": "0.19.0",
"to-string-loader": "1.1.5",
"typescript": "2.4.2",
"url-loader": "0.6.2",
"webpack": "2.6.1",
"webpack-hot-middleware": "2.20.0",
"webpack-merge": "4.1.1",
"zone.js": "0.8.12"}, "devDependencies": {
"@types/chai": "4.0.1",
"@types/jasmine": "2.5.53",
"chai": "4.0.2",
"jasmine-core": "2.6.4",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3"}
}
!!! name = your name progect
6) open "tsconfig.json" file
7) paste:
{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipDefaultLibCheck": true,
"skipLibCheck": true,
"strict": true,
"lib": [ "es6", "dom" ],
"types": [ "webpack-env" ]
},
"exclude": [ "bin", "node_modules" ],
"atom": { "rewriteTsconfig": false },
"angularCompilerOptions": {
"strictMetadataEmit": true
}
}
8) insert files into the root "update-npm.bat", "update-webpack.bat"
9) run "update-npm.bat" file
10) Updating the webpack.config.js file:
10.1 const AotPlugin = require('@ngtools/webpack').AngularCompilerPlugin; book page 47
10.2 [...]
module: {
rules: [
{ test: /(?:.ngfactory.js|.ngstyle.js|.ts)$/, [...] book page 47
11) Patching the webpack.config.vendor.js file: book page 48
new webpack.ContextReplacementPlugin(/\@angular(\|\/)core(\|\/)esm5/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/20357
12) run "update-webpack.bat" file
13) open your progect in VS
14) run
15) Use and study with pleasure
16) Good luck!
greg-bowie
commented
6 years ago Hi,
Not sure if this issue is still open for comment or not. Thanks for all the efforts @Belka383 but I'm afraid even after following the steps above I'm getting an error when running the app:
I can confirm that Node version is 6.9.0:
.NET Core version is 2.1.3:
I copy and pasted your package.json file, but image below in case something is obviously missing:
My tsconfig.json file looks as follows:
I've run npm update at this stage.
My webpack.config.js looks as follows (relevant changes):
And my webpack.config.vendor.js looks as follows (relevant changes):
I've then run the 'node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js' command, as per the book Page 49.
Any suggestions at this stage?
Many thanks, Greg
Belka383
commented
6 years ago Colleagues, I noticed that for some reason the main-server.js file ceased to be generated
Belka383
commented
6 years ago Previously, this file was generated after the update webpack
greg-bowie
commented
6 years ago Thanks @Belka383 - where would that file reside in the project files?
Belka383
commented
6 years ago @greg-bowie \ClientApp\dist
greg-bowie
commented
6 years ago @Belka383 Thanks again. I have checked my folder, and I do have a main-server.js file. It was generated about the time I last did a build?
sipi41
commented
6 years ago I think the best idea here is not to try to patch all this mess... I think somebody at MS or anybody who is completely aware of the topic, should create a template that works from 0... I see you trying to do this, and see other people trying to do something totally different (ex: https://www.codeproject.com/Articles/1221503/Angular-and-NET-Core-with-Visual-Studio) and I sincerely don't know who is right...
I think this approach is a failure because:
Thanks @Belka383 anyway.
Belka383
commented
6 years ago @sipi41 About the command line - you need to install one and the assembly in accordance with the bit depth:
Darkseal
commented
6 years ago Hello @sipi41 and @Belka383,
I'll do my best to address all your questions:
@sipi41 : I can personally guarrantee that the code is working with any version of Angular, NodeJS and ASP.NET Core available today, but you have to perform some minor tweaks required by the (seldomly) breaking changes that these frameworks unavoidably bring. You can't really expect to update everything and hope that everything will work without being aware of what you're updating and what the new stuff will bring: such kind of "hassle-free" update is for operating systems and security patches, not for development frameworks where new versions will often bring more features and breaking changes. I wrote an entire book paragraph about such topic (Chapter 1: Disclaimer-Do (not) try this at home) which I strongly suggest you to read.
If you really do consider yourself a "newbie" (like you said above) and/or don't want to perform these tweaks, you should really stick to the versions/builds given by the book: that has nothing to do with "being afraid" of updates, it just means that you still have to practice the basics before being able to adjust your code with the various changelogs. There is nothing wrong with it and it doesn't mean you will have to stick to the old versions forever... Just enjoy the learning phase and don't rush it.
All that said, if I were you, I would do the following:
1) Install NodeJS 6.9.0 (the assembly that match your CPU)
2) Get the updated GitHub project and save it to your Hard Drive
3) Open the TestMakerFreeWebApp_UpdatedProject.sln file
4) Execute the npm-update.bat and update-webpack.bat file
5) Launch the project in debug mode and see what happens
It takes 2 minutes total and it will clearly show if the code is working or not. If it does, you'll have the chance carefully compare the working project (from GitHub) with yours and pinpoint the difference. If it doesn't, we will gladly help you to get it running, because I just did that and it definitely works.
@Belka383 : the ClientApp/dist/main-server.js file is generated whenever you run the project in debug mode or publish your project anywhere, as per the following .csproj file settings:
[...]
<Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('wwwroot\dist') ">
[...]
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" />
<Exec Command="node node_modules/webpack/bin/webpack.js" />
</Target>
[...]
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec Command="npm install" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
[...]You can also generate it at any time with the following commands from the project root:
node node_modules/webpack/bin/webpack.js
node node_modules/webpack/bin/webpack.js --env.prodHowever, they are mostly useless for the time being since we had to drop SSR (as per issue #9 ).
greg-bowie
commented
6 years ago @Darkseal Thanks for the updates. I followed Steps 1-5 have managed to get the page to load (albeit with commenting out the SeedData call (line 37, Program.cs)).
Started to look through the differences between packages.json, tsconfig.json and the webpack.config.js / vendor.js - unfortunately they're fairly considerably, and indeed some of the files don't have any of the changes mentioned to implement in the book. Copying the new file contents across from the working project doesn't rectify the situation - but I feel like its probably worth creating it from scratch (again!) and implementing the text from the 'working' project at the appropriate stage. I'll do this tomorrow and report back.
greg-bowie
commented
6 years ago Decided to give it a shout tonight. Creating the project from scratch, copying and pasting file content from packages.json, tsconfig.json, webpack.config.js and webpack.config.vendor.js - copying and pasting the batch update utilities and running those from the command line.
Hitting F5 and the following error message is displayed:
Is anyone able to create the project, in a running state, as its meant to be at the end of Chapter 1 of the book? The 'UpdatedProject' downloaded earlier appears significantly different and contains a lot more functionality that I'd expect for the end of Chapter 1.
sipi41
commented
6 years ago as I said in my previous messages, I did create one following the steps in https://www.codeproject.com/Articles/1221503/Angular-and-NET-Core-with-Visual-Studio
Darkseal
commented
6 years ago @greg-bowie and @sipi41, I just did the following:
TestMakerFreeWebApp_Chapter_01_Part02 as Startup Projectnpm-update.bat and update-webpack.batfileYou can see the results in the attached screenshots. I just made these (10 Jan 2018, 23:09 CET) and they are legit.
If you get any "Internal Server Error", please try disabling SSR as explained in Issue #9 (or just hit F5 since SSR gets disabled on reload) and you'll be set [update: I eventually removed SSR from GitHub view files to ease up the reader's life, so you shouldn't hit this issue anymore - see below].
@greg-bowie , kindly notice that there are ABSOLUTELY NO DIFFERENCES between the TestMakerFreeWebApp_Chapter_01_Part02 GitHub project and the code described in book's Chapter 01: conversely, if you compare book's Chapter 01 with the TestMakerFreeWebApp_UpdatedProject, which is meant to go BEYOND CHAPTER 10, you will obviously find a lot of differences... basically, everything that's explained and coded within the whole book, including some required steps such as the dotnet-ef commands, migrations, updates & more. At the time being there only three book errata have been discovered so far and they affect some minor and specific aspects of the book (Chapter 4 and above - advanced topics, nothing related to the project startup): you can find them all in the Issues tab of this GitHub repo (here's the link).
@sipi41 : it seems to me that you are mistaking the book, which is meant to learn how to deal with ASP.NET Core & Angular and building knowledge about how they work together, for a ASP.NET Core & Angular quick-start boilerplate: that's not what it's meant to be. However, if you need a quick-start project boilerplate, you can still use the Chapter01-Part02 GitHub code, which already implements all the required updates to the Yeoman's Angular 4 template (as explained in book's Chapter 01) and definitely is a ready-to-go ASP.NET Core 2 & Angular 5 startup project.
In short words:
If you want to learn how ASP.NET Core and Angular works together, then read Chapter 01 and compare the various steps with the Chapter01_Part02 GitHub code, which is 100% working and faithfully reflects the book code [update: except for a single line of code in the /View/Index.cshtml file as per issue #9].
If you want a quick-start boilerplate with ASP.NET Core 2 and Angular 5, then just fetch the Chapter01_Part02 GitHub code and use it.
If you want to update everything to the latest version and have a working boilerplate ready, then you can easily pull it off starting with Chapter01_Part02 GitHub code and update everything, although you might need to change a couple lines of code here and there to comply with the updated frameworks changelogs: nothing major, at least so far, yet it will become worse as time passes by for obvious reasons. However, before doing that, read the Disclaimer-Do (not) try this at home paragraph in book's Chapter 1 to get the proper mindset, as it could be a not-so-trivial task.
That's about it: I sincerely hope that these guidelines will help you because there's nothing more important to me than your satisfaction (I really mean it).
IMPORTANT NOTE: Since everyone seems to be stuck by issue #9 , which is understandably not read by (almost) anyone and is basically a MS fault more than a book fault, I'm just removing SSR alltogether from GitHub so you don't have to manually patch the index.cshtml file (or hit F5).
Belka383
commented
6 years ago And again, hello everyone! Found a good article 👍: https://neelbhatt40.wordpress.com/2017/12/21/create-angular-5-application-using-net-core-2-0-template-in-visual-studio-2017/
Belka383
commented
6 years ago @sipi41, @greg-bowie It turned out to create a project on Angular 5! Instruction: 1 step: Prerequisite: Visual studio 2017 .Net Core 2.0 SDK Version 2.1.4 !!! Node.js Version 6.9.0 !!! 2 step: open: https://neelbhatt40.wordpress.com/2017/12/21/create-angular-5-application-using-net-core-2-0-template-in-visual-studio-2017/ and add Angular 5 template to VS 2017 3 step: create project use template Angular 5TF 4 step: open file 'packaje.json' and replace all (20) symbol'^' to '~'. Save changes, close project 5 step: cype file 'update-npm.bat' and 'update-webpack.bat' 6 step: run 'update-npm.bat' 7 step: run 'update-webpack.bat' 8 step: open project 9 press F5 and we see that it works!
asmtony
commented
6 years ago Firstly, I would like to say thank you to the author for writing this book. I think it is exactly what I need, still reading though. There are a lot of moving parts around angular and getting them to work in VS in our fast-moving world was always going to attract criticism, so well done. The book covers some great areas other than Angular and Dot.Net Core ( Web API and EF Core) and I am excited about moving on with it. Thought I would add my 2 cents to this post though about this issue so others can resolve.
Yesterday I faced the same issue as others have before me. I could not get the first example to build. This needed to be resolved and documented.
After around 12 hours of reading and failed projects this is what I think needs to be done.
My machine before I started was the most up-to-date version of VS 2017 Pro but no extras. Now my thinking was that this should mean that I do not have to install stuff. Wrong.
First thing to do is scrap the project you just created from the book (ASP.NET Core 2 and Angular 5 by Packt>). The reason I say this is there are some things you need to do before creating it. It is too hard to channge the config files later and by the time you have read the link i give you, you will have what you need. In fact, the book actually tells you mostly about this stuff on the next page (p. 30). The book also does say you need this software earlier but does not really say YOU MUST GO INSTALL Node etc. So I think this has caused some confusion. For me that was a positive as it gave me chance to just explore around Angular which is the part of journey that I like to take my time on :) Like the taste of great food you just want to chew and taste it slowly. Anyway..
Make sure you read to the end of my post AND the link before starting as the link tells you how to do this stuff that I am telling you to do.. Also I am using all latest downloads as going to old versions is not in the spirit of what we do. I think this is what @sipi41 (the link is from his post as well) was saying in his earlier post. At the time of this post Node is at version 8.9.4 LTS. Also I never installed Net Core 2.0 SDK ... I just used the one that came with VS I guess? If you are using VS community it may not? But I think it would not hurt to re-install any of this stuff?
Second thing
Install the latest stable build of Node. (not till you have read the link below! though)
Third. Get the Angular template (not till you have read the link though!)
Fourth. Add this line to the - package.json file
"postinstall": "webpack --config webpack.config.vendor.js" - (not till you have read the link though!)
[Warning] when doing this stuff building can take a while the first time round. If your system looks like it is doing nothing as mine did keep an eye on the bottom blue bar (blue on my machine). There is some downloading of packages going on in the background.
I won’t reinvent the wheel telling you exactly how to do this stuff Just follow the great instructions written by Neel here..
Hopefully you should now have a working ASP.Net Core Angular 5 website?
I found after all that even though I could view the site, I had some dependency issues with node. To resolve this I had to tell VS where the node bin had been installed to. mine was.. C:\Program Files (x86)\nodejs\node_modules\npm\bin Then restart VS
Good Luck!
asmtony
ghost
commented
6 years ago After spending a couple of days trying to solve this issue, it worked to me the last post of Belka383. Thank you very much...
I'm sorry to bother you but I tried to re-create your steps and after 5 hours here, I can't make this thing work! I had to come to your files and even, when I did run your project, it came to an error... I'm frustrated... I think I did take care of each step carefully... tried to use the latest versions, bad! tried to use your version, bad! tried and tried and tried!
I need some help, otherwise I will drop this book and claim my money back... I understand that you cant edit the pdf file or the physical book BUT at least you should have an updated video or step by step on how to start a project from 0, then update angular 4 to 5... because the only way I was able to make it work is by taking your code and run the 2 .bat files you have there... but I would like to know how to do it from scratch... I tried to run the command npm update also with no success... how did you make this work???