Being the absolute noob to ASP.NET 5 (and MVC6), today I tried installing Angular using nuget, i.e. Install-Package AngularJS.Core. I was expecting it to appear under the Scripts folder I created. I didn't know it was already a bower package. Now my two References folders have references marked with a warning triangle for Angular. How do I get rid of these?
When I try Uninstall-Package AngularJS.Core, I get an error message,
Package 'AngularJS.Core' to be uninstalled could not be found in
project 'Qsaas.Ui'
Yet the troublesome references still exist.
The reason for your error message is that Visual Studio want to remove the project AngularJS.Core from project.json but the line referencing it isn't in project.json. I'd imagine it's either another package with a different name and that it resides in the bower.json by looking at the screenshot you provided.
Nuget Package Manager and the Command Console simply create entries in either your project.json or your bower.json
You can also manually delete the entries from those files and it will delete it from your project as soon as you have saved the file.
e.g.in your project.json remove the AngularJS.Core row entry e.g.
"dependencies": {
"AngularJS.Core": "1.4.7",
"Microsoft.AspNet.Diagnostics": "1.0.0-beta8",
"Microsoft.AspNet.Diagnostics.Entity": "7.0.0-beta8",
"Microsoft.AspNet.Identity.EntityFramework": "3.0.0-beta8",
"Microsoft.AspNet.Mvc": "6.0.0-beta8",
}
to
"dependencies": {
"Microsoft.AspNet.Diagnostics": "1.0.0-beta8",
"Microsoft.AspNet.Diagnostics.Entity": "7.0.0-beta8",
"Microsoft.AspNet.Identity.EntityFramework": "3.0.0-beta8",
"Microsoft.AspNet.Mvc": "6.0.0-beta8",
}
If I were you I would remove any lines referencing angular in both the project.json and bower.json and save the files. Visual Studio will take care of the rest.
ASP.NET 5 uses NuGet only for server-side components. If your server don't use JavaScript directly (like Node.js do for example) then you have to swich to usage of bower or alternatively npm. The part of documentation describes how one can include AngularJS in ASP.NET 5 project.
To remove NuGet package which you installed by Install-Package AngularJS.Core you can use Uninstall-Package AngularJS.Core. By the way, if you new in ASP.NET 5, I recommend you to examine %userprofile%\.nuget\packages and %userprofile%\Oleg\.dnx\packages where you will find the installed packages. See the article for details.
UPDATED: After executing of Install-Package AngularJS.Core command, the folder AngularJS.Core will be created in the user profile under both %userprofile%\.dnx\packages\AngularJS.Core and %userprofile%\.nuget\packages\AngularJS.Core. You will see additionally AngularJS.Core (1.4.7) as folder under References\DNX 4.5.1 and References\DNX Core 5.0 of your project. The only real changes in your project will be including the line "AngularJS.Core": "1.4.7" in "dependencies" section of project.json file. If you just remove the line "AngularJS.Core": "1.4.7" from the project.json file you will see "Rest" immediately after you save the changes in the project.json file. You can verify that AngularJS.Core will stay in both %userprofile%\.dnx\packages and %userprofile%\.nuget\packages. You can just remove the folders if you don't nees the package in other your projects.
Now you can add new item to the project in context menu of Visual Studio. You can choose "Client-Side\Bower Configuration File". It will create bower.json file in your project. Then you can include "angular": "~1.4" for example in "dependencies" part of bower.json (the name of angular in bower repository if angular). After you save the sile you will see "Restoring packages..." message and you will see the package in Dependencies of the project
You will see Angular files under wwwroot\lib\angular of your project. If you would click on "Show All Files" you will see .bowerrc file as the child of bower.json. If have the following content:
{
"directory": "wwwroot/lib"
}
You can consider to use another location of bower libraries on your web. You can just follow the steps descrined in the article.
You need to open Manage NuGet Packages again on your project and click on the Installed Packages, from there you will see the option to Unistall
Related
I'm a total novice to npm, or really any package managers.
I'm working on a ASP MVC project within Visual Studio, and I have npm and bower installed globally on my computer.
I'm trying to use the bootstrap-material-design package in my project.
I manually created a package.json file using Visual Studio.
I opened a CLI at the project root and ran npm install -S bootstrap-material-design. That created a folder node_modules at project root, with bootstrap-material-design inside. I've included these folders in my project. It also changed my package.json file. Now, it looks like this:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {},
"dependencies": {
"bootstrap-material-design": "^0.5.10"
}
}
It appears to me that the package is "included" in my project. But my question is: how do I use it? All the npm guides I've been reading seem to suggest I can just start using the package in my javascript code and Visual Studio will somehow know that I'm trying to use to the package. But bootstrap-material-design has CSS files and JS files it needs included on every page. Where do those folders get included? In _Layout.cshtml? I'm pretty stuck.
Thank you!
UPDATE:
Visual Studio - File - New - Project
- ASP.NET Core Web Application (.NET Core) - Web Application
I left the default name WebApplication1
expand the wwwroot folder
expand up to wwwroot/lib/jquery-validation
in the jquery-validation folder we can see this (see img below)
- right click the WebApplication1 project in the src folder
- click on Manage Bower Packages
- Bower Package Manager screen asking to update jquery and jquery-validation (see img below)
clicked Update jquery
**everything looks normal (see img below)
clicked Update jquery-validation
dist folder has disappeared (see img below)
The text below is before I UPDATED this Q
I created an empty ASP.NET Core MVC web application in VS2015CE.
I added the bower.json file, that manages client-side stuff of the app.
Via Bower I downloaded jquery, jquery-validate, jquery-validate-unobtrusive.
Bower created a lib folder in the wwwroot folder.
Somewhere in the ~/lib/jquery-validate/ I should be able to find jquery.validate.js and it's "child" - the jquery.validate.min.js
There were no such files there, so I became suspicious and I created another project, this time a NOT empty web application.
I then compared both jquery-validate folders in the lib folders of the two applications.
My first project (created as EMPTY) has the following folder
structure:
dist folder is not present
My second project (created as WebApplication, NOT empty) has the
following folder structure:
dist folder is present and inside it there's the jquery.validate.js file and also it's child, the jquery.validate.min.js file.
What am I doing wrong? Or is it a bug in VS2015? Or a Bower bug?
You need to run the Grunt file which will build the dist folder for you. The best way I've found to do this right now is to install the Grunt Launcher extension. You can then right click on the package.json file within the jQuery-validation folder and select "NPM Install". That should build the dist folder for you.
I haven't found a way to automate this yet, but I'm sure there is. Just started using Gulp and wasn't using Grunt until I ran into the problem you're having. If someone has some tips there, that would be great. Good luck!
Right click on Bower.json file and select Open Command Line ==> PowerSell
type bower update
That's how I resolved my problem..
If Bower doesn't restore the correct packages:
delete everything from the directory value specified in .bowerrc which is located into your web project folder (e.g. wwwroot/lib)
open Git Bash (Git SCM for Windows -> when installing, choose Git Bash option)
go to your web project folder (where bower.json is located)
run the following:
bower cache clean
bower install
OR
bower update
Below it's an example of bower.json file:
{
"name": "asp.net",
"private": true,
"dependencies": {
"bootstrap": "3.3.7",
"jquery": "2.2.0",
"jquery-validation": "1.14.0",
"jquery-validation-unobtrusive": "3.2.6"
}
}
Unfortunately, none of the above offered solutions worked for me.
The problem was solved by smart people at Microsoft with a VS update or by those working on open source stuff.
Must have been a bug or something.
Anyway, thanks for the help guys..
note sure if this is a bug in Visual Studio 2015 but I thought I'd ask the community to see if anyone else has experienced this odd behaviour.
Steps to reproduce;
Create a new AspNet5 Empty Website.
Add bower config file
Alter the .bowerrc directory to "bower_components"
Add bootstrap ~3.3.6 as a dependency to the bower.json file
right click the bower.json and select "Restore Packages"
Take a look in the bower_components/bootstrap/dist folder and you will see that there is no js folder.
Now, open up Package Manager Console and type "bower install bootstrap"
This creates another bower_components folder in the root of the solution folder with the same folder structure as the one in the web app with one exception, the INCLUSION of the javascript files??
Has anyone else seen this, am I missing something fundamental about bower?
I am having trouble understanding how I can access the TypeScript definition files which I installed with the NuGet package manager. I installed the TypeScript definition files for Angular with the following command:
Install-Package angularjs.TypeScript.DefinitelyTyped
And it shows up in the project.json file:
"dependencies": {
"Microsoft.AspNet.Server.IIS": "1.0.0-beta3",
"Microsoft.AspNet.Mvc": "6.0.0-beta3",
"Microsoft.AspNet.StaticFiles": "1.0.0-beta3",
"Microsoft.AspNet.Server.WebListener": "1.0.0-beta3",
"angularjs.TypeScript.DefinitelyTyped": "3.2.5"
},
And a reference has been placed under 'References', linking to:
C:\Users\.k\packages\angularjs.TypeScript.DefinitelyTyped\3.2.5
I am able to reference to this by using the absolute path, but this won't work:
/// <reference path="C:\Users\<user>\.k\packages\angularjs.TypeScript.DefinitelyTyped\3.2.5\Content\Scripts\typings\angularjs\angular.d.ts" />
Angular depends on jQuery, which it will look for in:
'C:/Users//.k/packages/angularjs.TypeScript.DefinitelyTyped/3.2.5/Content/Scripts/typings/jquery/jquery.d.ts'
So my question is: how can I reference to TypeScript definition files installed as a NuGet package?
Currently angularjs.TypeScript.DefinitelyTyped nuget package supports only ASP.NET 4 folders structure. It puts files in your ~\Scripts\typings\angularjs\, (see nuget-automation source) folder you can reference it from there like this:
/// <reference path="../scripts/typings/angularjs/angular.d.ts" />
In order to use typings in ASP.NET 5 you have to just copy *.d.ts files from \packages\angularjs.TypeScript.DefinitelyTyped\[VERSION] to any folder accessible from your project and change reference path accordingly.
P.S. Feel free to create new issue in NugetAutomation on GitHub.
I want to add reference to ASP.NET 5 Class Library project from regular Framework 4.5 Class Library Project.
I cannot do it.
Is there some workaround and will this be supported?
I have tried to add dependency to framework 4.5 in project.json like this:
"frameworks": {
"net451": {
"dependencies": {
"System.Data.Common": "1.0.0-beta1",
"System.Data.SqlClient": "1.0.0-beta1"
},
"frameworkAssemblies": {
}
},
And after this add reference to this ASP.NET 5 Class Library project but without success.
check the "Produce outputs on build" checkbox will copy build outputs to artifacts\bin\[CONFIGURATION]\[FRAMEWORK] folder
then you can reference this dll
You can do it! First we need to understand that "old-style" projects output and reference DLLs. The ASP.NET 5 projects output and reference NuGet packages.
First set up a local nuget repository. Luckily this can be a folder. Then add that to folder NuGet.Config file.
<config>
<add key="localrepo" value="C:\Temp" />
<the rest of your file />
</config>
You can also do this through the Tools -> Options -> NuGet Package Manager -> Package Sources window in Visual Studio.
Then navigate your commandline to the ASP.NET 5 class library you want to reference. Drag down the dependencies with
kpm restore
Then build and pack it and output the result to your local repository folder.
kpm pack --out C:\Temp
Now you should be able to add the nupkg from kpm pack as a nuget reference in your "old style" project. Use your normal way of Managing NuGet Packages from Visual Studio if you wish.
Note: Your ASP.NET 5 class library needs to target net45 for this to work. Make sure this is in the framework section of your project.json
...
"frameworks": {
"net45": {},
// Other frameworks
}
...
Alternatively:
If you want to do it quick and dirty you can run
kpm build
, and add a direct DLL reference. The DLLs location should be listen in the output from kpm build.