如何使用angular作为基座

[CR903]

我公司项目都是以angular8开发，现在需要集成。有没有以angular为基座的步骤或简单demo，现不知如何下手配置。

qiankun 版本 2.0.2 浏览器版本：chrome 操作系统：macOS

[coocoonancy]

我们公司的基本上是angular 1.5.8版本的 支持吗

[waltbest2]

基座是angularjs 1.7.x是可以的，我这里可以，但是在IE 11下，如果load一个angular 9的app，unmount时，会把基座的angularjs环境搞挂掉，一堆报错

[bfrontend]

也在考虑此问题， 不止如何下手

[hellojayjay]

+1

[sxhieen]

我是直接将Angular9作为基座，尝试过在main.ts或app.component的ngOnInit()里，加registerMicroApps和start都可以

[hellojayjay]

我是直接将Angular9作为基座，尝试过在main.ts或app.component的ngOnInit()里，加registerMicroApps和start都可以

html上的路由跳转怎么处理的呢？基座项目会报路由不存在吗？

[Xiaoxiasuper]

我是直接将Angular9作为基座，尝试过在main.ts或app.component的ngOnInit()里，加registerMicroApps和start都可以

同是这样做 但子应用的app-root却没加载出来，为什么呢

[hellojayjay]

我是直接将Angular9作为基座，尝试过在main.ts或app.component的ngOnInit()里，加registerMicroApps和start都可以

同是这样做 但子应用的app-root却没加载出来，为什么呢

你说的这个问题我解决了，但是子项目懒加载模块还没有解决 https://github.com/hellojayjay/qiankun-ng9

[yizeshun]

我是直接将Angular9作为基座，尝试过在main.ts或app.component的ngOnInit()里，加registerMicroApps和start都可以

同是这样做 但子应用的app-root却没加载出来，为什么呢

你说的这个问题我解决了，但是子项目懒加载模块还没有解决 https://github.com/hellojayjay/qiankun-ng9

懒加载的问题我也碰到过，经过两天的搜索，最终定位应该是没有设置publicPath的原因。解决方案是在extra-webpack.config.js里面增加如下配置 const singleSpaConfig = { output: { library: ${name}-[name], libraryTarget: 'umd', publicPath: 'http://localhost:5555/' }, externals: { 'zone.js': 'Zone', }, }; 其中publicPath的地址根据你自己的开发环境改变

[hellojayjay]

我是直接将Angular9作为基座，尝试过在main.ts或app.component的ngOnInit()里，加registerMicroApps和start都可以

同是这样做 但子应用的app-root却没加载出来，为什么呢

你说的这个问题我解决了，但是子项目懒加载模块还没有解决 https://github.com/hellojayjay/qiankun-ng9

懒加载的问题我也碰到过，经过两天的搜索，最终定位应该是没有设置publicPath的原因。解决方案是在extra-webpack.config.js里面增加如下配置 const singleSpaConfig = { output: { library: ${name}-[name], libraryTarget: 'umd', publicPath: 'http://localhost:5555/' }, externals: { 'zone.js': 'Zone', }, }; 其中publicPath的地址根据你自己的开发环境改变

感谢，是可以用的，publicPath使用子项目域名+端口就可以用了。 我也将 https://github.com/hellojayjay/qiankun-ng9 更新了

[chengxuanxie]

我们公司的基本上是angular 1.5.8版本的 支持吗

做了一个angular9为主应用，angularjs为子应用的示例，可以参考一下： https://github.com/chengxuanxie/qiankun-angular-angularjs/blob/master/README.md

[ycpaladin]

我是直接将Angular9作为基座，尝试过在main.ts或app.component的ngOnInit()里，加registerMicroApps和start都可以

同是这样做 但子应用的app-root却没加载出来，为什么呢

你说的这个问题我解决了，但是子项目懒加载模块还没有解决 https://github.com/hellojayjay/qiankun-ng9

我的也是，https://github.com/ycpaladin/qiankun-ng-demo

[hellojayjay]

我是直接将Angular9作为基座，尝试过在main.ts或app.component的ngOnInit()里，加registerMicroApps和start都可以

同是这样做 但子应用的app-root却没加载出来，为什么呢

你说的这个问题我解决了，但是子项目懒加载模块还没有解决 https://github.com/hellojayjay/qiankun-ng9

我的也是，https://github.com/ycpaladin/qiankun-ng-demo

这儿已经解决了子项目懒加载的问题： https://github.com/hellojayjay/qiankun-ng9/commit/a6929dd21916b3654265eb3627f338d95437bc4b

[WLyKan]

基座是angularjs 1.7.x是可以的，我这里可以，但是在IE 11下，如果load一个angular 9的app，unmount时，会把基座的angularjs环境搞挂掉，一堆报错

可以把例子整理一下，PR到官方仓库，给大家参考一下

