ligershark/coretemplatepack

A collection of .NET Core project templates

coretemplatepack's Issues

ASP.NET server not launching (VueJS template)

Installed product versions

• Visual Studio: 2015 Community
• This extension: 1.1.37

Description

The server is not launching, only webpack dev server is running

Steps to recreate

1. Create project with VueJS template
2. Put a breakpoint
3. Run in VS
4. breakpoint won't be hit, app won't start

Current behavior

Only webpack server is running

Expected behavior

Webpack server should run, in addition to ASP.NET Core server

.gitignore contains files in wwwroot/dist which will not be automatically be created

• Visual Studio: Enterprise 2015 14.0.25431.01 Update 3

1. Create a new Project with the angular 2 spa template
2. check the project into git
3. clone the git repo in a new directory
4. try to rebuild/run will not work because some files are missing:
   wwwroot/dist/89889688147bd7575d6327160d64e760.svg
   wwwroot/dist/vendor.css
   wwwroot/dist/vendor.js

The error message fails to load the web page due to missing wwwroot/dist/vendor-manifest.json file.

Probably these files should not be excluded from git by using .gitignore?

Project.json has the entire node_modules directory published

After using this template successfully and deploying to IIS, I realized that the upload to my server was ~100MB. 99% of that bulk was due to the node_modules being included in the publish.

"publishOptions": {
    "include": [
      "appsettings.json",
      "ClientApp/dist",
      "node_modules",
      "Views",
      "web.config",
      "wwwroot"
    ]
  },

I am not sure if this directory actually needs to be included. But if not, taking that out would be ideal.

Compilation is too slow during development

Installed product versions

• Visual Studio: Community 2015 Upd 3 (4.6.01055)
• This extension: [example 1.1.37]
• dotnet: 1.0.0-preview2-1-003177

Description

Although I'm very impressed by the whole template pack, I feel the build process way too slow. I believe it is because it pre-renders on the server side every time I start the project. Even if I'm in Debug mode.

In Publish mode when we compile and bundle everything, it is absolutely OK, but the development slows down dramatically.

Steps to recreate

1. Load the default project in VS
2. and press F5
3. modify s.g. in the source
4. reload the browser

Current behavior

The changes are not propagated to the client by simply reloading the page in the browser.
You need to restart the project in VS (Ctrl-Shift-F5) to see the changes in the browser.
And this step is painfully slow. (takes 1 minute or more)

Expected behavior

During the development it should work much faster (10-15 seconds is OK). When publishing, it's OK to wait more since it has a lot of tasks to compile and render the site for production use.

Is it possible to turn off server-side pre-rendering for the development? And then turn it back for publishing? Is there a way to see my changes in the browser without restarting the project every time?

Thx.

[Update] - The changes ARE propagated automatically to the browser 1 or 2 times but after that I have to restart the project. I mean changes made on component template and component css only, not C# code or such.

Can't bind to 'ngModel' since it isn't a known property of 'input'

Installed product versions

• Visual Studio: 2015 Professional
• Extension: AspNetCoreAngular2

Description

Error: Can't bind to 'ngModel' since it isn't a known property of 'input'.

Steps to recreate

I have the following code in html template:
<input type="text" [(ngModel)] ="data"/>
When rendering the html page, the error was thrown.

Exception: Call to Node module failed with error: Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("

][(ngModel)] ="data"/>

Current behavior

AspNetCoreAngular2 template doesn't allow to use ngModel directive.

Expected behavior

Using ngModel directive should not throw any error.

Styles is not working for angular 2 components

Hi, I have been trying to use this template, but I am not able to use the Angular 2 component to use css styling.

My code can be found here-

https://github.com/abrarjahin/Dot.NetCore_Angular2_App

Debbugging is not working in Visual Studio

Installed product versions

• Visual Studio: 2015 update 3
• This extension: 1.1.37
• Type Script tools 2.0.3

Description

