2

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.

Joe
  • 6,773
  • 2
  • 47
  • 81
  • I am guessing that the build pipeline is not serving `node_modules`. In your browser type the whole url e.g. `localhost:9000/node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css` and test it. – bhantol Oct 21 '16 at 13:53
  • http://localhost:49954/node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css gives a 404 – Joe Oct 21 '16 at 13:56
  • Make sure your server is serving from additional root. You can post how you are serving your app (e.g. gulp serve or webpack or grunt) to help. – bhantol Oct 21 '16 at 13:57
  • Those keywords helped me find what I'm looking for: http://stackoverflow.com/a/35527667/1305699. I think to keep it simple I'll just copy over files I need. Thanks! – Joe Oct 21 '16 at 14:10

2 Answers2

2

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"; }

sau
  • 21
  • 2
0

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'] })

hakany
  • 7,134
  • 2
  • 19
  • 22