[wudith]

基座是angularjs 1.7.x是可以的，我这里可以，但是在IE 11下，如果load一个angular 9的app，unmount时，会把基座的angularjs环境搞挂掉，一堆报错

请教下 angular6 有使用验证过吗？我这按使用angular6 作为子应用qianku无法识别’

[wudith]

我是直接将Angular9作为基座，尝试过在main.ts或app.component的ngOnInit()里，加registerMicroApps和start都可以

同是这样做 但子应用的app-root却没加载出来，为什么呢

你说的这个问题我解决了，但是子项目懒加载模块还没有解决 https://github.com/hellojayjay/qiankun-ng9

我的也是，https://github.com/ycpaladin/qiankun-ng-demo

这儿已经解决了子项目懒加载的问题： hellojayjay/qiankun-ng9@a6929dd

为什么我设置了还是懒加载失败呢，报错： core.js:4127 ERROR Error: Uncaught (in promise): ReferenceError: System is not defined ReferenceError: System is not defined at SystemJsNgModuleLoader../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile

[wudith]

我是直接将Angular9作为基座，尝试过在main.ts或app.component的ngOnInit()里，加registerMicroApps和start都可以

同是这样做 但子应用的app-root却没加载出来，为什么呢

你说的这个问题我解决了，但是子项目懒加载模块还没有解决 https://github.com/hellojayjay/qiankun-ng9

懒加载的问题我也碰到过，经过两天的搜索，最终定位应该是没有设置publicPath的原因。解决方案是在extra-webpack.config.js里面增加如下配置 const singleSpaConfig = { output: { library: ${name}-[name], libraryTarget: 'umd', publicPath: 'http://localhost:5555/' }, externals: { 'zone.js': 'Zone', }, }; 其中publicPath的地址根据你自己的开发环境改变

大佬，请教下为什么我设置了publicPath还是懒加载失败呢，报错： core.js:4127 ERROR Error: Uncaught (in promise): ReferenceError: System is not defined ReferenceError: System is not defined at SystemJsNgModuleLoader../node_modules/@angular/core/ivy_ngcc/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile

懒加载配置：

{ path: 'management', loadChildren: './management/management.module#ManagementModule' },

[moruoshuang]

基座是angularjs 1.7.x是可以的，我这里可以，但是在IE 11下，如果load一个angular 9的app，unmount时，会把基座的angularjs环境搞挂掉，一堆报错

求demo, angular9 子应用无法在IE下显示出来T_T @waltbest2

[qyjs]

angular10为主应用，angular10为子应用的, 主应用怎么往子应用传值，子应用怎么接收。 求解

[ycpaladin]

angular10为主应用，angular10为子应用的, 主应用怎么往子应用传值，子应用怎么接收。 求解

1. 通过URL（路由）参数传值

2. 如果是service的话，可以考虑在主应用里面使用

   //  app.component
   constructor(service: SharedService) {
   (window as any).___sharedService = service; // 把要共享的 service 挂在window上
   }

   子应用的app.module里面

   provides: [
   { 
      provide: SharedService, 
      // 如果你的子应用可能会在开发的时候单独启动，就不能这么干了，因为单独执行时，不在qiankun的环境中，window里面不会有这个属性， useFactory 要换成 useExsting 或者 useClass
     // useValue: (window as any).___sharedService 
     useFactory:()=> {
        return (window as any).___sharedService; // 从 window 中获取， 
     }
   }
   ]
   // 剩下的就是在子应用需要使用的地方注入 SharedService 就可以了

3. 用qiankun内置的全局共享状态API

我用的第二种，因为我共享的数据都在service内，而且共享的数据类型都是可观察对象，比较符合ng的风格.

[qyjs]

angular10为主应用，angular10为子应用的, 主应用怎么往子应用传值，子应用怎么接收。 求解

1. 通过URL（路由）参数传值

2. 如果是service的话，可以考虑在主应用里面使用

//  app.component
constructor(service: SharedService) {
(window as any).___sharedService = service; // 把要共享的 service 挂在window上
}

子应用的app.module里面

provides: [
    { 
       provide: SharedService, 
       // 如果你的子应用可能会在开发的时候单独启动，就不能这么干了，因为单独执行时，不在qiankun的环境中，window里面不会有这个属性， useFactory 要换成 useExsting 或者 useClass
      // useValue: (window as any).___sharedService 
      useFactory:()=> {
         return (window as any).___sharedService; // 从 window 中获取， 
      }
    }
]
// 剩下的就是在子应用需要使用的地方注入 SharedService 就可以了

1. 用qiankun内置的全局共享状态API

我用的第二种，因为我共享的数据都在service内，而且共享的数据类型都是可观察对象，比较符合ng的风格.

子应用provide 的SharedService 从哪个地方引入。