Can't get debugging of TypeScript to work for this template in Visual Studio + IE. Is it even supposed to work? I know this is probably not the correct place to report this problem, but maybe you know some secret recipe for things to finally just work in this mad new world? )) At least you appear to know something about how this webpack nightmare works and what it actually does, maybe it's not placing some files in the correct places that VS expect...

Steps to recreate

1. Create a new project
2. Set a breakpoint somewhere in a method in *.component.ts

Current behavior

Visual studio sets an "empty" breakpoint (it becomes empty after starting the project) that says this in the tooltip: "The breakpoint will not currently be hit. No symbols have been loaded for this document."

Expected behavior

Working breakpoints and debugging

A lot of errors after starting Angular2 template

Installed product versions

• Visual Studio: 2015 update 3

Description

I create project from Angular 2 template and after project is loading I see these TypeScript errors

“[...]Microsoft.DotNet.Props” was not found

[@madskristensen: Copied from MSDN blog post]

I installed ASP.NET Core Template Pack from https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack and tried to create a project with the template ASP.NET Core Angular 2 Starter Application (.NET Core), but I get the following error:

“C:\Program Files\MSBuild\Microsoft\VisualStudio\v14.0\DotNet\Microsoft.DotNet.Props” was not found. Confirm that the path in the declaration is correct, and that the file exists on disk. d:\temp\Angular2Application1\Angular2Application1.xproj.

Do you have an idea how to resolve this?

Throws error looking for 1.0.0-preview3-004056

Installed product versions

• Visual Studio: [2015 Community Update 3]
• This extension: [example 1.1.21]

Description

Can't get Angular2 template going (see included pic of Dialog Box)

. I have VS2017 RC installed also. Might that be the issue?

Steps to recreate

Install extension and open a new Angular2 template

Current behavior

After closing the dialog, can't seem to get anything to work. Won't even start

Expected behavior

F# plans?

Just wondering if there are plans to make an F# template as well which brings everything together? Would be a great benefit at the current coreclr situation

Updating to last angular version 2.4.3

Installed product versions

• Visual Studio: 2015 Enterprise
• This extension: 1.1.37

Description

Error after updating to last angular version 2.4.3

Steps to recreate

ncu -u

New package version
"@angular/common": "2.4.3",
"@angular/compiler": "2.4.3",
"@angular/core": "2.4.3",
"@angular/forms": "2.4.3",
"@angular/http": "2.4.3",
"@angular/platform-browser": "2.4.3",
"@angular/platform-browser-dynamic": "2.4.3",
"@angular/platform-server": "2.4.3",
"@angular/router": "3.4.3",
"@types/node": "^7.0.0",
"angular2-platform-node": "~2.1.0-rc.1",
"angular2-universal": "~2.1.0-rc.1",
"angular2-universal-polyfills": "~2.1.0-rc.1",
"aspnet-prerendering": "^2.0.2",
"aspnet-webpack": "^1.0.11",
"bootstrap": "^3.3.7",
"css": "^2.2.1",
"css-loader": "^0.26.1",
"es6-shim": "^0.35.1",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.1.1",
"preboot": "^4.5.2",
"raw-loader": "^0.5.1",
"rxjs": "5.0.3",
"style-loader": "^0.13.0",
"to-string-loader": "^1.1.5",
"ts-loader": "^1.3.3",
"typescript": "^2.0.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-externals-plugin": "^1.0.0",
"webpack-hot-middleware": "^2.10.0",
"webpack-merge": "^2.4.0",
"zone.js": "^0.7.5"

Current behavior

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: Prerendering failed because of error: TypeError: Cannot read property 'SelectorMatcher' of undefined
at Object. (C:\ProjectsVsTeam\ImmagineWeb\Angular2Application\Angular2Application.Web\node_modules\angular2-platform-node_private_imports_.js:19:58)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (C:\ProjectsVsTeam\ImmagineWeb\Angular2Application\Angular2Application.Web\node_modules\angular2-platform-node\node-platform.js:9:28)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
Current directory is: C:\ProjectsVsTeam\ImmagineWeb\Angular2Application\Angular2Application.Web

