[英]Using angular1 component (requirejs module) inside angular2 component
I have an ng1 component in javascript written as requirejs module. 我在javascript中有一个ng1组件,写成requirejs模块。 I need to use this component inside my ng2 component (until my old ng1 app is fully ported to ng2).
我需要在我的ng2组件中使用这个组件(直到我的旧ng1应用程序完全移植到ng2)。 Here is the plnkr : https://plnkr.co/edit/IYuoZZE4sPGr97pxB04l?p=preview Here is my bootstrap logic:
这是plnkr : https : //plnkr.co/edit/IYuoZZE4sPGr97pxB04l ? p = preview这是我的引导逻辑:
import {App} from './app';
import {upgradeAdapter} from './adapter';
var appComponent = upgradeAdapter.downgradeNg2Component(App);
requirejs( ['ng1App'],
function(ng1App) {
angular.module('ng1App').directive('myApp',appComponent);
// following line throws error
upgradeAdapter.bootstrap(document.body, ['ng1App']);
} );
it gives me following error 它给了我以下错误
angular2-polyfills.js:286 Uncaught Error: AngularJS v1.x is not loaded!
Appreciate any pointers. 感谢任何指针。
The other question i have is how do i import the requirejs modules for individual ng1 components in my ng2 component : 我的另一个问题是如何为ng2组件中的各个ng1组件导入requirejs模块:
import {Component} from '@angular/core'
import {upgradeAdapter} from './adapter';
// How do i dynamically load the ng1-comp rquirejs module here?
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
<ng1-comp></ng1-comp>
`,
directives: [upgradeAdapter.upgradeNg1Component('ng1Comp')]
})
export class App {
constructor() {
this.name = 'Angular2 (Release Candidate!)'
}
}
Finally figured it out.. The requirejs config needs to be converted to systemjs or other module loader config. 终于想通了.. requirejs config需要转换为systemjs或其他模块加载器配置。 Converting to system js is easy..
转换为系统js很容易..
// map systemJS apis to corresponding apis in requirejs
window.require = System.amdRequire;
window.requirejs = System.amdRequire;
window.define = System.define;
System.config(function getNG1Config() {
return {
defaultJSExtensions: true,
baseUrl: '/',
waitSeconds: 0,
paths: {
'angular-ui-router': 'https://npmcdn.com/angular-ui-router@0.3.0/release/', //needs to be defined before 'angular'
'angular': 'https://npmcdn.com/angular@1.5.7/',
'@angular/common': 'https://npmcdn.com/@angular/common@2.0.0-rc.2/bundles/common.umd',
'@angular/compiler': 'https://npmcdn.com/@angular/compiler@2.0.0-rc.2/bundles/compiler.umd',
'@angular/core': 'https://npmcdn.com/@angular/core@2.0.0-rc.2/bundles/core.umd',
'@angular/http': 'https://npmcdn.com/@angular/http@2.0.0-rc.2/bundles/http.umd',
'@angular/platform-browser': 'https://npmcdn.com/@angular/platform-browser@2.0.0-rc.2/bundles/platform-browser.umd',
'@angular/platform-browser-dynamic': 'https://npmcdn.com/@angular/platform-browser-dynamic@2.0.0-rc.2/bundles/platform-browser-dynamic.umd',
'@angular/router-deprecated': 'https://npmcdn.com/@angular/router-deprecated@2.0.0-rc.2/bundles/router-deprecated.umd',
'@angular/upgrade': 'https://npmcdn.com/@angular/upgrade@2.0.0-rc.2/bundles/upgrade.umd',
'upgradeAdapter': './upgradeAdapter',
'rxjs/*': 'https://npmcdn.com/rxjs@5.0.0-beta.9/bundles/Rx.umd',
'app': 'src/app',
'bootstrap': './bootstrap'
},
map: {
},
meta: {
'app': {
deps: ['angular', 'angular-ui-router']
},
'bootstrap': {
deps: ['angular', 'angular-ui-router']
}
},
packages: {
'angular': {
main: 'angular.min.js',
defaultExtension: 'js'
},
'angular-ui-router': {
main: 'angular-ui-router.js',
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
defaultExtension: 'js'
},
'./': {
defaultExtension: 'js'
},
'upgradeAdapter': {
defaultExtension: 'js'
}
}
};
});
Here is the plunker : https://plnkr.co/edit/SnBtwp?p=preview 以下是plunker: https ://plnkr.co/edit/SnBtwp ? p = preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.