I have the Angular 2 application working in the mixed mode with Angular 1. My main.ts file looks like:
declare var angular: any;
var moduleName = 'myApp';
import { AppComponent } from './app/app.component';
import { upgradeAdapter, UpgradeManager } from './app/index';
UpgradeManager.prototype.upgradeProviders();
UpgradeManager.prototype.addProviders();
angular.module(moduleName).directive('myApp', upgradeAdapter.downgradeNg2Component(AppComponent));
upgradeAdapter.bootstrap(document.body, [moduleName]);
That was working until Angular 2 RC 4. Now with the new modules in Angular 2 RC 5 the recomendation is to create app.module.ts file so I have the following:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule { }
My question is how can we bootstrap that module using the upgrade adapter from the "main.ts" file?
Found the solution here:
https://github.com/angular/angular/issues/10656
You need to add your app module to when constructing the upgrade adapter object.
Related
I downloaded angular form https://angular.io/quick-start and then added a file to the app folder "tutoriel.component.ts" and wrote the following code
import { Component } from "#angular/core";
#Component({
selector: 'tutoriel',
template: '<h2>Tutoriel</h2>'
})
export class TutorielComp{
}
and then changed this in the app.module
#NgModule({
declarations: [
AppComponent,
TutorielComp
],
and the class got imported import { TutorielComp } from './tutoriel.component'; The problem is when I deleted all the code in the app.component.html and wrote
<tutoriel></tutoriel>
It did not show.
I have a Angular JS application where each angular JS library files are included in html file for each functionality.Is it feasible to make this application work together with Angular 4.
Steps to make Angular JS work with Angular 4
1)install the #angular/upgrade How do I do make this work in sync with the old Angular JS files
2)I read it in a post that I need to define this in system.config.js
System.config({
map: {
'#angular/upgrade/static': 'npm:#angular/upgrade/bundles/upgrade-static.umd.js'
}
});
3)In app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UpgradeModule } from '#angular/upgrade/static';
#NgModule({
imports: [
BrowserModule,
UpgradeModule
],
bootstrap: []
})
export class AppModule {
ngDoBootstrap() {}
}
4)main.ts
import { NgModule } from '#angular/core';
import { UpgradeModule } from '#angular/upgrade/static';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['myApp'], { strictDi: true });
});
Are these steps sufficient to integrate Angular JS application to Angular 4.If so how do I do a build.The existing process is a monolithic application with Maven Build?Can Angular 4 be integrated with Maven?
The official Angular website has a migration guide here
The old versions of Angular (AngularJS 1.x) have a completely different project structure to the new Angular >2. This guide should help you out.
I'm using Angular2 WebPack in Asp Core .
I'm using This Template : Template
I've deleted : Home , Counter , Fetch Data ( HTML , Ts ) ,also deleted Import in app.module
import { NgModule } from '#angular/core';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
#NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
NavMenuComponent
]
})
export class AppModule {
}
Now When I run the project, It Shows the following error :
An unhandled exception occurred while processing the request.
Exception: Call to Node module failed with error: Error: No ErrorHandler. Is platform module (BrowserModule) included?
at E:\MyProject\Angular2Application6\Angular2Application6\node_modules\#angular\core\bundles\core.umd.js:6921:27
at ZoneDelegate.invoke (E:\MyProject\Angular2Application6\Angular2Application6\node_modules\zone.js\dist\zone-node.js:232:26)
at Object.onInvoke (E:\MyProject\Angular2Application6\Angular2Application6\node_modules\#angular\core\bundles\core.umd.js:6242:41)
at ZoneDelegate.invoke (E:\MyProject\Angular2Application6\Angular2Application6\node_modules\zone.js\dist\zone-node.js:231:32)
at Zone.run (E:\MyProject\Angular2Application6\Angular2Application6\node_modules\zone.js\dist\zone-node.js:114:43)
at NgZoneImpl.runInner (E:\MyProject\Angular2Application6\Angular2Application6\node_modules\#angular\core\bundles\core.umd.js:6269:75)
at NgZone.run (E:\MyProject\Angular2Application6\Angular2Application6\node_modules\#angular\core\bundles\core.umd.js:6499:70)
at PlatformRef_._bootstrapModuleFactoryWithZone (E:\MyProject\Angular2Application6\Angular2Application6\node_modules\#angular\core\bundles\core.umd.js:6916:27)
at PlatformRef_.bootstrapModuleFactory (E:\MyProject\Angular2Application6\Angular2Application6\node_modules\#angular\core\bundles\core.umd.js:6904:25)
at E:\MyProject\Angular2Application6\Angular2Application6\node_modules\angular2-platform-node\node-platform.js:439:38
Whats the problem ? How can I solve it ?
I think the module BrowserModule is missing, you can try adding the module using:
import { BrowserModule } from '#angular/platform-browser';
#NgModule({
imports: [
BrowserModule
]
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
NavMenuComponent
]
})
export class AppModule {
}
If the error is not solved maybe you can check if you are using angular 2 RC4 to update the release version to RC5, because NgModule was introduced in Angular 2 RC5.
Scenario
I'm trying to use a very simple angular 2 (rc.5) component as a directive inside my angular 1.5 app but I'm getting an error when adding the directive to one of my modules.
Error
[$injector:unpr] Unknown provider: ng2.ComponentFactoryRefMapProvider <- ng2.ComponentFactoryRefMap <- dummyDirective
Code
Angular2
jspm command for bundling: jspm bundle-sfx embeddedModule.ts dist/component-sfx.min.js --skip-source-maps --format global --global-name __myglobal
This component-sfx.min.js gets moved over into the proper location within the angular1 project
embeddedModule.ts
import 'rxjs/Rx';
import 'core-js/client/shim.js';
import 'zone.js';
import 'reflect-metadata/Reflect';
import { UpgradeAdapter, UpgradeAdapterRef } from '#angular/upgrade';
import { Component, provide, Inject, NgModule, forwardRef } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
const adapter = new UpgradeAdapter(forwardRef(() => EmbeddedModule));
#Component({
selector: 'dummy',
template: '<p>Hello!</p>'
})
class DummyComponent {
constructor() {
console.log('Dummy.constructor...');
}
}
#NgModule({
imports: [
BrowserModule
],
declarations: [
DummyComponent
]
})
class EmbeddedModule {}
var downgradedComponent = adapter.downgradeNg2Component( DummyComponent );
export { adapter, DummyComponent, downgradedComponent };
Angular 1 app
index.html
<script src=... angular vendor scripts ...></script>
<script src="path/to/my/angular2-sfx.js></script>
main.js
angular.element(document).ready(function() {
...
angular.bootstrap(document.body, ['my-app']);
...
});
my.controller.js (where I actually want to use my downgraded component)
(function() {
'use strict';
angular.module('data-gov-reference.state.index')
.controller('MyController', Index)
.directive('dummy', __myglobal.adapter.downgradeNg2Component(DummyComponent));
function Index() {
console.log('MyController...');
}
}());
myview/myview.html (the view where I want the downgraded directive to show up)
<div>
<dummy></dummy>
</div>
Nevermind, figured out the issue.
In main.ts, angular.bootstrap(...) should have been __myglobal.adapter.bootstrap(...)
main.ts
angular.element(document).ready(function() {
...
__myglobal.adapter.bootstrap(document.body, ['my-app']);
...
});
Hope it helps someone else!
I have existing website, which is build with angular1+requirejs and php. I would like to add angular2 (which I have already added, using angular2-cli).
I don't need angular1 to communicate with angular2, so we don't have to do ng-upgrade
I want to bootstrap angular2 components outside app component typescript file.
I'm bit confused on how to do this, because everything is in typescript and after compiled, they are completely different.
I'm trying to load different component per page, sometime one and sometime more then one.
Actually, first to all you need to provide more information. But, on the big picture, you have create a root module and declare component that belong to it, the same for directives and so on. Ex.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import
{ AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
bootstraping the module:
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
anyway, you can check this to get some idea ngModule
This is how to boostrap with javascript.
Creating module:
(function(app) {
app.AppModule =
ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule ],
declarations: [ app.AppComponent ],
bootstrap: [ app.AppComponent ]
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
bootstraping:
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic
.platformBrowserDynamic()
.bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));