Thanks
Pierluigi

Template does not show up after install

Followed instructions in this article http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/ and verified that all prereq's were installed first - restarted not only VS but machine and still the template does not show up ion VS

Installed product versions

• Visual Studio: 2015 Community Edition Update 3
• This extension: [example 1.1.21]

Description

Template does not show up after install

Steps to recreate

1. Checked prerequisites
2. DL'd install from link in article above.
3. Executed the install.
4. Restart VS2015

Current behavior

The template does not show up and is not accessible

Expected behavior

Template should show up

Download button in VS Gallery is broken

Steps to recreate

1. Navigate to https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack or click the link in your main page
2. Click the download button at the top of the page

Current behavior

No download starts, it just redirects the browser to the same page

Expected behavior

Download of the file should be started.

TemplateUrl not working

Hi,

I am using ASP.NET Core + Angular 2 template. The problem is with the TemplateURL which is not working with any URL. In my scenario I want to route it to the MVC controller and wanted to load the about page of Home controller.

Below is the exception.
Exception: Call to Node module failed with error: Error: No ResourceLoader implementation has been provided. Can't read the url "Home/About"

Here is my sample about.component.ts

import {Component} from '@angular/core';
import { platformUniversalDynamic } from 'angular2-universal';
@component({
selector: 'about',
templateUrl: 'Home/About'
})

