Interface in Angular 2 with VS2015 and C#

Angular 2 interface gives VS intellisense  ability to find error during compile time instead of run time

Advertisements

Angular PIPES

Transform data before display. For example, lower case to upper case, date formatting etc.

Built in pipes include lowercase, uppercase, decimal, date, percent, currency etc

To read more about angular built-in pipesTo read more about angular built-in pipesPipe URLDate https://angular.io/api/common/DatePipeDecimal https://angular.io/api/common/DecimalPipeCurrency https://angular.io/api/common/CurrencyPipePercent https://angular.io/api/common/PercentPipe

Change loading (Spinning) splash icon for VS2015 angular 2 project

By Default, when I load angular project, this what I see at the beginning when I run the application:

 

a26

 

I would like to change it something look like:

a27.PNG

 

Solution:

Add the following css code in the skyle.css file in here:

a28.PNG

 

 

/* Absolute Center Spinner */
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

/* Transparent Overlay */
.loading:before {
content: ”;
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
/* hide “loading…” text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}

.loading:not(:required):after {
content: ”;
display: block;
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}

 

Change the code in index.html file with following code:

a29

 

Loading

 

Don’t forget to Delete your cookies in IE browser to see the effect of this change.

VS2015 Add Bootstrap and jquery with Angular 2

  1. Run Node.js command prompt (start–>run–>node.js)
  2.  a22
  3. Find the project location from VSa23
  4. In command prompt, navigate to that project directory
  5. cd “c:\Users\xxxxxxxx\Documents\Visual Studio 2015\Projects\NDAdmin\NDAdmin”
  6. Run the installation command:
  7. npm install bootstrap@3 jquery –save
  8. Show hidden folder–>Right click on bootstrap and jquery–>Include in Projecta24
  9. In the Index.html file, add the following lines:
  10. /node_modules/jquery/dist/jquery.min.js
    <link href=”/node_modules/bootstrap/dist/css/bootstrap.min.css” rel=”stylesheet” />
    /node_modules/bootstrap/dist/js/bootstrap.min.js

Thats all 🙂

Setting Up VS2015 for Angular 2 Project step by step and run the angular project using F5 key

    1. Create an empty VS ASP.NET Projecta1a2
    2. Download angular from here and unzip the downloaded zip file
    3. Copy the 4 items as selected bellow from the unzipped foldera4
    4. Open the home folder of the VS projecta3
    5. Paste the copied files to the main project folder. (Not in the location where you see the .sln file) a5
    6. Here it should look like after you paste all files:a6
    7. Now click on show all icon in solution explorer and you should see all copied folders and files in the VS:
    8. a7a8
    9. Select the following files and right click and select Include in the project and select Yes when you get Typescript message
    10. Now restore all packagesa12
    11. You should see the tree view in the output windowa13
    12. Click 2 times in the show all files icon to see node_modulesa14
    13. Expand the node_modules and select the following folders and right click and include in the projecta16
    14. Now open the index.html file and change the followingsa17a18
    15. Now open the system.config.js and modify as bellowa19a20
    16. Press F5 and you should see the Hello Angular. But if you get this error:a21
    17. Add the following line in that file right after :{
    18. “noStrictGenericChecks”: true,

 

Error TS2415 Class ‘Subject’ incorrectly extends base class ‘Observable’.

After you setup angularjs 2 in your visual studio 2015, if you get this error:

 

Severity Code Description Project File Line Suppression StateSeverity Code Description Project File Line Suppression StateError TS2415 Class ‘Subject<T>’ incorrectly extends base class ‘Observable<T>’.  Types of property ‘lift’ are incompatible.    Type ‘<R>(operator: Operator<T, R>) => Observable<T>’ is not assignable to type ‘<R>(operator: Operator<T, R>) => Observable<R>’.      Type ‘Observable<T>’ is not assignable to type ‘Observable<R>’.        Type ‘T’ is not assignable to type ‘R’. TypeScript Virtual Projects C:\Users\xxxxxxx\Documents\Visual Studio 2015\Projects\Angular2Demo\Angular2Demo\node_modules\rxjs\Subject.d.ts 16 Active

 

All you have to do is:

Open this file:

tsconfig.json

and add the following line:

 

“noStrictGenericChecks”: true,

 

inside  “compilerOptions”: {

 

the entire file should look like:

 

{
“compilerOptions”: {
“noStrictGenericChecks”: true,
“target”: “es5”,
“module”: “commonjs”,
“moduleResolution”: “node”,
“sourceMap”: true,
“emitDecoratorMetadata”: true,
“experimentalDecorators”: true,
“lib”: [ “es2015”, “dom” ],
“noImplicitAny”: true,
“suppressImplicitAnyIndexErrors”: true
}
}

VS2013 An exception occurred while initializing the database

I’m doing a code first Entity database

{“An exception occurred while initializing the database. See the InnerException for details.”}

It was working fine, but I decided to delete the physical database to see it recreate it, but it just fails every time.

I get the error

Cannot attach the file ‘C:\ASP\OdeToFood\OdeToFood\App_Data\OdeToFoodDb.mdf’ as database ‘OdeToFoodDb’.”}

Its code first so I don’t understand why its not recreating the database.

 

 

So deleting the file from Visual Studio was a dumb idea.

SQL still has it registered.

Fire up MS Sql Management Tool, connect to the server in my case

(localdb)\v11.0

You will see the database, still exists, delete it, you will get an error. The file doesn’t exist. Refresh and its gone from SQL. Now run your code again and all is good.

So delete the DB from the management tool not visual studio