When I generated a new component with Angular CLI I always got a new component with params:
#Component({
selector: 'app-test1',
templateUrl: './test1.component.html',
styleUrls: ['./test1.component.css']
})
But now something goes wrong. When I use ng g c [name] I get one more additional param, which I have to import into component, I mean encapsulation: ViewEncapsulation.None
#Component({
selector: 'app-test1',
templateUrl: './test1.component.html',
styleUrls: ['./test1.component.css'],
encapsulation: ViewEncapsulation.None
})
I was trying to reinstall node/angular cli and etc. No result. What do I have to do to create a new components without parameter "encapsulation"
Thanks in advance
Depending on the version of the cli you are using there may be an option that you have set in your config. See if you have the following in your .angular-cli.json
"component": {
"viewEncapsulation": "None"
},
That being said there is a defect in 1.5.0 of the CLI that I found when testing this issue. https://github.com/angular/angular-cli/issues/8383
ViewEncapsulation defaults to Emulated for v2, v4, and v5 of Angular. So if you just remove encapsulation: ViewEncapsulation.None, which is now added to the generated component in v1.5 of the Angular CLI, or change it to encapsulation: ViewEncapsulation.Emulated you'll be using the default.
This can be removed automatically during component generation using the Angular CLI by adding the component ViewEncapsulation defaults to the angular.cli.json see wiki for all available keys.
"defaults": {
"styleExt": "scss",
"component": {
"viewEncapsulation": "Emulated"
}
}
There are three enumerated types of ViewEncapsulation to choose from: Emulated, Native, and None if you're not familiar with ViewEncapsulation see docs. If you're not familiar with ViewEncapsulation and how it relates to the shadow DOM this is a good article.
If you choose to do this manually for each component you'll need to import ViewEncapsulation, which is at the time of writing is missing from the generated component.
import { Component, OnInit, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss'],
encapsulation: ViewEncapsulation.Emulated
})
export class ExampleComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
UPDATE
A PR was pushed and merged for https://github.com/angular/angular-cli/issues/8374 that solves this issue. Currently it is only on master so the above will be a stopgap till the do a minor release. After the release if you read the PR everything will be like it was previously.
As #mtpults says, PR was pushed and merged for https://github.com/angular/angular-cli/issues/8374 that solves this issue. Currently it is only on master so the above will be a stopgap till the do a minor release. After the release if you read the PR everything will be like it was previously.
Related
Just for fun, I'd like to use the javascript library cool-ascii-faces in my Angular application. I followed the instructions in the blog "How to use external JavaScript Libraries in Angular 8".
I did the following things:
installed cool-ascii-faces per npm in my Angular project under node_modules.
In angular.json, added these two scripts to both build and test section:
"scripts": [
"./node_modules/cool-ascii-faces/cli.js",
"./node_modules/cool-ascii-faces/index.js"
]
My app.components.ts looks like this:
import { Component, OnInit } from '#angular/core';
declare var coolFace: any;
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass']
})
export class AppComponent implements OnInit {
ngOnInit(): void{
console.log(coolFace());
}
}
But, in the console I only see: ReferenceError: coolFace is not defined. What have I done wrong?
Thank #Andres O. Serrano for his advice. I tried both approach, neither worked.
But I came up with another solution. Simply store all the ascii faces in a Json file under /asset. Then follow the instruction in the blog "How to Read Local JSON file in Angular". It works like a charm. Thanks!
how to import ouibounce npm package to Angular 6?
ouibounce GitHub repo
ouibounce npm package
Please help me to find out how to import ouibounce npm package to angular. I can install it via npm, but don't know how to import it.
I have created a full working example on GitHub.
The highlights for your question are as follows.
In the project directory run: npm install --save ouibounce
Then to utilize it in a component, you will need to give it a reference to a dom element. The way I'm doing that is through Angular's ViewChild decorator.
In the app.component.ts file I have:
import { Component, ElementRef, ViewChild, AfterViewInit } from '#angular/core';
import * as ouibounce from 'ouibounce';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
title = 'ng-ouibounce';
#ViewChild('modal') modal: ElementRef;
ngAfterViewInit() {
ouibounce(this.modal.nativeElement, { aggressive: true });
}
}
In the app.component.html I have <div #modal class="modal">hello world!</div>
The #modal attribute gets matched when Angular creates the AppComponent and assigns its value to the modal property. This is only available at a certain point in the lifecycle of the component, which is why I'm accessing it in the ngAfterViewInit method.
I don't fully understand the ouibounce library, but outside of setting up the mouse listening events to evaluate when the mouse is going off the page, it seemingly only changes the display of the element it is given to display: block;. I have a number of styles in the styles.css file that are just there so that it is readily apparent that the library is working when you pull down the example.
So I am currently trying to use some jquery plugins like Magnific-Popup etc in my Angular 4 application but I'm having some trouble. I installed jquery by doing npm install --save-dev #types/jquery in my terminal and that worked fine, but I'm having trouble getting the actual plugins to work. This is what I tried initially,
#Component({
selector: 'app-showcase',
templateUrl: './showcase.component.html',
styleUrls: ['./showcase.component.css']
})
export class ShowcaseComponent implements OnInit {
#ViewChild("elementRef") elref2: ElementRef;
constructor(private elRef: ElementRef) { }
ngOnInit() {
jQuery(this.elref2.nativeElement).magnificPopup();
}
ngAfterViewInit() {
}
In order to get typescript to recognize the magnificPopup() function, I tried importing the scripts from the magnificPopup documentation into my index.html (at the bottom of the body tag), but as far as I can tell that is not working. Webstorm says "can not resolve file jquery.magnific-popup.js". I'm also loading the jquery.min script as well, and that seems to work fine.
I also tried running npm-install magnific-popup, but that also failed. Additionally, I tried adding the script into the angular.JSON file but to no avail.
I guess what I'm asking is, what is and how can I go about installing and using a third-party jquery plugin like magnific-pop up into my angular 4 application?
Thanks, any help is appreciated.
I have an Angular project where I need to use (for now) a jquery dependent plugin (nanoscroller). I use angular-cli to do all my build processes and my angular-cli.json file has the following under the "scripts" property:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/nanoscroller/bin/javascripts/jquery.nanoscroller.js"
]
Then I use the plugin as follows:
import { AfterViewInit, Component, ElementRef, OnDestroy, Renderer, ViewChild } from "#angular/core";
declare var jQuery: any;
#Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent implements AfterViewInit {
layoutMenuScroller: HTMLDivElement;
#ViewChild("layoutMenuScroller") layoutMenuScrollerViewChild: ElementRef;
constructor() {
}
ngAfterViewInit() {
this.layoutMenuScroller = <HTMLDivElement>this.layoutMenuScrollerViewChild.nativeElement;
jQuery(this.layoutMenuScroller).nanoScroller({ flash: true });
}
// etc..
}
Perhaps you can adopt this to your use-case.
I was refactoring my Angular 2 component code giving some tabulations and then the code stop working, when I removed the tabulation (spaces) it worked again.
#Component({
templateUrl : './app.component.html',
styleUrls : ['./app.component.scss'],
encapsulation : ViewEncapsulation.None
})
export class AppComponent {}
The above code doesn't work. This works:
#Component({
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {}
It is a really weird behaviour.
UPDATE:
I'm using webpack with awesome-typescript-loader and angular2-template-loader, this is the code transpiled:
With tabs and spaces compile to this:
But, without the tabs and spaces compile to this:
It seems like the webpack loaders are not recognizing the code with spaces between the ":" of the object decorator definition.
Yep, it was the Angular2-template-loader. Updating to v0.6.0 fix the issue.
I'm reading lots of articles on this matter like this, and this and also this but each one of these articles starts from a situation in which the NG1 service is a class and can be exported.
I'm in a very different situation, i often have multiple services in the same file and they are defined in a very old style manner like
angular.module('App.services').factory('SessionService',
function() {
var defer = $q.defer();
[...]
}
);
No class, no export.
And this stuff is directly linked in the page with an old fashioned <script src="...">
At the same time i'm trying to create new directives in Angular2 and these directives need those old fashioned services.
I get i should be able to write something like this
import {Injector,Component, Directive, ElementRef, Input, View} from 'angular2/core';
var injector = Injector.resolveAndCreate([
SessionService
]);
var SessionService = injector.get(SessionService);
#Component({
selector: 'nav-bar'
})
#View({
templateUrl: '/app/components/navbar/navBar.html'
})
export class navBar {
constructor() {
}
}
but of course SessionService object is not found.
How can i get out of this mess?
[Additional Info]
Using babel as transpiler
angular2-annotations plugin added
A great article to understand the difference between Annotations and Decorators in angular2: http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html
You simply need to leverage #Inject:
#Component({
selector: 'nav-bar'
templateUrl: '/app/components/navbar/navBar.html'
})
export class navBar {
constructor(private #Inject('SessionService') sessionService) {
}
}
See this plunkr for more details: http://plnkr.co/edit/U6ygjUUQ04mTGAAaC1pZ?p=preview
You can notice that with factory you can't use classes. It's only possible with services...
If you use ES6 only, you could try this:
#Component({
selector: 'nav-bar'
templateUrl: '/app/components/navbar/navBar.html'
})
export class navBar {
constructor(sessionService) {
}
static get parameters() {
return [[ new Inject('...'), new Inject('...') ]];
}
}