Salient Soft

Update 30/5/2017

Re the comment below on the stylesheet link tags not being honoured in index.html, it may still be ok to do this when the css is somewhere under the assets folder, as webpack loads these. I hit this on the Learning Tree angular course in an exercise, course 2324 ex 2.1, and moving a css folder from the src level to under the assets folder solved the problem – prior to this I was getting net errors on all the stylesheets (interestingly the exercise was originally set up wrong, which proved useful when diagnosing this issue) . This therefore may still be an alternative in some cases to using angular-cli.json.

Original Post

This is pretty much covered here, but salient points/commands as follows:-

ng new places-admin –style=scss
cd places-admin
npm install primeng –save
npm install @angular/animations
npm install font-awesome –save
ng serve

• Note the use of –style=scss as the default is plain css.
• angular animations are used for angular 4
• font awesome is used and needs to be both installed as above and added as a dependency in package.json along with primeng (this was already done automatically when I looked).
• Note that you need to import either BrowserAnimationsModule or NoopAnimationsModule in addition to BrowserModule – the post above mentions this but does not actually do it in the sample code:-

import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
...

@NgModule({
declarations: [
…
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Styles configuration issue

Per the setup instructions above I initially just configured the style sheets with link tags in index.html:-

<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" />

 

When I did this alone, the style sheets would not resolve at run time. Per some online post suggestions I tried various alternative path prefixes such as “/node_modules”, “./node_modules”, and “../node_modules” but none would resolve. When I looked in the chrome inspector I was getting 404s on all the style sheet loads. I checked the file system and all the referenced files were present under node_modules, but they were just not available to the web server/were not being served. It appears that this is a consequence of the way that angular-cli and webpack package up the application. I then tried adding the style references specifically to .angular-cli.json as per the instructions :-

"styles": [
  "../node_modules/primeng/resources/primeng.min.css",
  "../node_modules/primeng/resources/themes/omega/theme.css",
  "../node_modules/font-awesome/css/font-awesome.min.css",
  //...
],

This worked and the styles/theming did resolve correctly. In fact, the static link references were not used at all and could be removed.

When examining components which used the css with the Chrome inspector, the css rules were being taken from style blocks directly, so this was clearly a packaging issue.

For dynamic theme switching, it may therefore be necessary to move the themes under the app resources and use a dynamically changed <link> tag or similar to select the target theme – this is the way that the PrimeNG Showcase does its theme switching, and there is no evidence at present of any other theme switcher component.

No Comments »