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'
]
})
Related
I wanted to include prebuilt theme for angular app. I included below line in app.component.css.
#import "../../node_modules/#angular/material/prebuilt-themes/indigo-pink.css";
I was surprised it didn't apply the theme to my app. Then from docs I inferred I should include, now it works but I am curious why?
#import "#angular/material/prebuilt-themes/indigo-pink.css";
Inside common stylesheet, style.css not app.component.css! and the path (../../node_modules/#angular/material/prebuilt-themes/indigo-pink.css) makes more sense than "~#angular/material/prebuilt-themes/indigo-pink.css"
I have following questions,
1.What does it needs import only in style.css an why not inside appcomponent.css?
2.Though the path ~#angular/material/prebuilt-themes/indigo-pink.cs leads to nothing, how is the angular-material could pick the theme?
3.What does '~' mean in the above path?
To give more info, I have included project structure
All the imports here are referenced relatively. It can be a hassle to remember how many folders to jump into and out of.
If you move your files around, you'll have to update all your import paths.
Let's look at how we can reference imports absolutely so that TypeScript always looks at the root /src folder when finding items.
Our goal for this will be to reference things like so:
import { HeaderComponent } from '#app/components/header/header.component';
import { FooterComponent } from '#app/components/footer/footer.component';
import { GifService } from '#app/core/services/gif.service';
This is similar to how Angular imports are referenced using #angular like #angular/core or #angular/router.
Setting Up Absolute Paths
Since TypeScript is what is in charge of transpiling our Angular apps, we'll make sure to configure our paths in tsconfig.json.
In the tsconfig.json, we'll do two things by using two of the compiler options:
baseUrl: Set the base folder as /src
paths: Tell TypeScript to look for #app in the /src/app folder
baseUrl will be the base directory that is used to resolve non-relative module names. paths is an array of mapping entries for module names to locations relative to the baseUrl.
Here's the original tsconfig.json that comes with a new Angular CLI install. We'll add our two lines to compilerOptions.
{
"compileOnSave": false,
"compilerOptions": {
...
"baseUrl": "src",
"paths": {
"#app/*": ["app/*"]
}
}
}
With that in our tsconfig.json, we can now reference items absolutely!
import { HeaderComponent } from '#app/components/header/header.component';
import { FooterComponent } from '#app/components/footer/footer.component';
import { GifService } from '#app/core/services/gif.service';
This is great because we can now move our files around and not have to worry about updating paths everywhere.
based on this:
/ - Site root
~/ - Root directory of the application
this can be useful too;
I have ASP.NET MVC as server and Angular as client application.
I do not have static index.html but it is index.cshtml. The styles I use are global styles, not component scoped.
My question is how do I go about working with the scss styles file (bunch of) with angular/webpack and MVC?
Do I have to manually import "global style files" in the app.component file? Do I do the same for vendor css files like bootstrap?
What is the best practice? I'm thinking something as follows:
import { Component } from '#angular/core';
import '../styles/myglobalStyles.css'
import '../styles/boostrap.min.css'
import '../styles/otherVendors.min.css'
#Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent { }
Another question is in ANGULAR CLI set up, what is done is to add following in angular-cli.json file. What does it do? Does it add styles.css file to the app.component.html during build? (Can you point out to any source/documentations?)
],
"styles": [
"src/styles.css"
],
You should use webpack to bundle all scss file and transform all scss file to css then extract it to file call lib.css then include it in Layout.cshtml since it global style for your application. Maybe to improve you can use something third party lib to uglify your css code also to improve performance
Cheers
the styles referenced in the component style styleURL metadata, inline in the component template or imported into the component enable CSS encapsulation meaning that they are scoped to the individual component to prevent collisions.
#Component({
selector: 'comp',
templateUrl: './comp.component.html',
styleUrls: ['./comp.component.css']
})
style scope doc https://angular.io/guide/component-styles#style-scope
To create global style rules that will be applied to any element you can add additional style files, including vendor css to the agular.json which will be bundled by webpack (which is embedded in the cli) and linked to the index.html.
add it to the styles array in angular.json:
"styles": [
"styles.css",
"../styles/boostrap.min.css"
],
see the docs on workspace configuration for angular cli
https://angular.io/cli#workspace-and-project-configuration
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
I am using a third party javascript library in my angular2 component. The skin css of the component tries to load images using relative url paths. I am using a component based architecture and likes to have all the component dependencies encapsulated.
Below is what I try to do, the skins library fails to locate the relative path images.
#Component({
moduleId: module.id,
selector: 'test',
templateUrl: 'test.html',
styleUrls: ['test.css', '../../external_lib/skins/skyblue.css'],
encapsulation:ViewEncapsulation.None
})
Is there any way to accomplish this ?
Currently the only workaround is to include the css in the index.html file.
When it comes to defining styles and template like styleUrl and templateUrl you should be very careful.
The problem is that it is your responsibility to make sure that given url will be accessible even after build.
To make it happen you can make your own task in grunt, gulp, npm or some other task runner or use bundler like webpack to use relative path which then will be translated to the production build.
In your example you have to point styleUrl to the path when it's located while serving whole app.