manfredsteyer / angular-microapp Goto Github PK

JavaScript 10.09% TypeScript 11.92% CSS 76.26% HTML 1.73%

angular-microapp's Introduction

Micro Apps with Web Components and Angular Elements

This example consists of three Angular projects that demonstrate how to use Web Components/ Angular Elements to implement a shell that loads micro apps:

shell (/src): Shell loading micro apps
client-a (/projects/client-a): Demo micro app
client-b (/projects/client-b): Another demo micro app

Install Dependencies

npm install

Standalone

For debugging and testing, you can start each of those projects individually. Please note that the shell will throw some exceptions when doing so because it does not find the micro apps that are expected in an sub folder for the sake of simplicity.

Use one of the following commands for this:

ng serve --project shell --open
ng serve --project client-a --open
ng serve --project client-b --open

Everything together

For using everything together, you have to build the example and run it:

npm run build
npm start

angular-microapp's People

Contributors

Stargazers

Watchers

Forkers

messan arnetesch dherges jochendiekenbrock mkmurali lulzzz railsstudent christiangalsterer leolcao jdiaz-stratio andr-pash mathiasstadler scheuchzer jstahovic einfachtuen dannyan bhaidar aarlin karvish dmorosinotto juliopk pauld1980 saiteja3963 sanayafai milindhemmady krlosg loetscher shreetechart julianhm9612 aswanabidin david0603 viethien serpek yavuztor chris-house lrodentx johnsnow20087349 earnestcpy peterkassenaar wubob gtyamamoto angelfraga smarkle abumuawiyah tobmaster dedalusmax asachan2707 sivateja1239 redhatgrsenthil khetwaldeepak chriskeck nlosinsky onlybye sathyarajagopal elmessoudizakaria spotlight2001 abeastofprey srinivas-palakurti cmyk1 angulartx haha751 venkyg1986 yudak linnenschmidt aj058522 frankitoy nishantvaidya fede-sc ineba mwxmielke raghav009 jkumarraj ionbogatu evandropsantos essquare amareshsahoo irtyamine jfinancial gojain anusha9867 kam9077

angular-microapp's Issues

master branch not working for angular 8

master branch not working after migration to angular 8. What is required to fix

Using RouterModule.forChild() in Sub Application

Hello,

I'd like to make the sub-application's route to become sub-route of one of the main-application's route, e.g.

main-app: http://localhost:8080/element
client-a: http://locatlhost:8080/element/client-a
client-a: http://locatlhost:8080/element/client-a/page1
client-a: http://locatlhost:8080/element/client-a/page2

But when I change the RouterModule.forRoot() into RouterModule.forChild() in client-a's app.module.ts file like this:

I'm always getting StaticInjectorError as follow when the main-application is trying to load the client-a's main.js:

which seems because client-a's AppModule constructor can't find the proper Injector parameter:

Can anybody help to let me know how can I successfully achieve this?

Thank You

Unloading the bundle

This is an excellent concept you have achieved in angular that we have tried for long. Later, we have done the similar application in react where we add and remove the required bundle while we route from one microapp to other. But here you have loaded all the bundles initially. This may consume the browser memory.

(Query): Lazy loaded modules in the Angular Element Project

Thanks for the sample project. I tried adding lazy loaded modules in client a, the compilation goes through but at runtime I get Uncaught Error: Zone already loaded and customelementregistry' this name has already been used with this registry.
Do we need to do anything differently to have lazy loaded module in external application which is loaded as angular element?

Missing css while adding an extern angular project

Thank you for sharing your approach to setup micro apps with angular/elements.
I tried to extend your example with a separate angular project which I than successful compile with ngx-build-plus. The application starts bus misses the css styles from the original project. The external project uses libraries like PrimeNg or bootstrap. It seems that the css information does not get passed. Is there a way to provide an angular custom element with all original css styles?

Zone error on initialization of the client-a-widget

@manfredsteyer First of all congratulations on a fabulous POC for using Web Components for Micro- frontends .
While the client-b gets rendered we get a Zone error thrown for the client-a-widget
"Uncaught Error: Expected to not be in Angular Zone, but it is!"
A screen shot is attached

BTW: This error is not due to using it in the client-b web component as this happens even if we use the client-a-widget within client-a itself. Could this be a bug in Angular Elements ?

main.bundle.js not found for client-a and client-b

Modules bundles are available at .../main.js and not .../main.bundle.js

Is it possible to add client-a/main.js into a none angular project

As like below, can I add it to a simple HTML page.

I tried though, I am getting "Uncaught Error: In this configuration Angular requires Zone.js" error and I tried adding zone.js file as mentioned in the other issue, but still getting the same error. Any help here?

<head>
    <title>Demo Page</title>
</head>
<body>
    <client-a></client-a>
    <script src="dist/shell/client-a/main.js"></script>
</body>
</html>

ASP.NET Core 2.2 Logging with NLog

My logs are not inserted into database.But logs are stored in file succesfully.
Here is my 'nlog.cofig"


<?xml version="1.0" encoding="utf-8" ?>
<nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <targets>
    <target xsi:type="File" name ="allfile" fileName="D:\Playground\asp_net\AspdotnetCore\internal-nlog.txt"/>
         <extensions>
    <add assembly="NLog.Web.AspNetCore"/>
    <add assembly="NLog.Appsettings.Standard"/>
  </extensions>
    <target name="database" xsi:type="Database" keepConnection="true" useTransactions="true"
             dbProvider="System.Data.SqlClient" 
             connectionString="data source=localhost;initial catalog=EmployeeDB;integrated security=false;persist security info=True;Trusted_Connection=True;" 
              commandText="INSERT INTO Logs(EventDateTime, EventLevel, UserName, MachineName, EventMessage, Filename, ErrorClass, ErrorMethod, ErrorMessage, InnerErrorMessage) VALUES (@EventDateTime, @EventLevel, @UserName, @MachineName, @EventMessage, @Filename, @ErrorClass, @ErrorMethod, @ErrorMessage, @InnerErrorMessage)">    
      <parameter name="@EventDateTime" layout="${date:s}" />
      <parameter name="@EventLevel" layout="${level}" />
      <parameter name="@UserName" layout="${identity}" />
      <parameter name="@MachineName" layout="${machinename}" />
      <parameter name="@EventMessage" layout="${message}" />
      <parameter name="@Filename" layout="${callsite:filename=true}" />
      <parameter name="@ErrorClass" layout="${callsite:class=true}" />
      <parameter name="@ErrorMethod" layout="${callsite:method=true}" />
      <parameter name="@ErrorMessage" layout="${exception}" />
      <parameter name="@InnerErrorMessage" layout="${stacktrace}" />
    </target>
  </targets>
  <rules>
      <logger name="database" minlevel="Trace"  writeTo="database" />
    <logger name ="file" minlevel="Trace" writeTo="allfile"></logger>
  </rules>
</nlog>

My Controller where i am calling this logger:-
using System;
using System.Collections;
using System.Collections.Generic;
using System.Threading.Tasks;
using AspdotnetCore.cars;
using AspdotnetCore.YTBModels;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using NLog;
using NLog.Extensions.Logging;

namespace AspdotnetCore.controllers
{
public class HomeController
{
private static Logger logger = LogManager.GetLogger("file"); // For file
private static Logger log=LogManager.GetLogger("database"); // For Name

public HomeController()
{
}
public string Index()
{
logger.Warn("inside file logger from logger"); // It is writing file successfully
log.Warn("inside index from log"); // It is not inserted into database table.
return "In index method";
}
}
}

Serving standalone micro app to be included in shell.

Hi,
Is there a way for navbar and sidebar elements to use their own module? if yes, this will allow us to test each element separately.

For serving standalone micro app to be included in shell.

navbar
npm run start:micro-app -- --port=4201

sidebar
npm run start:micro-app -- --port=4202

Lazy loading in shell

<navbar-cmp *axLazyElement="http://localhost:4201/main.js"></navbar-cmp>
<sidebar-cmp *axLazyElement="http://localhost:4202/main.js"></sidebar-cmp>

Any advice here?

Failed to load resource: /client-a/main.bundle.js

Firstly, thank you for putting the work on this repo, its much appreciated.

Issue: After cloning your repo and running it, the app can't load the web components client-a and client-b

Steps to reproduce:

Clone the repo
npm run build
npm start

Main Application Child Routes

How do i implement child routes in Main Shell application.
If i give child routes in Main Applications. From that Component i am trying to navigate it to the 'Client-a' application. It is getting error like cannot find any routes 'client-a/page1'.
Can you provide the solution for this.
Waiting for your response

sharing the same injector between the projects

Hello,

we created a new Project based on this angular-microapp example. We have an issue where we have a SpinnerService in the parent application which we also want to inject in the child-projects. If we do so, there is a new instance of this service injected. I think the problem is, that the projects don't share the same Injector. Do someone have an idea how to solve this problem?

When building Sequelize Node application (mssql) with Webpack

:245:13
internal/validators.js:125
throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
^

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
at validateString (internal/validators.js:125:11)
at Object.dirname (path.js:646:5)
at Sequelize.import (webpack:///./node_modules/sequelize/lib/sequelize.js?:390:31)
at Object.exports.getModels (webpack:///./models/db.tables.ts?:7:35)
at eval (webpack:///./src/app.ts?:44:23)
at Object../src/app.ts (D:\Playground\Nodejs\typescript-node\build\main.js:10372:1)
at webpack_require (D:\Playground\Nodejs\typescript-node\build\main.js:20:30)
at eval (webpack:///./src/server.ts?:4:13)
at Object../src/server.ts (D:\Playground\Nodejs\typescript-node\build\main.js:10384:1)
at webpack_require (D:\Playground\Nodejs\typescript-node\build\main.js:20:30)
at D:\Playground\Nodejs\typescript-node\build\main.js:84:18
at Object. (D:\Playground\Nodejs\typescript-node\build\main.js:87:10)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
[nodemon] app crashed - waiting for file changes before starting...

can anyone provide solution for this