export class AboutComponent {
message: string = 'Hello World';

Side notes:

1. I have also added the "angular2-template-loader" as dev dependency in package.json.
2. Here is my module configuration in webpack.json

module: {
loaders: [
{
test: /.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true'],
exclude: [/.(spec|e2e).ts$/]
},
/* Embed files. /
{
test: /.(html|css)$/,
loader: 'raw-loader',
exclude: /.async.(html|css)$/
},
/ Async loading. */
{
test: /.async.(html|css)$/,
loaders: ['file?name=[name].[hash].[ext]', 'extract']
}
]
}

AspNetCoreAngular2 - How to use JQuery

Installed product versions

• Visual Studio: 2015 Community (Update 3)
• This extension: [example 1.1.21]

Description

Hi, I am trying to use JQuery with this template and I am not being successful. I am using http://mdbootstrap.com/

For some of the components you have to initialize it with JQuery.

How would I do it using this template?

I have tried manually adding the jquery.min.js to the project but I am still facing the:
"ReferenceError: $ is not defined"

Webpack isn't updating the vendor.js

Installed product versions

• Visual Studio: VS 2015 Community Update 3
• This extension: 1.1.37

Description

I created a new Asp.NET core Angular 2 starter application with this template. I removed bootstrap and added the materialize-css, but the generated file still contains the bootstrap and not materialize.

Steps to recreate

1. Create a new Asp.NET core Angular 2 starter application
2. In package.json, remove bootstrap and addd "materialize-css":"0.98.0"
3. In webpack.config.vendor.js remove the two lines concerning bootstrap(in the vendor array).
4. In webpack.config.vendor.js add the following two lines(in the vendor array):

'materialize-css',
'materialize-css/dist/css/materialize.css',

5. Build the solution
6. Check the wwwroot/dist/vendor.css file.

Current behavior

Bootstrap classes are still present and materialize-css classes are not.

Expected behavior

materialize-css classes should be present and bootstrap classes not.

Note: I'm kind of starting with all this webpack/npm/... stuff and I like it, but probably I did miss something? Is there a step that I should do manually to update this pack? If yes what? It makes 2 days I'm searching for it.

Note2: I'm still in a development stage, not production.

My current code is available on GH if you want to check something: https://github.com/jgrossrieder/PokerScrum

Target full .NET?

I want to use this template but I don't want to use EntityFrameworkCore since it lacks some fundamental features I can't afford to miss (TPT, Complex types etc.).

Anyway, I tried changing the template's json file to target net641, but I got many errors, most of them related to the JS services and the Anuglar package.
Can I make this work? Any tips on what my json should look like without rendering my project to a gazillion errors not knowing how to start?

I hereby vote for the inclusion of a package that includes the .NET with Anuglar and TypeScript template, that targets the full .NET allowing EF6.

UTF 8 characters don't render in AngularJS 2 template

We create angularJS2 application. In some component utf8 character shown normally but some don't. Specially templates that come from router-outlet. I think this extension has some bugs.

Updating angular 2 to angular 4

I just want to update this project from anuglar 2 to angular 4, but it doesn't work.

the Error looks just like this:

ERROR in [at-loader] ./node_modules/angular2-platform-node/node-renderer.d.ts:2:10
TS2305: Module '"C:/VSTS/Fuelhub/WebApp/node_modules/@angular/platform-browser/platform-browser"' has no exported member 'AnimationDriver'.

update bootstrap 5

Installed product versions

• Visual Studio: [example 2015 Professional]
• This extension: [example 1.1.21]

Description

Replace this text with a short description

Steps to recreate

1. Replace this
2. text with
3. the steps
4. to recreate

Current behavior

Explain what it's doing and why it's wrong

Expected behavior

Explain what it should be doing after it's fixed.

window is not defined

Installed product versions

• Visual Studio: 2015 community
• This extension: 1.1.21

Description

I am a trying to use this template and tried to upgrade it to 2.4, but there is some difficulties, so I decided to use Angular 2.1.0. The styling was not working, so I have added this-

AbrarJahin/Dot.NetCore_Angular2_App@be93036

Now I am having some error like this-

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: window is not defined
at D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:6541
at D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:6473
at e.exports (D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:6759)
at Object.<anonymous> (D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:3513)
at t (D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:217)
at Object.<anonymous> (D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:3381)
at t (D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:217)
at Object.e.exports (D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:2992)
at t (D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:217)
at Object.<anonymous> (D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:1615)
at t (D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:217)
at Object.<anonymous> (D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:779)
at t (D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:217)
at Zone.current.fork.name (D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:310)
at Object.<anonymous> (D:\Dot.NetCore_Angular2_App\ProfileManagement\ClientApp\dist\main-server.js:1:315)
Current directory is: D:\Dot.NetCore_Angular2_App\ProfileManagement	

Steps to recreate

https://github.com/abrarjahin/Dot.NetCore_Angular2_App/commits/master

Current behavior

Explain what it's doing and why it's wrong

Expected behavior

Should run and should not give error window is not defined

ASP.NET Core Angular 2 template: Web API method (e.g. WeatherForecasts) called twice on F5

Installed product versions

• Visual Studio 2015
• This extension: 1.1.37

Description

In ASP.NET Core Angular 2 template the Web API server method WeatherForecasts called twice on browser refresh (F5) of 'http://localhost:5000/fetch-data' page.

Steps to recreate

1. Add System.Threading.Thread.Sleep(TimeSpan.FromSeconds(10)); in the beginning of Web API method WeatherForecasts. (Or just set a breakpoint in WeatherForecasts and debug it).
2. Try to refresh (F5) the 'http://localhost:5000/fetch-data' page.

Current behavior

You will notice that WeatherForecasts is called twice: once on the server during server-side prerendering and once from the browser's javascript after the page has being loaded.

Expected behavior

It should be only called once during server-side prerendering.

Visual Studio 2017?

Is there a version for Visual Studio 2017?

[HMR] not updating / watching

Installed product versions

• Visual Studio: 2015 Professional Update 3
• Node: v.7.3.0
• This extension: 1.1.37

Description

Console displays [HMR] connected but no files are updated

Steps to recreate

1. Add new ASP.NET Core Angular 2 Starter Application (.NET Core)
2. Hit F5
3. verify [HMR] connected in console
4. Edit home.component.html
5. Save

Current behavior

Currently nothing happens

Expected behavior

Page get's updated with the edit from home.component.html

I have absolutely no clue where to start. May you give me some adivce.

Thanks

External css not loading

Please guide in including external css files like when using primeng.
I have already tried including it in webpack.config.vendor.js and also tried to use them by importing an scss file with links to the external css in that scss file
Also tried including them directly in app.module.ts and also in index.cshtml
But nothing seems to work.

adding a nuget.config file

Hi,
I'm preparing a few templates but I have a problem: since I'm using openIdDict I have to add a nuget.config file becase is not in the standard nuget repo.
How can I handle this?

WILL NOT RUN - ASP.NET Core + Angular 2 template for Visual Studio

I have followed the posting at http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/ to start a new MVC Angular 2 application.

• I already had VS2015 (pro) Update 3
• I updated my .net core to version 1.0.1
• I insured my Node.js was above version 4 ( I had 10 )
• I tried to install the ASP.NET Core Template Pack extension from https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack but the Download button on that page is broken so I got it from http://vsixgallery.com/extension/ae9d6285-3f2a-4cbe-9021-82eb4d8b8c74/
• I started VS and went to Visual Studio’s File New Project menu, expand the Web category, and picked ASP.NET Core Angular 2 Starter Application (.NET Core)
• I let the prjoect build and waited until the depencies finsihed restoring
• I then tried to run the project - NO LUCK
• Ctrl+F5 - nothing
• F5 - nothing
• The Start button on the tool bar just says "Start", not IIS or Chorme, or anthing like that. Pressing the "Start" button get the error "Unable to start debugging. The startup project cannot be launched"
• Under VS's Debug Menu, both the "Start Debugging" and "Start without Debugging" options are disabled.

I also noticed that in the solution explorer there is an entry "References (Errors - see Error List ) --- there is no Error List...

Don't know what to do.

Angular 2 Template Typescript errors in vs2015

After Creating a angular 2 template I get a lot of typescript errors

Severity Code Description Project File Line Suppression State
Error TS2304 Cannot find name 'module'.

also things like module are not recognized by vs2015 ide

in vs code everything seems to be ok

what am I missing?

Client side Typescript debugging for Angular2 Applications not available

Installed product versions

• Visual Studio 2015 Enterprise
• This extension: 1.1.37

Description

How to enable client side Typescript debugging for Angular2 Applications?

Steps to recreate

1. Create a new Project using this template
2. Create Breakpoint in file counter.component.ts at method "incrementCounter()"
3. Press F5 to run
4. Navigate to "Counter" Page and press the "Increment" Button

Current behavior

The breakpoint is not hit. Hovering over the breakpoint will display the message "The breakpoint will not currently be hit. No symbols have been loaded for this document.

Expected behavior

I would like to have client side typescript debugging enabled as well as server side ASP.NET Core debugging.
So i would expect the breakpoint to be hit and the execution to pause at this breakpoint.

Unable to connect to web 'IIS Express'

Installed product versions

• Visual Studio: [example 2015 Professional] on Windows 7 Enterprise
• This extension: [example 1.1.21]

Description

I am using this template and ater creating a project from it I get "Unable to connect to web 'IIS Express'" found that launchSettings.json just contains a single profile which is IISExpress that always fails

Current behavior

Unable to connect to web 'IIS Express'

Expected behavior

to be able to debug after F5

Package restore fails after creating Angular 2 Starter Application

Installed product versions

• Visual Studio: Update 3
• This extension: 1.1.37
• cmd.exe dotnet --version gives "1.0.0-preview2-003133"

Description

Package restore fails on:
Microsoft.AspNetCore.AngularServices
Microsoft.Extensions.Configuration.CommandLine
with error message:
"Unable to resolve 'Microsoft.AspNetCore.AngularServices (>= 1.0.0)' for '.NETCoreApp,Version=v1.0'."

Steps to recreate

1. Install extension
2. Create new Angular 2 Starter Application
3. Restore will commence automatically
4. Restore fails

Do I have a version mismatch somewhere? How can I debug this further?

Update:
Came back to work the next day. Tried to Restore Packages by right clicking "References" in the projects. Works just fine now :)