The question is on the same lines as this one, however the other way around.
I want to embed an Angular 1.x app inside an Angular 2 app. More specifically this app. I understand that there are ways to upgrade elements individually, however this being a large project, I simply want to embed this in one of my tabs on the Angular 2 app.
I tried a very naive approach where I copied the dist folder in one of my components and I am trying to use the same index.html with
<div ng-app="app">
<div ng-view="">
</div></div>
Now I am trying to load all the minifed javascript (which includes angular 1.x library as well as some app specific javascript files and css) into my main angular 2 app in its own index.html . Then I load the index.html from the dist directory through my component. The problem seems that Angular 1 library doesnt seem to load.
I have a few questions;
Would it help if the libraries(js) files are loaded as ts. I assume that it is possible to load Angular 1 and 2 libraries simultaneously.
If it would, is there an easy way to get the js files converted to .ts files.
EDIT
I got this to work by using the angular.boostrap call as shown below.
Following is my code snippet for my component
import {Component, AfterViewInit, OnInit} from 'angular2/core';
declare var angular:any;
#Component({
selector: 'server-monitor',
templateUrl: 'app/components/server-monitor/dist/index.html',
styleUrls: ['app/components/server-monitor/dist/styles/vendor-c0a35f80.css',
'app/components/server-monitor/dist/styles/main-0c4cc0e5.css',
],
})
export class ServerMonitorComponent implements AfterViewInit, OnInit{
ngOnInit(){
angular.bootstrap(document, ['app']);
}
}
However, now I have run into a different problem. The original project makes a lot of http calls very frequently(2 sec by default) to get live stats about the system.
When I run this embedded into my app, I can see the calls are made but my page keeps refreshing and doesn't show anything on the graph. I understand I have to modify something where it makes the http calls, but no sure where.
In addition to the above edit, I modified $routeProvider in the original app and it seems to work just fine
Related
I have a component called </App>, and another component called </Interface>, both are already imported, how can I put Interface on top of App in the centre and export (export default function foo() ) it?
I am new to both React and HTML, so any helps are appreciated!
let me provide some guidance for you here:
1.) It is great that you are learning React, however since you are brand new to web development I strongly urge you to first learn to make a website with vanilla html, vanilla javascript, and css. It will provide you the fundamentals you need to jump into React.
2.) When you are asking about putting Interface on top of App, are you asking about how to make it so that Interface is displayed above App on the page that is rendered, or are you asking how to move it's position in the code? Also, I'm not sure why you have your app component as the source for the image. You should import images from your folder which contains your assets and use that instead.
You can simply import the interface component and use it in the app component. Please follow the provided example.
export default App= (props) => {
return
(
<Interface/>
)
}
Above mentioned would add Interface component to the App Component, similarly you can follow the same pattern to open any other component in the Interface component respectively.
I have an angular app, it has a bundle and a piece of HTML that contains a root selector
<app></app>
where the app is bootstrapped.
Is it possible to somehow render a component from that app outside this app container? In the HTML, having something like
<component-name></component-name>
The reason for this is this app is being loaded externally for analysing only components one by one, and not the app as a whole, sort of like a style guide for the components in the app. So I load the bundle and I want to be able to render only a component that the user chooses.
Just add any components you need to the bootstrap array that is passed to NgModule:
#NgModule({
declarations: [AppComponent, ContactFormComponent],
imports: [...],
providers: [SharedService],
bootstrap: [AppComponent, ContactFormComponent]
})
export class AppModule {}
and now voila this works:
<html><body>
<app-contact-form></app-contact-form>
============================================
<app-root></app-root>
</body></html>
Just learned this from the plunker in the answer Günter linked above. very cool. tested with angular 6
You can bootstrap multiple elements. You can inject a shared service to be able to communicate between components of different Angular2 applications (on the same page).
How to dynamically create bootstrap modals as Angular2 components?
As said in the Polymer-Summit 2017, web-components, in Polymer 3.0, won't be imported using HTML-imports but ES6-modules.
So I am looking for a way to change all my HTML-imports one by one into ES6-module's import without making unstable code.
For exemple:
Here's a little simple project.
Their are 3 files:
|-index.html
|-custom-element.html
|-MyModule.html
The index.html imports the custom-elementcomponent and instantiate one in the DOM.
The custom-element.html imports MyModule.html, and use its function square(number).
All imports are made using HTML-imports.
I am trying to figure out how to make just MyModule an ES6-module and then import it in the custom-element.html file without breaking the app.
Change the script tag's type into <script type="module">.
Import the ES6 module from inside the script module.
Here's the plunker with the full solution.
In my Angular web project I use different two or three types of header in many pages in Angular 4 project. Is there a way to code up your HTML header code and footer code just once and have it included or injected in one or more of your pages. To give some clue I need an alternative for #Section in ASP.NET MVC Razor witch in each page we can add an extra code to it (I know this is a server side thing, but I need it in angular client side).
Is there an official/recommended way to do this?
You should create components for that. Something like:
#Component({
selector: 'myheader',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
...
And then add it to the template of the other pages where you want to use it (or to the app.component.html if you want it everywhere). Something like:
<myheader></myheader>
If you need different data on the header depending on the component you are at, just create a HeaderService, and pass data to the header from the component through it.
EDIT: I found the problem. I was using ng2-boostrap tabset module,
when adding the maps inside this view, the map does not render. I
haven't been able to fix the problem though.
I'm working on an angular 2 application, where i need to import google maps module into a sub module. My question is - how might i do that correctly? is this even possible as it is.
What i've tried:
I have added the import { AgmCoreModule } from 'angular2-google-maps/core'; and AgmCoreModule.forRoot({ apiKey: 'xxx', libraries: ['places'] }) where xxx is my apiKey downloaded from google api site. If i run this code in a newly angular-cli created app - loading the module into app.module, everything works fine. Selector code looks:
<sebm-google-map [latitude]="lat" [longitude]="lng">
<sebm-google-map-marker [latitude]="latitude" [longitude]="longitude">
</sebm-google-map-marker>
</sebm-google-map>
However, i want to use it in a module called MapModule and import that module into my app.module, so i import the AgmCoreModule into the MapModule, without forRoot(), and the selector is recognized in the html and the map is loaded but the map shows an empty view - i.e. there is a map with google logo and stuff, but no content - no error messages. I use the exact same code as my test example.
I also tried adding the AgmCoreModule with the forRoot({apiKey: 'xxx'}) with the same result. I removed the import from the App.module and only imported into the MapModule with the same result.
Am i missing something here? i can provide more code if needed, but i think my problem lies with the lack of knowledge in imports.
Kind regards Chris
Did you tried putting this code in your component that is responsible for viewing the map?
import {MapsAPILoader, SebmGoogleMap} from 'angular2-google-maps/core';
#ViewChild(SebmGoogleMap) map: SebmGoogleMap;
this.map.triggerResize();
if the map is not rendered in initial view, eg. inside an *ngif block then issues arise. When you inspect the elements in the tabs do you see map code or you see map code only when the map tab is activated?
Normally when there are no errors, a triggerResize() will fix your issue.