With the recent release of Polymer 1.0 I was hoping to use the Paper Elements in a ASP.NET MVC/Microsoft Stack, or at least check them out.
I have used nuget in the Visual Studio package manager to attempt to install polymer:
PM> Install-Package polymer
Installing 'polymer 1.0.0'.
Successfully installed 'polymer 1.0.0'.
Adding 'polymer 1.0.0' to Eqs.Mvc.Web.
Successfully added 'polymer 1.0.0' to Eqs.Mvc.Web.
PM> Install-Package paper-elements
...long long list of dependency imports
When I try to import paper-elements.html I notice that in paper-elements.html there are missing files and files in the wrong locations.
For example in paper-elements.html:
<link rel="import" href="../polymer/polymer.html">
is actually located in the project at the scripts root:
<link rel="import" href="../polymer.html">
I get a lot of 404 errors. Did I import the packages incorrectly?
Don't use NuGet to get polymer elements (as it's not maintained by Google so it's not up-to-date), use Bower instead.
Prior to ASP.NET 5
Go to NuGet's Package Management Console and install Bower.
PM> Install-Package Bower
Navigate to your web project folder in File Explorer and then Shift + Right Click anywhere to select Open command window here in the context menu.
Inside the command prompt, run the following commands one after another.
bower init
bower install --save Polymer/polymer
bower install --save PolymerElements/paper-elements
Whenever there's a new version, run the following command.
bower update.
ASP.NET 5
It's a lot simpler in ASP.NET 5, since the project already adds a bower.json file for you. So you just need to add the dependencies there -
{
"name": "Portal",
"private": true,
"dependencies": {
"polymer": "^1.1.3",
"paper-elements": "PolymerElements/paper-elements#^1.0.3",
...
}
Once all dependencies are added, go to your Visual Studio web project and enable Show All Files. You will see a folder called bower_components, just include it into your project.
Have a look at this question I asked too.
Alternatively my company, FrostAura Consolidated now manages a package that you might find useful. This package scaffolds all core and paper components with a demo of how to create a custom web component with automated documentation and unit testing. Check it out at https://www.nuget.org/packages/FrostAura.Dynamics.Polymer.Kickstart/
you may need run Set-ExecutionPolicy Unrestricted in windows powershell to allow Bower install scripts to run...
Related
I use scss in my project and want to use bootstrap.scss so I can define a single class inheriting multiple bootstrap classes e.g.
.myButtonClass { #col-xs-12; #col-sm-6 }
So I can replace class="col-xs-12 col-sm-6" with class="myButtonClass" as I have many buttons that need to be the same. I have installed the yarn extension in VS2017 and can see the Restore Packages (yarn) in my GUI, but yarn is not found in the VS command prompt. So I cannot install the bootstrap scss package.
This is a .Net Framework WebAPI project, not node.js project. There seems to be no examples of how to use js packages in a vanilla .Net Framework WebAPI project.
Or is it simply that I cannot use these style of JS packages?
If you want to use npm on Windows, this is what you need:
Download and install Node (you might need a restart).
Make sure that node is installed by opening a command prompt and running node -v (should print a version number).
Run npm -v and see if it's installed (should be).
Now in the context of an ASP.NET MVC project. The newer versions of Visual Studio (I believe 2017) support npm - you can just open the package.json and add dependencies (it will download them behind the scenes).
In case you're using an old version, you can simply open a command prompt, navigate to your project and use npm install from there.
Simply run npm install bootstrap-scss#4.3.1
I have created one angular 6 application using visual studio 2017.
Here is the screenshot for my visual studio project (Angular).
As you can see I have added one new component and service named as Todo.
When I am adding todo.service.ts I need to add some references of angular modules so that I can avail HttpClient, HttpHeaders, HttpParams , catchError, tap, map features.
But here seems like I am not able to refer the path to the angular module package which we can easily refer while creating project using cli command because there we have node_modules folder where we have all packages and importing file using below command
import { HttpClient, HttpHeaders, HttpParams } from '#angular/common/http';
import { catchError, tap, map } from 'rxjs/operators';
but here in VS-2017 I am not able to refer the package.
It give me an error like "can not find modules"
Here is the screen shot for the same.
Please suggest me what to do here how to refer to angular packages while creating angular project in VS-2017.
Note there is no error in referring to the package because the same code is working while creating project using angular CLI command.
Navigate to directory where package.json file is placed
Run
npm install
If still the issue persists
Install required package using npm:
npm i <package-name> --save
Do this ,
Replace /common/http to common only
Same for operators
I got the solution..
You can rename or deleted the existing node_modules folder.
Then create new project using angular-cli command.
Then paste the copy the node_modules(step 2) to my .NET folder (step1).
Now, it start working.
Thanks for your all suggestion guys..
So I've been working on a asp.net core project and trying to inject scripts using the gulp-inject package. but when I try to use the gulp-inject module in gulpfile.js it throws this error in task-runner window. what am I missing here?
gulp-inject in package.json
task-runner error
This is a known issue. You need to upgrade your version of NodeJS to v4.
To see your version, open a command prompt and run:
node --version
To upgrade, go to https://nodejs.org and find the downloads or look at How do I update node and npm on windows?
If you're using Visual Studio 2015, also check the version of NodeJS that it is using. Options > Projects and Solutions > External Web Tools shows the locations. From there either:
add C:\Program Files\nodejs as the new top entry, or
move the $(PATH) to the top if it is already up-to-date.
I would like to use gulp in my Wordpress project. Is it possible to execute gulp functions outside a node JS project?
I'm running on OSx, but couldn't find anything on the internet about it. Or do I'll have to use another lib like Grunt?
Yes, the main language of your project doesn't affect whether or not your can include some node.js dependencies and run them. You will need to have gulp installed and have a gulpfile.js in your project, and then you can run it.
You could install gulp globally on the server (npm install -g gulp), but I recommend creating a package.json file (using npm init) in your project, so that your node.js dependencies are tracked in your version control, and installing gulp with npm install --save gulp (inside your project's directory). Since gulp won't be installed globally in that case, you will need to use "$(npm bin)"/gulp from a directory inside your project to run it.
I use Yeti Launch from the Zurb foundation for the same setup (no node installed on my Mac).
When you run it, it will create a Foundation frame but you can do the following:
Stop the project it creates from within its interface,
Delete the files it creates and replace with yours
Leave the project it shows in the interface
Leave the "node_modules" folder it creates
Start the project again
This will run your Gulp file.
The only issue is installing node modules. For this, I look at any error messages it gives regarding missing modules and copy these into the "node_modules" folder from Github
The short answer is no. Gulp is distributed as a npm package and has node.js as a dependency BUT that doesn't mean you can't use it outside of a node.js project.
The only real need for Gulp on a wordpress project would likely either be at the theming layer or if you were doing a custom plugin. Assuming you are making a theme, some of them use Gulp extensively.
I've used the Roots ecosystem's Sage theme successfully on a number of projects. It has node/npm dependencies but they are all included if you use the theme. Check out their Gulp file - it's probably close to what you are philosophically looking for.
I'm running Visual Studio 15 Preview, and started a new project: ASP.NET Web Application > ASP.NET 5 Empty. I then opened project.json and modified it to add AngularJS.Core 1.3.4 as follows:
"dependencies": {
"Microsoft.AspNet.Server.IIS": "1.0.0-beta1",
"AngularJS.Core": "1.3.4" // I only added this line
},
I see the package downloaded and added to my packages folder, but the nupkg file has a content folder (with the actual *.js files I want added), but those files aren't being added to my project. There are no error messages or warnings of any kind (at least none via the package manager log).
I have also tried running kpm --verbose install ... and kpm --verbose restore via the command line, and I don't see anything useful for solving this.
I know I can manage this manually, but am I missing something? Is this a bug, or am doing this wrong, or are my expectations incorrect? I'm new to this ASP.NET vNext stuff, and this is my first time jumping into it.
It doesn't. KPM currently doesn't do anything with packages that contain content/powershell scripts/transforms etc.