Skip to content

Asp.Net Core & Angular 4 (aka Angular 2) SPA with Webpack 2 full featured application. Some concepts taken from ASP.NET Core & ASP.NET CORE SPA generators, angular2-webpack-starter with Angular best practices and guidelines, all baked into one. Live demo:

License

Notifications You must be signed in to change notification settings

geminiyellow/AspNetCoreSpa

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 Cannot retrieve latest commit at this time.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build status Build status Join the chat at https://gitter.im/aspnetcorespa/Lobby MIT license

Features

Pre-requisites

  1. .Net core sdk
  2. Either VSCode with C# extension OR Visual studio 2015 update 4 with .Net Core tooling
  3. Nodejs

Make sure you have Node version >= 6.0 and NPM >= 3

Installation

1. Clone the repo
    git clone https://github.com/asadsahi/AspNetCoreSpa
2. Change directory to our repo
    cd AspNetCoreSpa
3. dotnet restore
4. Install global dependencies
    npm install protractor rimraf -g
5. npm install
6. Run the app (Development mode):
    i) One way:
        F5 (This will automatically launch browser)
    ii) Another way
        set ASPNETCORE_ENVIRONMENT=Development
        `dotnet run` (for single run) OR `dotnet watch run` (in watch mode)
        Browse using http://localhost:5000 or http://localhost:5001 
7. Run the app (Production mode):
    npm run build:prod
    set ASPNETCORE_ENVIRONMENT=Production
    `dotnet run` (for single run) OR `dotnet watch run` (in watch mode)
    Browse using http://localhost:5000 or http://localhost:5001 

Other commands

run Angular tests

npm test
# this will also create coverage remaped to typescript files in coverage folder after test run completes

watch and run Angular tests

npm run test:watch

Typescript documentation

  • Steps to generate:
    • npm run docs
    • cd docs
    • http-server

Compodoc Angular documentation

  • Steps to generate:
    • npm i compodoc -g
    • npm run compodoc
    • cd documentation
    • http-server
### run end-to-end tests
```bash
# make sure you have your server running in another terminal (i.e run "dotnet run" command)
npm run e2e

run webdriver (for end-to-end)

npm run webdriver:update
npm run webdriver:start

run Protractor's elementExplorer (for end-to-end)

npm run webdriver:start
# in another terminal
npm run e2e:live

AOT - Ahead of time compilation DON'TS

The following are some things that will make AOT compile fail.

  • Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time.
  • Don’t use default exports.
  • Don’t use form.controls.controlName, use form.get(‘controlName’)
  • Don’t use control.errors?.someError, use control.hasError(‘someError’)
  • Don’t use functions in your providers, routes or declarations, export a function and then reference that function name
  • Inputs, Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public

How to run in docker on windows: more info

  • Install docker for windows (this will install HyperV linux host on windows)
  • npm run build:prod
  • dotnet publish
  • docker build bin\Debug\netcoreapp1.1\publish -t aspnetcorespa
  • docker run -it -d -p 85:80 aspnetcorespa
  • Navigate http://localhost:85

Azure MSDeploy command

  • Use your site url, username, password
"C:\\Program Files\\IIS\\Microsoft Web Deploy V3\\msdeploy.exe" -verb:sync -enableRule:AppOffline -source:contentPath="%USERPROFILE%\AspNetCoreSpa\bin\release\netcoreapp1.1\publish" -dest:contentPath="aspnetcorespa",ComputerName="https://yoursitename.scm.azurewebsites.net/msdeploy.axd",UserName='yourusername',Password='yourpassword',AuthType='Basic'

About

Asp.Net Core & Angular 4 (aka Angular 2) SPA with Webpack 2 full featured application. Some concepts taken from ASP.NET Core & ASP.NET CORE SPA generators, angular2-webpack-starter with Angular best practices and guidelines, all baked into one. Live demo:

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • C# 41.3%
  • TypeScript 37.1%
  • HTML 11.3%
  • JavaScript 6.9%
  • CSS 1.9%
  • PowerShell 1.5%