I have the following in my component:
#Component({
selector: 'Leaders',
template: require('./Leaders.component.html'),
styleUrls: ['./bootstrap.component.css']
})
The component was loading fine before I added this style sheet to it. When I attmept to run my web application it says that it, "Can't read the URL" of where my css file is. This css file is in the same folder as my Leader html page is yet it cant find the file. What am I doing wrong and how can I fix it?
you are using an older version of Angular2. For the newer versions the syntax that is used is:
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
notice there is no require() that shouldn't be there.
I cannot comment I will write this as an answer.
is there a specific reason for using require(...) in template.
if not, try this and make sure your css file name is spelled correctly:
#Component({
selector: 'Leaders',
templateUrl: './Leaders.component.html',
styleUrls: ['./bootstrap.component.css']
})
hope this helps!
Related
I am working on creating a page with dark mode which has completely different CSS. If I add its CSS files in angular.json under styles
"styles": [
"src/styles.scss",
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
"node_modules/datatables.net-select-dt/css/select.dataTables.css",
"node_modules/ngx-toastr/toastr.css",
"src/assets/scss/black-dashboard.scss"
],
but this is impacting other pages since CSS adding globally and not to a single page as required.
If I want to import it in .ts file, I am not getting how do I link to src folder from any component.ts file.
#Component({
selector: 'app-chart',
templateUrl: './chart.Component.html',
styleUrls: ['./chart.Component.css', '../../..src/assets/scss/black-dashboard.scss']
})
please help me to know how to add a SCSS group of files at component level *.component.ts
start with one point,it says now u here in this folder that with two points go upfolder to src than goes to scss file.
#Component({
selector: 'app-chart',
templateUrl: './chart.Component.html',
styleUrls: ['./chart.Component.css', './../../../src/assets/scss/black-dashboard.scss']
})
I have an Ionic 3 app and I decide to migrate to version 4. Some pages doesn't recognize the scss file from the typescript component.
#Component({
selector: 'car-id',
templateUrl: 'car-id.page.html',
styleUrls: ['card-id.page.scss']
})
The main aspect is that some pages work without problems.
This is the error
[ng]
[ng] ERROR in ./src/app/pages/car-id/car-id.page.ts
[ng] Module not found: Error: Can't resolve './card-id.page.scss' in '..\src\app\pages\car-id'
How can I fix this? Ty
Hope you are doing great!!!
Since you have not put the entire folder structure but, I guess it is not able to find the files from the current directory.
Try using ./ as below (if it is in the same current folder): -
templateUrl: './card-id.page.html',
styleUrls: ['./card-id.page.scss']
Also, please check whether the below is a typo or a deliberate change by you: -
selector: 'car-id', // is the same name used in the parent component?
templateUrl: 'car-id.page.html', // did you mean card here?
styleUrls: ['card-id.page.scss'] // did u mean car here?
Hope I was able to solve your problem! Happy Coding!! Cheers!!!
I am following the Angular tutorial on their website and I created some components, templates and styles.
I am having trouble including my styles in the components using the 'styleURLs' property of the '#Component' decorator. This is what I have,
#Component({
selector: 'curries',
templateUrl: '../Views/curries.component.html',
styleUrls: ['../../../assets/styles/curries.component.css'],
providers: [CurryService]
})
export class CurriesComponent { // blah blah
As one can see, I put my styles inside the 'assets/styles' folder.
This is my folder structure,
/src
/app
/Views
/Components
/curries.component.ts
/Services
/Models
/assets
/images
/styles
-curries.component.css
I want to know if this is even possible; to have a style document in a different folder and have it referenced in the component.
I am just trying to de-clutter my files in the app directory, and I read somewhere that the images and styles need to be in the 'assets' folder (which is kind of a 'Content' folder, hence it makes sense)
Any help is appreciated :)
p.s. This is the error I get when I build the app
ERROR in ./src/app/Components/curries.component.ts
Module not found: Error: Can't resolve
'../../../assets/styles/curries.component.css' in
'~\AngularProjects\HelloWorld\src\app\Components'
resolve '../../../assets/styles/curries.component.css' in
'~\AngularProjects\HelloWorld\src\app\Components'using
description file: ~\AngularProjects\HelloWorld\package.json (relative
path: ./src/app/Components)
I think you dereferenced 1 level too far. so it should be ../../assets...
That being said, I believe it's generally "best practice" to keep your component specific styles alongside your component files.
Instead of breaking things up by view/component/service/model, break it up by component. we generally have sometihing like :
/src
/app
/compoenents
/curries
curries.component.ts
curries.component.css
curries.component.html
/shared
{ put and shared modules here }
/assets
/images
/styles
{ global styles go here }
https://angular.io/guide/styleguide has a bunch of information on this.
the references(for styles of template url`s) are relative to the "Index.html" your main html page.
Yes you can access any style within the styleUrls array
https://angular.io/guide/component-styles#style-urls-in-metadata
See this Plunker for a good example of referencing other .css files in different paths
#Component({
selector: 'my-app',
template: `
<h1>Title</h1>
<p>Hello...</p>
<span>... world!</span>`,
styleUrls: [
'app/app1.component.css',
'testing/app2.component.css'
]
})
So from Load external css style into Angular 2 Component it seems that including css from an external url by putting it into the styleUrls[] worked for angular 2. It does not work for Angular though (it just searches for the css sheet under the directory). I can't find any documentation regarding this so I'm just hard-coding it into the entire index.html page for now. How can I get it to work for individual components?
Edit: To clarify, by external css I mean something like this: https://www.w3schools.com/w3css/4/w3.css, not something included in my project.
I know it is a bit late answer, but if somebody looks for solution:
You can use command line if you use nodeJS in your app folder write:
npm install --save w3-css
You should adjust then angular-cli.json in your src folder of your app and where you register styles type following:
"styles": [
"../node_modules/w3-css/w3.css",
"styles.css"
],
For including an external css (remote url)for an specific component. I've only found this way. For example for your app component.
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
in your app.component.scss you can import a remote url with the desired remote styles like this css file your were commenting.
#import url('https://www.w3schools.com/w3css/4/w3.css');
Even thought it is not a perfect solution, hope it helps.
i'm developing my first Angular2 app with Typescrypt. Here is an example of Component:
home.component.ts
import {Component} from '#angular/core';
#Component({
moduleId: module.id,
selector: 'home',
templateUrl: 'home.component.html',
styleUrls: ['home.component.css']
})
export class HomeComponent {
}
Since i have to process SASS files to get component-specific CSS, i created the following Gulp task:
gulpfile.js
gulp.task('create:styles', function(cb) {
return gulp.src('src/app/**/*.scss')
.pipe(sourcemap.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemap.write())
.pipe(gulp.dest(paths.dist + '/app/'));
});
As you can see i'm using sourcemaps Gulp plugin to map source files of styles.
As far as i know Angular injects component CSS files in HTML <style> element. So source mapping seems not to work for this reason.
Do you know any workaround to map CSS? I would figure out why i can't see the source files (.scss) in the inspection tools of browsers. What's wrong with sourcemaps plugin?
The answer is that there is nothing we can do at the moment. The feature request is still open on Angular2 Github repository: enter link description here
Taken from this SO answer and this article https://medium.com/#IMM9O/angular-cli-some-special-cases-f48059fb33e5
These flags on ng serve include sourcemaps.
ng serve -sm -ec
Or
ng serve --sourcemap --extractCss
It does not include source maps for the components stylesheets, as you asked, but only for global stylesheets that are included with the angular-cli.json config file. It's still better than nothing, especially because when inspecting an element, you can infer that the only CSS that is not mapped to a source file but to a <style> tag is the CSS of the component's stylesheet.
I'm using angular-cli version 1.0.0-rc.4