Not working in angular 6

[Rushikesh-lrm]

This is an issue on angular 6. I Am doing everything exactly same as given but it's still shows something like above HTML

`
      <mat-card>
          <mat-card-title>
            Rushikesh Jain
            <mat-divider></mat-divider>
          </mat-card-title>

          <mat-card-content>
            <b>Average(Event) :- 4.5</b><br>
            <star-rating [starType]="'svg'" [rating]="2.63"></star-rating>
          </mat-card-content>
          <mat-divider></mat-divider>
      </mat-card>

      <mat-card class="ml-10">
          <mat-card-title>
            Rushikesh Jain
          </mat-card-title>
      </mat-card>

`

CSS @import '../../../../node_modules/css-star-rating/scss/star-rating.scss';

module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';

import { FuseSharedModule } from '@fuse/shared.module';

import {MatSelectModule} from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FlexLayoutModule } from '@angular/flex-layout';
import {MatTableModule} from '@angular/material/table';
import {MatCardModule} from '@angular/material/card';
import { MatInputModule,MatDividerModule} from '@angular/material';
import { userProfileService } from 'app/main/user-profile/user-profile.services';
import { UserProfileComponent } from './user-profile.component';
import {StarRatingModule} from 'angular-star-rating';

const routes = [
    {
        path     : 'userprofile',
        component: UserProfileComponent
    }
]; 

@NgModule({
    declarations: [
        UserProfileComponent,

    ],
    imports: [
        RouterModule.forChild(routes),

        TranslateModule,

        FuseSharedModule,

        MatSelectModule,
        MatFormFieldModule,
        FlexLayoutModule,
        MatTableModule,
        MatCardModule,
        MatInputModule,
        MatDividerModule,
        //MomentDateAdapter,
      //  FormControl

        StarRatingModule.forRoot(),

    ],
    exports     : [
        UserProfileComponent,

    ],
    providers : [
        userProfileService,

    ]
})

export class userProfileModule
{
}

[sdsanders]

Are you sure you're importing the CSS correctly? I just set this up following the install directions and it works fine. If I break the CSS import I see something similar to the screenshot you posted. Rather than trying to go up several directories, you can import it like this:

@import '~css-star-rating/scss/star-rating';

[animatedantmo]

For what its worth, I had this exact same issue (using Angular 6 too). Turns out the import needs to be done literally in the styles.scss file

The documentation does say this but that fact was lost on me 😂

Hope this helps someone else.

[harsh-pamnani]

@Rushikesh-lrm I am still facing the same issue. Did you find any solution for the same?

[Recodify]

I was having this same issue. I got around it in the end by referencing the scss in my angular.json styles array: