Lazy load is not working in Tailor SPA if more than one angular apps present

[DhanasekaranSelvaraj]

Hi Folks,

I am trying to create POC of multiple angular apps with lazy loaded bundle in Tailor SPA But i started facing many issues as below.

1. Default ng-cli build not rendering in Tailor if more than one angular apps are there (Known behavior of Angular because of some global scope) - I solved this by using custom webpack configuration
2. Then i started facing issue with zone.js - After went through many blogs i understood that zone.js should be included only once in the browser session. - I solved this by commenting out zone.js in all other angular app's polyfill.ts file except main angular app
3. Next issue started while implementing LazyLoad in individual applications :

• I made following changes in webpack.config.js to use lazyload feature as mentioned in Tailor docs

• In individual applications lazy load works fine and even it works fine in Tailor if only one angular app existing

4. If Lazy Load implemented in two angular apps

• Initially application is rendering properly

• I can able to lazy load chunk file from anyone of the apps

• Once if i lazy loaded any of the chunks, If i try to load another chunk file from another child application, then it breaks :(

Please use this repository to reproduce the issue.
https://github.com/DhanasekaranSelvaraj/Tailor-Multiple-Angular-POC

How to reproduce:

• It contains one portal and two angular applications.

• Run npm install in main folder and go to child-apps folder and run npm install inside both the angular apps

• Run npm run build:webpack to generate webpack bundle

• Come to main portal folder and run npm run start in one terminal and npm run start-fragments in another terminal

• Open http://localhost:8080 in browser to see the application in action.

It would be really helpful, If i get a solution for this and if we are able to use default ng-cli build it would be added advantage.

[kevinsimper]

Hi @DhanasekaranSelvaraj

Great that you created the issue, and great adding a git repo to reproduce it, however, it looks like the two submodule angular apps in the child-apps are not available to the public. You can click and see here in the github interface https://github.com/DhanasekaranSelvaraj/Tailor-Multiple-Angular-POC/tree/master/child-apps

The first thought is that Tailor does not impose any limitations on how applications are loaded.

The first test to debug what is wrong is to create a index.html and include the two script tags without using Tailor.js and get that working first before making it work with tailor, this way you can eliminate one dependency that can cause a problem 😄

[DhanasekaranSelvaraj]

Hi @kevinsimper ,

Somehow it was not pushed properly. Now it is available in the same repo.

I agree that Tailor is not having any restrictions, But If i can resolve these kind of issues without Tailor as you mentioned then why we should select Tailor? We can host all our child applications in individual servers and can include js files in main index.html file, Isn't it? :)

So when a user chooses Tailor kind of frameworks, We would expect these kind of multiple angular application issues might not be there :)

Here in this case we have 5 child applications, some of them are in Angular and some of them in React and all of them are developed by independent teams. So it would be great if i am not making more changes in the child application's configurations. If you have any other suggestion to resolve this issue it would be great. 💃

[DhanasekaranSelvaraj]

Ok. @kevinsimper. Here is the update after trying multiple scenarios. it might be helpful for others.

Now I have added two more angular applications of version 6 along with existing two angular 7 apps.

1. Able to render multiple angular apps with (v7 - Lazy loaded Module)
   2.Able to render multiple angular apps with (v6 - Lazy loaded Module)
2. Able to render multiple version of angular apps with (v7 - Lazy loaded Module) and (v6 - Normal Modules)

But Still something is breaking in the below scenario
4. unable to render multiple version of angular apps with (v7 - Lazy loaded Module) and (v6 - Lazy Loaded Modules)

