alexzuza / angular-plugin-architecture

Example of building Angular plugin with AOT and SSR
213 stars 82 forks source link

Any chance to get support on Angular 9? #24

Open a-katsarov opened 4 years ago

a-katsarov commented 4 years ago

Do you have a branch compatible with Angular 9?

a-katsarov commented 4 years ago

ERROR in src/main.ts:3:22 - error TS2307: Cannot find module './plugin1/plugin1.module.ngfactory'.

3        export * from './plugin1/plugin1.module.ngfactory';
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/main.ts:4:47 - error TS2307: Cannot find module './plugin1/plugin1.module.ngfactory'.

4        import { Plugin1ModuleNgFactory } from './plugin1/plugin1.module.ngfactory';
                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! angular-plugin-architecture@0.0.0 build:plugin1: `ng build --project plugins --prod --modulePath=./plugin1/plugin1.module#Plugin1Module --pluginName=plugin1 --outputPath=./dist/plugins`
npm ERR! Exit status 1
HollyLiang commented 4 years ago

Facing in same error. It looks like Ivy's problem. Try to setting tsconfig.json.

"angularCompilerOptions": {
    "enableIvy": false,
}
mailok commented 4 years ago

@HollyLiang I have same error with Angular 8

mailok commented 4 years ago

@a-katsarov Hi, I solved this error, in Angular 8. was that the modulePath address was incorrect. I had this:

--modulePath=./src/app/app.module#AppModule

and I changed it to:

--modulePath=./app/app.module#AppModule

john-gouda commented 4 years ago

Ivy doesn't emit factory files, instead factories are embedded as static property. You might need to change the following lines Exports and remove factory-path and NgFactory. Export the module\component. Check Ivy Compiler Model for more details.

image

There are couple of ways to create an instance of a component:

image

More safe way is to add component as entry, and use component factory resolver to get it through the component type, that you can provide to module providers. (Update, no need for entry component in NG9)

Your plugin doesn't need to withhold module, instead it can export component, having exported type, you can use CFR.

I was able to achieve Ivy Module\Component through CFR and ɵrenderComponent, you may need some more readings on how compiled chunks got changed in Ivy.

Hope this help.

fr0 commented 4 years ago

More safe way is to add component as entry, and use component factory resolver to get it through the component type, that you can provide to module providers.

Do you have an example of this that you can share? It seems like a much more reliable mechanism than using ɵrenderComponent, since the ɵ prefix indicates it is a private library with no guarantees of stability.

john-gouda commented 4 years ago

I got some time to fork and migrate both workspace and builder to Angular 9. https://github.com/jfgouda/angular-plugin-architecture Thx

namnhcntt commented 4 years ago

I got some time to fork and migrate both workspace and builder to Angular 9. https://github.com/jfgouda/angular-plugin-architecture Thx

Very nice, thank you

deepakrobot commented 4 years ago

Really happy to be part of this thread and to see the solution for this issue.

deepakrobot commented 4 years ago

@jfgouda Were you able to build shared library in Angular 8 with ivy enabled and use that in other projects ? I was still getting the error in the same, other projects work fine. Error which I got: Appears in the NgModule.imports, but could not be resolved

namnhcntt commented 4 years ago

I got some time to fork and migrate both workspace and builder to Angular 9. https://github.com/jfgouda/angular-plugin-architecture Thx

Hi @jfgouda, I used your fork project and I can compile plugin, but the main project to load plugin is not working. Could you please fix this issue? I ran (after I fix some config): npm run dev:ssr

And error:

C:\Users\vietp\Downloads\plugin-v9\dist\server\main.js:155799 var SystemJs = window.System;

           ^

ReferenceError: window is not defined at Object../src/app/services/plugin-loader/client-plugin-loader.service.ts (C:\Users\vietp\Downloads\plugin-v9\dist\server\main.js:155799:16) at webpack_require (C:\Users\vietp\Downloads\plugin-v9\dist\server\main.js:20:30) at Object../src/app/app.module.ts (C:\Users\vietp\Downloads\plugin-
v9\dist\server\main.js:155666:38) at
webpack_require
(C:\Users\vietp\Downloads\plugin-v9\dist\server\main.js:20:30) at Object../src/app/app.server.module.ts (C:\Users\vietp\Downloads\plugin->v9\dist\server\main.js:155742:20) at webpack_require (C:\Users\vietp\Downloads\plugin-v9\dist\server\main.js:20:30) at Object../src/main.server.ts (C:\Users\vietp\Downloads\plugin-v9\dist\server\main.js:156105:27) at webpack_require (C:\Users\vietp\Downloads\plugin-v9\dist\server\main.js:20:30) at Object../server.ts (C:\Users\vietp\Downloads\plugin-v9\dist\server\main.js:155512:21) at __webpack_require__ (C:\Users\vietp\Downloads\plugin-v9\dist\server\main.js:20:30)

A server error has occurred. node exited with 1 code.

namnhcntt commented 4 years ago

Hi @jfgouda , do you have any update for your project?