I have VS2015 and ASP.NET 5 RC1 project with some typescript files. Files are located in scripts folder and tsconfig is in this folder too. When I'm saving typescript file, js file is generated and everything is ok. But js files are not generated during build.
I have VS2013 installed also and some old projects using typescript, so may be there are some problems cause I have many TypeScript versions and many VS versions.
How can I troubleshoot compiling typescript during build? Build log says nothing about typescript. Checkbox 'Compile TypeScript on build' is project settings is enabled. In old ASP.NET projects TypeScript is enabled via custom target in csproj and it's easy to troubleshoot. But in xproj I don't see any typescript related things.
My current working solution is to add postbuild event which manually calls TypeScript compiler.
project.json:
"scripts": {
"postbuild": ["tsc -p scripts\\tsconfig.json"]
}
(assumes you have tsc in your PATH variable)
make sure this is added in your solution file
"Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')"
I had the exact same issue. Worked for me when I edited tsconfig, and placed compileOnSave BEFORE compilerOptions in tsconfig:
{
"compileOnSave": true
"compilerOptions": {
....
},
}
Related
I have an asp.net core project.
This project contains less style sheet files.
I can see a compilerconfig.json and compilerconfig.json.defaults files at the root of the project.
This 2 files contains less compilation rules.
But when I type "dotnet build", the less files are not compiled in css.
Is there a specific command to type in addition of "dotnet build" ?
Thanks
You can right click compilerconfig.json and enable it. Also it has Ci support.
Nuget Package: source
<PackageReference Include="BuildWebCompiler2022" Version="1.14.8" />
cmd:
I have two scss files in my project that need to be compiled during my CI build (on Azure Pipelines). One is getting compiled when I build locally, and one is not. I'm using WebCompiler and the output to the log shows the one file that is working, but doesn't show any error for the missing file. My CI build is being handled by Azure Pipelines in the Devops suite and for some reason the CI build is working differently than the local build.
Originally I was missing the "Content" designation on the BuildAction for the file that doesn't get compiled. I have corrected that, but it still isn't getting compiled. I have confirmed the contents of the compilerconfig.json file and both files are there.
Here is the compilerconfig.json
[
{
"outputFile": "Content/custom-bootstrap.css",
"inputFile": "Content/custom-bootstrap.scss"
},
{
"outputFile": "Content/Site.css",
"inputFile": "Content/Site.scss"
}
]
And here is a snippet from the CI build Log file (originating from Azure Pipelines).
WebCompile:
WebCompiler: Begin compiling compilerconfig.json
WebCompiler installing updated versions of the compilers...
Compiled Content/custom-bootstrap.css
Minified Content/custom-bootstrap.min.css
WebCompiler: Done compiling compilerconfig.json
And here is a snippet from a local build log.
5> WebCompiler: Begin compiling compilerconfig.json
5> Compiled Content/custom-bootstrap.css
5> Minified Content/custom-bootstrap.min.css
5> Compiled Content/Site.css
5> Minified Content/Site.min.css
5> WebCompiler: Done compiling compilerconfig.json
Any help would be greatly appreciated.
Solved my own issue...
It looks like the WebCompiler, when running from the command line, will not overwrite an existing css file.
I couldn't get the WebCompiler to compile this css within the context of my azure build so I left the css committed to my source code repo. Overwrite occured just fine in local builds. After leaving my project for a few months (no new development or deployments) I had a renewed interest in figuring this out. Turns out that removing the css file is now allowing WebCompiler to create the css for the deployment package. Not sure why I didn't try this long ago, but happy to be past this issue.
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..
I want to use Bower in an MVC 4 application, developed in Visual Studio 2015. I know when you have a MVC 5 project, with Visual Studio 2015 Update 1, there is a nice UI for Bower management, much like the nuget interface. This part is not really critical.
I am using bower currently - I have npm and bower setup, and I have the package.json and bower.json files in the solution. When you save, Visual Studio automatically runs "npm install" and I have a postinstall step in package.json to run "bower install".
I do not want to put the bower_components into the solution (or source control). What I want is to just keep the json config files, and when you save, all dependencies are retrieved.
This all works fine in development, but what doesn't work is right clicking the Web Project, Publish. Publish does not run "npm install", and does not include files not included in the solution (except it seems to work with nuget packages not included in the solution somehow). The "Publish Web" functionality is how my web applications are deployed to production using IIS deployment.
How can I make Visual Studio Web Publish work with Bower?
An alternative - I have seen there are new hooks for Team System Builds that will run gulp tasks, but I don't know that you can publish directly to IIS in this manner.
instead of referencing/deploying the complete bower_components folder, you can use a gulp or grunt script (pick whatever you prefer) to copy the correct files out of the bower_components folder to something like scripts/lib.
You can then include these files in source control and subsequently deploy them.
The following is a grunt file that I use to accomplish this:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
copy: {
main: {
files: [
{
expand: true,
flatten: true,
src: [
'node_modules/vss-sdk/lib/VSS.SDK.js',
'node_modules/moment/moment.js',
'node_modules/moment-timezone/moment-timezone.js',
'node_modules/jquery/dist/jquery.js',
'bower_components/datetimepicker/jquery.datetimepicker.js',
'bower_components/datetimepicker/jquery.datetimepicker.css',
],
dest: 'scripts/lib',
filter: 'isFile'
}
]
}
}
});
grunt.loadNpmTasks("grunt-exec");
grunt.loadNpmTasks("grunt-contrib-copy");
};
In ASP.NET Core (ie MVC6), Bower is configured (in a .bowerrc file) to add scripts to wwwroot/lib rather than a bower_components folder. That content does get published by Visual Studio.
The same approach using .a bowerrc file will work for MVC4 webs (at least if you are using Visual Studio 2015). However, it also gets checked into version control so it might not be exactly what you want.
The .bowerrc file can be used to do various things (see http://bower.io/docs/config/). However, to get Bower to add scripts to the project in ~/scripts/lib, you simply add the following json:
{
"directory": "scripts/lib"
}
I am using typescript 1.5 and VS 2015 RC with new ASP.NET 5 Project templates.
Typescript compiles fine however I am getting the following error on my exported classes:
cannot compile external modules unless the "-module" flag is provided
I want to silence this error however I am unable to specify any typescript options though VS 2015. I also tried tsconfig.json file however it seems it is not effective to just add this file. Perhaps there is an additional step I am missing. What can I do ?
Typically this setting is in the project properties on the TypeScript build tab in the project properties (for your current build configuration such as Debug or Release).
Since you are saying that the TypeScript build tab doesn't appear, you may not have a valid reference to the TypeScript "props" file in your project. Look for a line like this in your .csproj or similar file:
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />
If it doesn't exist, add it to your project and then fix up the path to be correct for your install of Visual Studio and TypeScript (just search for the "Microsoft.TypeScript.Default.props" file on your hard drive). When you reload the project, the TypeScript build properties tab should appear.
The other thing you need is a reference to the TypeScript "targets" file such as this:
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
Note that a targets reference generally has to be as low as possible in your project - possibly even just before the </Project> tag.
Initialization of TypeScript in Visual Studio is dependent on the .props and .targets files existing so that could also be the issue.