Please find below stackstrace
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined TypeError: Cannot read property 'call' of undefined at o (main.js:1) at main.js:1146 at e.invoke (polyfills.js:16) at Object.onInvoke (main.js:222) at e.invoke (polyfills.js:16) at t.run (polyfills.js:16) at polyfills.js:16 at e.invokeTask (polyfills.js:16) at Object.onInvokeTask (main.js:222) at e.invokeTask (polyfills.js:16) at z (polyfills.js:16) at z (polyfills.js:16) at polyfills.js:16 at e.invokeTask (polyfills.js:16) at Object.onInvokeTask (main.js:222) at e.invokeTask (polyfills.js:16) at t.runTask (polyfills.js:16) at g (polyfills.js:16) at t.invokeTask [as invoke] (polyfills.js:16) at m (polyfills.js:47) $e @ main.js:143 e.handleError @ main.js:150 next @ main.js:236 t.object.i @ main.js:222 t.__tryOrUnsub @ main.js:907 t.next @ main.js:907 t._next @ main.js:907 t.next @ main.js:907 t.next @ main.js:1061 t.emit @ main.js:222 (anonymous) @ main.js:222 e.invoke @ polyfills.js:16 t.run @ polyfills.js:16 e.runOutsideAngular @ main.js:222 onHandleError @ main.js:222 e.handleError @ polyfills.js:16 t.runGuarded @ polyfills.js:16 e @ polyfills.js:16 r.microtaskDrainDone @ polyfills.js:16 g @ polyfills.js:16 t.invokeTask @ polyfills.js:16 m @ polyfills.js:47 k @ polyfills.js:47

[kevinsimper]

@DhanasekaranSelvaraj I don't think angular then can function on the same page, it seems like it is too invasive and leaks stuff to the global object.

Have you tried this example app? https://github.com/zalando/tailor/tree/master/examples/basic-css-and-js Does that work for you? 😄

[DhanasekaranSelvaraj]

So here is the update after going through many blogs. Follow below steps to make lazyload works when you are working with multiple Angular apps.

1. Use custom webpack configuration. (Ex: https://angular-guru.com/blog/angular-webpack)
2. Use 'publicPath' property in your webpack config
3. Use 'library' attribute to mention unique name for app level bundles. This will isolate Zone.js from browser global namespace.

Hope this will help others.

[melpakkam]

Hi Dhanashekar,
I downloaded your sample application but get error when I npm run start. Here is the log. Can you let me know what is wrong?
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]prestart: [email protected]
6 info lifecycle [email protected]start: [email protected]
7 verbose lifecycle [email protected]start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\Github\Tailor-Multiple-Angular-POC\child-apps\app-one-angular-v7\node_modules.bin;C:\Program Files\Microsoft MPI\Bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;D:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn;D:\Program Files\Microsoft SQL Server\130\Tools\Binn;D:\Program Files (x86)\Microsoft SQL Server\130\DTS\Binn;D:\Program Files\Microsoft SQL Server\130\DTS\Binn;D:\Program Files\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn;D:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn;D:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn\ManagementStudio;C:\Program Files\dotnet;C:\Program Files (x86)\dotnet;C:\Users\MKS\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Allscripts Sunrise\Helios\8.4\HeliosConnect\Helios\Bin;C:\Program Files\Microsoft VS Code\bin;C:\Program Files\nodejs;C:\Users\MKS\AppData\Local\Microsoft\WindowsApps;C:\Users\MKS\AppData\Roaming\npm;C:\Users\MKS\AppData\Local\GitHubDesktop\bin
9 verbose lifecycle [email protected]start: CWD: D:\Github\Tailor-Multiple-Angular-POC\child-apps\app-one-angular-v7
10 silly lifecycle [email protected]start: Args: [ '/d /s /c', 'node fragment.js' ]
11 silly lifecycle [email protected]start: Returned: code: 1 signal: null
12 info lifecycle [email protected]start: Failed to exec start script
13 verbose stack Error: [email protected] start: node fragment.js
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:198:13)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:198:13)
13 verbose stack at maybeClose (internal/child_process.js:982:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd D:\Github\Tailor-Multiple-Angular-POC\child-apps\app-one-angular-v7
16 verbose Windows_NT 10.0.14393
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "start"
18 verbose node v10.16.3
19 verbose npm v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] start: node fragment.js
22 error Exit status 1
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]