1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Component compiling problem

rallyup pro asked 6 years ago

Hello! We started to integrate ng-mdb-pro using your 5 minute tutorial and faced a one problem. Package is installed, webpack successfully bundled all we need, but on site startup i got : Expected 'styles' to be an array of strings. That point to: https://www.screencast.com/t/X5lETEW8qwJg Where compMeta.styles is empty array. So it seems that compiler failed to build ProgressBarComponent. I'm not sure what can caused this, but it seems that component failed to locate it's styles:  https://www.screencast.com/t/0gf77uKJs

Damian Gemza staff commented 6 years ago

Dear rallyup, Are you getting this error while ng serve / ng build or in which situation? Which compiler are you using to compile your project? Best Regards, Damian

rallyup pro commented 6 years ago

Hi Damian, we aren't using angular CLI.Project is hosted via ASP.NET Core so we see this error when running project on IIS express or published to local iis. We are using angular-compiler 5.2.1. I thought that might be an webpack configuration problem so i can provide you webpack config we using if needed.

Damian Gemza staff commented 6 years ago

Dear Rallyup, For ASP.Net configuration, please read our tutorial: https://mdbootstrap.com/angular/5min-quickstart/ . For now, MDB Angular is not fully compatible with ASP.Net Core applications. You cannot create an app from Angular Template in Visual Studio, because this template haven't got .angular-cli.json file. This file is needed for now for proper use of MDB Angular. If you'll create an app with our tutorial, everything should works just fine. Best Regards, Damian

rallyup pro answered 6 years ago

I was able to solve this issue. As i said there was a problem in webpack configuration, so  i added a separate loader for scoped styles. After that MDB Angular Pro started to work as expected.

Damian Gemza staff commented 6 years ago

Could you show me this loader?

rallyup pro commented 6 years ago

My loaders configuration for styles look like this: { test: /.component.scss/, use: [ { loader: "to-string-loader" }, { loader: 'css-loader' }, { loader: "sass-loader", options: { fallback: 'css-loader' } }] }, { test: /.css$/, use: ExtractTextPlugin.extract(["to-string-loader", "css-loader"]) }, { test: /.scss$/, exclude: /.component.scss$/, use: ExtractTextPlugin.extract(["to-string-loader", "css-loader", "sass-loader"]) }, Here it is. So *.component.scss are loaded/cached via angular and rendered as tag. For other styles i have bundled *.scss file.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
rallyup
Pro User 19Support score
1Questions 1Answers 0Snippets