question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to provide styleUrl for the Angular component

See original GitHub issue

I have downloaded this github application and able to run successfully by loading all single spa applications. But I am facing one problem when specify the style url in Angular component.


@Component({
    selector: 'app5',
    styleUrls:["./app5.component.scss"],_
	template: `
		<div style="margin-top: 100px;">
            <img [src]="angularImg" style="width: 100px;"/> <br />
			This was rendered by App5 which is written in Angular 6
		</div>
        <br />

I have installed all the dependencies required for style loader ,scss loader , post css loader but finally I am getting the below error .

ERROR in ./src/app5.component.scss
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: No PostCSS Config found in: C:\MyCave\jStudio\LinqIndepth\CSharp.Linq\MicrofrontEndResearch\SingleSpaPortal\Application\app5Angular\src
    at config.load.then (C:\MyCave\jStudio\LinqIndepth\CSharp.Linq\MicrofrontEndResearch\SingleSpaPortal\Application\app5Angular\node_modules\postcss-load-config\src\index.js:55:15)
 @ ./src/app5.component.ts 46:21-53
 @ ./src/main-module.ts
 @ ./src/singleSpaEntry.ts
 @ multi (webpack)-dev-server/client?http://localhost:9005 src/singleSpaEntry.ts
i 「wdm」: Failed to compile.

for resolving this error I have installed postconfig package also , but still I am getting the same error is there any workaround for this??

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6

github_iconTop GitHub Comments

1reaction
fireappsAdmincommented, Aug 14, 2018

The lightest weight postcss config is the one I listed above. module.exports = { map: false, from: './your/directory/path', to: './yourOutputFolder', } Just create a postcss.config.js file in your src directory and copy and paste the code in. This is also the example they give on their website. I have postcss up and running with that config on single-spa-portal-example.

1reaction
fireappsAdmincommented, Aug 14, 2018

Hi there, Do you have a postcss.config in your directory? This is what mine looks like in my src folder. module.exports = { map: false, from: './src/assets/styles', to: './dist', }

It describes here how to make the config file if you want too.

Hope that helps!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Fails to style with styleUrls in Angular component's scss file
The scss stylesheet in the container component controls the styles for all pages. The global.sccs only contains imports, no styling and doesn't ...
Read more >
Unable to load component style url for loading the scss #10
I have loaded successfully the single spa angular , but when I specify the style url I am getting the below error at...
Read more >
Component styles
There are several ways to add styles to a component: By setting styles or styleUrls metadata; Inline in the template HTML; With CSS...
Read more >
Chapter 4, Understanding and Using Angular Components
The decision between using styles and styleUrls is one of personal preference and has no impact on the final performance of the application....
Read more >
9. Working with styleUrls and styles option in the angular ...
... we will see what are the different options present in styling the components in the angular. ... Your browser can't play this...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found