CODEWITHSUNDEEP
angular
Joe
Joe

Reputation: 7004

The name 'angular' does not exist in the current context - angular 2, using material design css

I'm trying to include some default themes in my angular 2 application (in visual studio 2015).

I've added the following css line in my header, as it's done in the demo app:

<link href="@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

But I'm getting the error The name 'angular' does not exist in the current context.

I also found this guide. However, I can't seem to get any of the steps to work. I presume the "@angular" isn't working because I'm not using the "CLI". However, I can't get any form of direct reference working either.

I can find the css file in my D:\Projects\ProjectName\ProjectName\node_modules\@angular\material\core\theming folder fine, but I can't find any way to reference it.

This produces the same error as above:

<link href="./node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

Is there some issue with the '@' in the filename? I might be making a really obvious error, as this is my first proper web application.

Upvotes: 2

Views: 676

Answers (2)

sau
sau

Reputation: 21

Maybe you have RAZOR View Engine parsing exception ?

'@' - razor server side system symbol ,

if you want used this symbol on src link - declare on view: @{ var @angular = "@angular"; }

Upvotes: 2

hakany
hakany

Reputation: 7254

Could you add node_modules/ prior to @angular?

this is also descriped in https://github.com/angular/material2/blob/master/docs/theming.md

another option is to add to styleUrls in your component: @Component({ templateUrl: 'my-template.html', styleUrls: ['node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css'] })

Upvotes: 0

Related Questions