I can add angular2 providers easy to the UpgradeAdapter:
import { HTTP_PROVIDERS } from 'angular2/http';
upgradeAdapter.addProvider(HTTP_PROVIDERS);
I can upgrade an ng1 directives (component) also quite easy:
const DirectiveNg1 = upgradeAdapter.upgradeNg1Component('DirectiveNg1');
But I need DirectiveNg1 in many places and would like to use them in angular2 components. Is it somehow possible to get a reference back?
At the moment I have specified the following in my angular2 component and it works, but I'd like to only upgradeNg1Component('DirectiveNg1') once in me main.js file.
const DirectiveNg1 = upgradeAdapter.upgradeNg1Component('DirectiveNg1');
// how can I replace the line above, and get a reference from the UpgradeAdapter
#Component({
directives: [DirectiveNg1],
...
})
I know this post is a little old but this took me ages of internet searching to work out. I don't think the documentation for this is very good.
This simplest way is if you're just going to have one module. you can define it as follows.
import { NgModule, forwardRef } from '#angular/core';
import { UpgradeAdapter } from '#angular/upgrade';
export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule ));
const DirectiveNg1 = upgradeAdapter.upgradeNg1Component('DirectiveNg1');
#NgModule({
imports: [BrowserModule, HttpModule],
providers: [],
declarations: [DirectiveNg1],
exports: []
})
export class AppModule { }
now DirectiveNg1 can be used in angular2 components.
Related
So im making my own angular library.
I followed the steps listed here: https://angular.io/guide/creating-libraries
So i created the library and published it to npmjs.com.
My issue is, whenever I tried making a new component inside the library,
It seems like the intellisense recognizes that the component is there however when i try to run my angular application i get faced with this error:
ERROR in No NgModule metadata found for 'AppModule'.
Here is a snippet of the librarys module:
import { NgModule } from '#angular/core';
import { SlEcommComponent } from './sl-ecomm.component';
import { SlCatalogComponent } from './sl-catalog/sl-catalog.component';
#NgModule({
declarations: [SlEcommComponent, SlCatalogComponent],
imports: [
],
exports: [SlEcommComponent, SlCatalogComponent]
})
export class SlEcommModule { }
The component im trying to use is SlCatalogComponent. The other component, SlEcommComponent, seems to work but this is the component that was auto generated by the angular CLI.
So heres a snippet of the consuming projects appmodule:
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { CommonDataService } from './_services/common-data.service';
import { SignInComponent } from './sign-in/sign-in.component';
import { SlEcommModule } from 'sl-test';
#NgModule({
declarations: [
AppComponent,
SignInComponent,
],
imports: [
SlEcommModule
],
providers: [CommonDataService],
bootstrap: [AppComponent]
})
export class AppModule { }
And finally on the signin components template, im using a component from the library i made like this:
<sl-catalog></sl-catalog>
Im not sure what else im missing since the default component in the library works, and mine does not.
--Edit--
So ive narrowed down the problem to my npm package not having the a certain folder included when its being published.
After adding the "files": ["lib"] to the package.json everything seems to be working ok except the intellisense here is screwed up:
What seemed to fix my issue is adding "files": ["./src/lib"] to my package.json
I want to load the external jsp page content as template in my component in angular 6 application.
#Component({
selector: 'app-conrequest',
templateUrl:'mydomain.com:port/utils/registerUser.jsp',
styleUrls: ['./conrequest.component.css']
})
In the above code, I have mentioned the jsp page url, which I want to load as a template.
Please help me on this.
Thanks,
Suresh
First of all whichever external link you are using it should "return" something.
If there is no information in return it will always gives you an error.
Lets begin your answer...
Step 1- First you need to import HttpClient and Map
import { HttpClient } from '#angular/common/http';
import 'rxjs/add/operator/map';
Step 2- and your #Component decorator should look like this
#Component({
selector: 'my-template',
template: `<div [innerHtml]="myTemplate">
</div> `})
Step 3- in your class you can import your external template like...
export class TestComponent {
private myTemplate: any = '';
constructor(http: HttpClient) {
http.get('www.abc.com/index.html', {responseType: 'text'}).subscribe(data => this.myTemplate = data);
}
}
Step 4 - Also import httpClient in RootModule
imports: [
...
...
HttpClientModule
],
That's it. Try with yours.
Thanks
Sunil Sain
I am redesigning my app as to be more modular with the UI side of things, separating things out to have:
App header
Nav panel to the left
Main content to the right of the nav panel
I have managed to work out how to import a single component into the Angular way of things, importing the component into the app.module.ts and setting it in the declarations area. This way I can simply call from the HTML and have my app header appear!
However I am having difficulty when trying to do a batch of these at once...
I am seeing an error message such as:
Error: Unexpected module 'ComponentExportModule' declared by the module 'AppModule'. Please add a #Pipe/#Directive/#Component annotation.
app.module.ts
//More imports are above...
import {ComponentExportModule} from '../UI-Components/component-export.module';
#NgModule({
imports: [
//Imports are here
],
declarations: [
AppComponent,
ComponentExportModule
],
providers:[
//Stuff is here
],
bootstrap: [ AppComponent]
})
export class AppModule { }
component-export.module.ts
import { NgModule } from '#angular/core';
import {AppHeaderComponent} from './app-header.component';
import {PageContentComponent} from './page-content.component';
import {SideNavComponent} from './side-nav.component';
#NgModule({
imports: [
AppHeaderComponent,
PageContentComponent,
SideNavLinkListComponent
],
exports: [
AppHeaderComponent,
PageContentComponent,
SideNavComponent
]
})
export class ComponentExportModule {}
I am then wanting to utilise my components in the usual way within the app.module.html file such as:
<app-header/>
<nav-bar/>
<page-content/>
Your app.module.ts is wrong. ComponentExportModule needs to be added to the imports array in your app.module.ts, not declared. Modules are always imported. Components, directives, and pipes are declared.
Also when you add the shared components to your apps template (app.component.html) you will want to use the standard element notation such as: <app-header></app-header> instead of </app-header> as only void and foreign elements can be self closed
I have to implement autocomplete for a text input that takes addresses/locations in Angular 4.
I found this package on Google, https://tanoy009.github.io/ng4-geoautocomplete/, but I am not sure where to place the settings part of example3 in my own code. This is what I have so far:
export class TestComponent {
apiAddress: string = "";
#Output() notify: EventEmitter<any> = new EventEmitter<any>();
autoCompleteCallback1(selectedData: any) {
this.apiAddress = selectedData.description;
this.notify.emit(this.apiAddress);
}
You should look at the documentation. It's very clear.
https://github.com/tanoy009/ng4-geoautocomplete#installation
Installation
Install through npm:
npm install --save ng4-geoautocomplete Then include in your apps
module:
import { Component, NgModule } from '#angular/core'; import {
Ng4GeoautocompleteModule } from 'ng4-geoautocomplete';
#NgModule({
imports: [
Ng4GeoautocompleteModule.forRoot()
]
})
export class MyModule{}
Add google place script in your main file generally referred to
'index.html' (Optional if you want to use google services).
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=true&key=XXReplace
this with valid keyXX&libraries=places&language=en-US"></script>
Finally use in one of your apps components:
import { Component } from '#angular/core';
#Component({ template: '<ng4geo-autocomplete
(componentCallback)="autoCompleteCallback1($event)"></ng4geo-
autocomplete>'
})
export class MyComponent {
autoCompleteCallback1(selectedData:any) {
//do any necessery stuff.
}
}
UPDATE: The next part of the answer is an update placed here to answer the question in the comment section.
The following links show the code for the demo you linked. This will tell you where to put the settings. You basically create settings in your component's typescript file and then use them in the html.
TypeScript
public userSettings2: any = {
showRecentSearch: false,
geoCountryRestriction: ['in'],
searchIconUrl: 'http://downloadicons.net/sites/default/files/identification-search-magnifying-glass-icon-73159.png'
};
HTML
<ng4geo-autocomplete [userSettings]="userSettings2" (componentCallback)="autoCompleteCallback2($event)"></ng4geo-autocomplete>
https://github.com/tanoy009/ng4-geoautocomplete/blob/master/demo/demo.component.ts
https://github.com/tanoy009/ng4-geoautocomplete/blob/master/demo/demo.component.html
I want to create a mat-dialog with a default-style mat-button for closing the dialog. Everything works except the button lacks the Material Design style applied by Angular Material.
How do I get the style to show? AFAIK I have imported all modules as required and properly set up each part of Angular Material including the themes.
my-dialog.component.ts:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-my-dialog',
templateUrl: './my-dialog.component.html',
styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
my-dialog.component.html:
<h1 mat-dialog-title>Lorem Ipsum</h1>
<div mat-dialog-content>
...
</div>
<button mat-button mat-dialog-close>Close</button>
app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatCardModule, MatDialogModule, MatButtonModule } from '#angular/material'
import { AppComponent } from './app.component';
import { MyDialogComponent } from './my-dialog/my-dialog.component';
#NgModule({
declarations: [
AppComponent,
MyDialogComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatCardModule,
MatDialogModule
],
providers: [],
bootstrap: [AppComponent],
entryComponents: [
MyDialogComponent
]
})
export class AppModule { }
Newly imported modules need to be added to imports:
import { MatButtonModule } from '#angular/material/button'
#NgModule{
...
imports: [
BrowserModule,
BrowserAnimationsModule,
MatCardModule,
MatDialogModule,
MatButtonModule
],
...
})
Worth noting that the new angular 9 build system requires you stop the "ng serve" script and run it again after adding a material module
can also be missing a line in styles.css
#import '#angular/material/prebuilt-themes/indigo-pink.css';
TL;DRIf you have other things working but not a specific component, make sure that component's module is imported & imported
correctly as modules have to be added to the imports:
#NgModule{
imports: [
MatCardModule,
MatButtonModule
]
})
Note:
Remember to stop the "ng serve" script and run it again after adding the material module as the new angular 9 build system requires to do so.
Explanation:I had the same issue where I had a CustomMaterialModule where I was importing all the Material Modules I needed to use in my app. I was using mat-button but its style wasn't there. After a few minutes of searching, I found out that I had put MatButtonModule only in imports array of my CustomMaterialModule & not in exports array.
Note: my CustomMaterialModule hosts all the Material Modules I need in
my app so modules like MatButtonModule will go in my
CustomMaterialModule imports and exports array and later I would only
use my CustomMaterialModule in other places of my app. I did this to
keep the code clean and easy for editing. So for example, if one month
down the road I don't need a Material Module I can just remove it from
my CustomMaterialModule and not worry about it.
Some issue that i noticed are -
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '#angular/material' in your my-dialog.component.ts
constructor(public dialog: MatDialog) {} is missing
MatButtonModule is not imported inside app.module.ts file
You can also follow this(https://material.angular.io/components/dialog/overview) example
In my case i have 2 extra modules, 1 for the mat-stuff, and another for components.
Initially i added both modules to the app-module but that didnt work.
i moved the mat-module import into the components-module (discarding from app-module, not must) and it worked, i guess its because the DI.
Add your dialog in the declarations of AppModule. It works for me.
#NgModule({
declarations: [
AppComponent,
...,
YourDialogComponent
],
You need to import this package in your app.modoule.ts file
import { MatButtonModule } from '#angular/material/button'
and then in imports add this
imports: [MatButtonModule,...]