4 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit officiis modi ex sapiente numquam, facilis voluptatem, in quo accusamus ab repellat accusantium porro! At necessitatibus, obcaecati eius quo voluptatibus molestiae?
5 |
6 |
7 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit officiis modi ex sapiente numquam, facilis voluptatem, in quo accusamus ab repellat accusantium porro! At necessitatibus, obcaecati eius quo voluptatibus molestiae?
8 |
9 |
10 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit officiis modi ex sapiente numquam, facilis voluptatem, in quo accusamus ab repellat accusantium porro! At necessitatibus, obcaecati eius quo voluptatibus molestiae?
11 |
12 |
13 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit officiis modi ex sapiente numquam, facilis voluptatem, in quo accusamus ab repellat accusantium porro! At necessitatibus, obcaecati eius quo voluptatibus molestiae?
14 |
15 |
16 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit officiis modi ex sapiente numquam, facilis voluptatem, in quo accusamus ab repellat accusantium porro! At necessitatibus, obcaecati eius quo voluptatibus molestiae?
17 |
18 |
19 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit officiis modi ex sapiente numquam, facilis voluptatem, in quo accusamus ab repellat accusantium porro! At necessitatibus, obcaecati eius quo voluptatibus molestiae?
20 |
21 |
22 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit officiis modi ex sapiente numquam, facilis voluptatem, in quo accusamus ab repellat accusantium porro! At necessitatibus, obcaecati eius quo voluptatibus molestiae?
23 |
24 |
25 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit officiis modi ex sapiente numquam, facilis voluptatem, in quo accusamus ab repellat accusantium porro! At necessitatibus, obcaecati eius quo voluptatibus molestiae?
26 |
27 |
28 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit officiis modi ex sapiente numquam, facilis voluptatem, in quo accusamus ab repellat accusantium porro! At necessitatibus, obcaecati eius quo voluptatibus molestiae?
29 |
30 |
--------------------------------------------------------------------------------
/staticPage/src/app/modules/static/pages/static-page/static-page.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/incora-dev/Microfrontend-Angular/f51525d676d7de9c85e6812fb4867c718070d833/staticPage/src/app/modules/static/pages/static-page/static-page.component.scss
--------------------------------------------------------------------------------
/staticPage/src/app/modules/static/pages/static-page/static-page.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { StaticPageComponent } from './static-page.component';
4 |
5 | describe('StaticPageComponent', () => {
6 | let component: StaticPageComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ StaticPageComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(StaticPageComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/staticPage/src/app/modules/static/pages/static-page/static-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { NgxCommonUiLibService } from 'ngx-common-ui-lib';
3 |
4 | @Component({
5 | selector: 'app-static-page',
6 | templateUrl: './static-page.component.html',
7 | styleUrls: ['./static-page.component.scss']
8 | })
9 | export class StaticPageComponent implements OnInit {
10 |
11 | constructor(private service: NgxCommonUiLibService) {
12 | service.print();
13 | }
14 |
15 | ngOnInit(): void {
16 | }
17 |
18 | }
19 |
--------------------------------------------------------------------------------
/staticPage/src/app/modules/static/static.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { StaticPageComponent } from './pages/static-page/static-page.component';
4 | import { StaticRoutingModule } from './static.routing.module';
5 | import { NgxCommonUiLibModule } from 'ngx-common-ui-lib';
6 |
7 |
8 |
9 | @NgModule({
10 | declarations: [StaticPageComponent],
11 | imports: [
12 | CommonModule,
13 | StaticRoutingModule,
14 | NgxCommonUiLibModule
15 | ]
16 | })
17 | export class StaticModule { }
18 |
--------------------------------------------------------------------------------
/staticPage/src/app/modules/static/static.routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { Route, RouterModule } from '@angular/router';
4 | import { StaticPageComponent } from './pages/static-page/static-page.component';
5 |
6 | const routes: Route[] = [{ path: '', component: StaticPageComponent }]
7 |
8 | @NgModule({
9 | declarations: [],
10 | imports: [
11 | CommonModule,
12 | RouterModule.forChild(routes)
13 | ],
14 | exports: [RouterModule]
15 | })
16 | export class StaticRoutingModule { }
17 |
--------------------------------------------------------------------------------
/staticPage/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/incora-dev/Microfrontend-Angular/f51525d676d7de9c85e6812fb4867c718070d833/staticPage/src/assets/.gitkeep
--------------------------------------------------------------------------------
/staticPage/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/staticPage/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/staticPage/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/incora-dev/Microfrontend-Angular/f51525d676d7de9c85e6812fb4867c718070d833/staticPage/src/favicon.ico
--------------------------------------------------------------------------------
/staticPage/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | StaticPage
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/staticPage/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.error(err));
13 |
--------------------------------------------------------------------------------
/staticPage/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /**
22 | * IE11 requires the following for NgClass support on SVG elements
23 | */
24 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
25 |
26 | /**
27 | * Web Animations `@angular/platform-browser/animations`
28 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
29 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
30 | */
31 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
32 |
33 | /**
34 | * By default, zone.js will patch all possible macroTask and DomEvents
35 | * user can disable parts of macroTask/DomEvents patch by setting following flags
36 | * because those flags need to be set before `zone.js` being loaded, and webpack
37 | * will put import in the top of bundle, so user need to create a separate file
38 | * in this directory (for example: zone-flags.ts), and put the following flags
39 | * into that file, and then add the following code before importing zone.js.
40 | * import './zone-flags';
41 | *
42 | * The flags allowed in zone-flags.ts are listed here.
43 | *
44 | * The following flags will work for all browsers.
45 | *
46 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
47 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
48 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
49 | *
50 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
51 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
52 | *
53 | * (window as any).__Zone_enable_cross_context_check = true;
54 | *
55 | */
56 |
57 | /***************************************************************************************************
58 | * Zone JS is required by default for Angular itself.
59 | */
60 | import 'zone.js'; // Included with Angular CLI.
61 |
62 |
63 | /***************************************************************************************************
64 | * APPLICATION IMPORTS
65 | */
66 |
--------------------------------------------------------------------------------
/staticPage/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/staticPage/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(path: string, deep?: boolean, filter?: RegExp): {
12 | keys(): string[];
13 | (id: string): T;
14 | };
15 | };
16 |
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 | BrowserDynamicTestingModule,
20 | platformBrowserDynamicTesting(),
21 | { teardown: { destroyAfterEach: true }},
22 | );
23 |
24 | // Then we find all the tests.
25 | const context = require.context('./', true, /\.spec\.ts$/);
26 | // And load the modules.
27 | context.keys().map(context);
28 |
--------------------------------------------------------------------------------
/staticPage/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": [
9 | "src/main.ts",
10 | "src/polyfills.ts"
11 | ],
12 | "include": [
13 | "src/**/*.d.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/staticPage/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitReturns": true,
10 | "noFallthroughCasesInSwitch": true,
11 | "sourceMap": true,
12 | "declaration": false,
13 | "downlevelIteration": true,
14 | "experimentalDecorators": true,
15 | "moduleResolution": "node",
16 | "importHelpers": true,
17 | "target": "es2017",
18 | "module": "es2020",
19 | "lib": [
20 | "es2018",
21 | "dom"
22 | ]
23 | },
24 | "angularCompilerOptions": {
25 | "enableI18nLegacyMessageIdFormat": false,
26 | "strictInjectionParameters": true,
27 | "strictInputAccessModifiers": true,
28 | "strictTemplates": true
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/staticPage/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": [
7 | "jasmine"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts",
12 | "src/polyfills.ts"
13 | ],
14 | "include": [
15 | "src/**/*.spec.ts",
16 | "src/**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/staticPage/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require("webpack");
2 | const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
3 |
4 | module.exports = {
5 | output: {
6 | publicPath: "http://localhost:4203/",
7 | uniqueName: "staticPage",
8 | },
9 | optimization: {
10 | runtimeChunk: false,
11 | },
12 | plugins: [
13 | new ModuleFederationPlugin({
14 | name: "staticPage",
15 | library: { type: "var", name: "staticPage" },
16 | filename: "remoteEntry.js",
17 | exposes: {
18 | StaticPageModule:
19 | "./src/app/modules/static/static.module.ts",
20 | },
21 | shared: {
22 | "@angular/core": { singleton: true, requiredVersion:'auto' },
23 | "@angular/common": { singleton: true, requiredVersion:'auto' },
24 | "@angular/router": { singleton: true, requiredVersion:'auto' },
25 | "ngx-common-ui-lib": { singleton: true, requiredVersion:'auto' },
26 | },
27 | }),
28 | ],
29 | };
30 |
--------------------------------------------------------------------------------
/staticPage/webpack.prod.config.js:
--------------------------------------------------------------------------------
1 | module.exports = require("./webpack.config");
2 |
--------------------------------------------------------------------------------
/tablePage/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
18 |
--------------------------------------------------------------------------------
/tablePage/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/tablePage/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 |
16 | # IDEs and editors
17 | /.idea
18 | .project
19 | .classpath
20 | .c9/
21 | *.launch
22 | .settings/
23 | *.sublime-workspace
24 |
25 | # IDE - VSCode
26 | .vscode/*
27 | !.vscode/settings.json
28 | !.vscode/tasks.json
29 | !.vscode/launch.json
30 | !.vscode/extensions.json
31 | .history/*
32 |
33 | # misc
34 | /.sass-cache
35 | /connect.lock
36 | /coverage
37 | /libpeerconnection.log
38 | npm-debug.log
39 | yarn-error.log
40 | testem.log
41 | /typings
42 |
43 | # System Files
44 | .DS_Store
45 | Thumbs.db
46 |
--------------------------------------------------------------------------------
/tablePage/README.md:
--------------------------------------------------------------------------------
1 | # TablePage
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.4.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
28 |
--------------------------------------------------------------------------------
/tablePage/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "tablePage": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:component": {
10 | "style": "scss"
11 | },
12 | "@schematics/angular:application": {
13 | "strict": true
14 | }
15 | },
16 | "root": "",
17 | "sourceRoot": "src",
18 | "prefix": "app",
19 | "architect": {
20 | "build": {
21 | "builder": "ngx-build-plus:browser",
22 | "options": {
23 | "outputPath": "dist/tablePage",
24 | "index": "src/index.html",
25 | "main": "src/main.ts",
26 | "polyfills": "src/polyfills.ts",
27 | "tsConfig": "tsconfig.app.json",
28 | "inlineStyleLanguage": "scss",
29 | "assets": [
30 | "src/favicon.ico",
31 | "src/assets"
32 | ],
33 | "styles": [
34 | "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
35 | "src/styles.scss"
36 | ],
37 | "scripts": [],
38 | "extraWebpackConfig": "webpack.config.js"
39 | },
40 | "configurations": {
41 | "production": {
42 | "budgets": [
43 | {
44 | "type": "initial",
45 | "maximumWarning": "500kb",
46 | "maximumError": "1mb"
47 | },
48 | {
49 | "type": "anyComponentStyle",
50 | "maximumWarning": "2kb",
51 | "maximumError": "100kb"
52 | }
53 | ],
54 | "fileReplacements": [
55 | {
56 | "replace": "src/environments/environment.ts",
57 | "with": "src/environments/environment.prod.ts"
58 | }
59 | ],
60 | "outputHashing": "all",
61 | "extraWebpackConfig": "webpack.prod.config.js"
62 | },
63 | "development": {
64 | "buildOptimizer": false,
65 | "optimization": false,
66 | "vendorChunk": true,
67 | "extractLicenses": false,
68 | "sourceMap": true,
69 | "namedChunks": true
70 | }
71 | },
72 | "defaultConfiguration": "production"
73 | },
74 | "serve": {
75 | "builder": "ngx-build-plus:dev-server",
76 | "configurations": {
77 | "production": {
78 | "browserTarget": "tablePage:build:production"
79 | },
80 | "development": {
81 | "browserTarget": "tablePage:build:development",
82 | "extraWebpackConfig": "webpack.config.js",
83 | "port": 4202
84 | }
85 | },
86 | "defaultConfiguration": "development"
87 | },
88 | "extract-i18n": {
89 | "builder": "@angular-devkit/build-angular:extract-i18n",
90 | "options": {
91 | "browserTarget": "tablePage:build"
92 | }
93 | },
94 | "test": {
95 | "builder": "ngx-build-plus:karma",
96 | "options": {
97 | "main": "src/test.ts",
98 | "polyfills": "src/polyfills.ts",
99 | "tsConfig": "tsconfig.spec.json",
100 | "karmaConfig": "karma.conf.js",
101 | "inlineStyleLanguage": "scss",
102 | "assets": [
103 | "src/favicon.ico",
104 | "src/assets"
105 | ],
106 | "styles": [
107 | "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
108 | "src/styles.scss"
109 | ],
110 | "scripts": [],
111 | "extraWebpackConfig": "webpack.config.js"
112 | }
113 | }
114 | }
115 | }
116 | },
117 | "defaultProject": "tablePage"
118 | }
119 |
--------------------------------------------------------------------------------
/tablePage/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/tablePage'),
29 | subdir: '.',
30 | reporters: [
31 | { type: 'html' },
32 | { type: 'text-summary' }
33 | ]
34 | },
35 | reporters: ['progress', 'kjhtml'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false,
42 | restartOnFileChange: true
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/tablePage/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "table-page",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "~12.2.0",
14 | "@angular/cdk": "^12.2.5",
15 | "@angular/common": "~12.2.0",
16 | "@angular/compiler": "~12.2.0",
17 | "@angular/core": "~12.2.0",
18 | "@angular/forms": "~12.2.0",
19 | "@angular/material": "^12.2.5",
20 | "@angular/platform-browser": "~12.2.0",
21 | "@angular/platform-browser-dynamic": "~12.2.0",
22 | "@angular/router": "~12.2.0",
23 | "rxjs": "~6.6.0",
24 | "tslib": "^2.3.0",
25 | "zone.js": "~0.11.4"
26 | },
27 | "devDependencies": {
28 | "@angular-devkit/build-angular": "~12.2.4",
29 | "@angular/cli": "~12.2.4",
30 | "@angular/compiler-cli": "~12.2.0",
31 | "@types/jasmine": "~3.8.0",
32 | "@types/node": "^12.11.1",
33 | "jasmine-core": "~3.8.0",
34 | "karma": "~6.3.0",
35 | "karma-chrome-launcher": "~3.1.0",
36 | "karma-coverage": "~2.0.3",
37 | "karma-jasmine": "~4.0.0",
38 | "karma-jasmine-html-reporter": "~1.7.0",
39 | "ngx-build-plus": "^12.2.0",
40 | "typescript": "~4.3.5"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/tablePage/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 | import { TableModule } from './modules/table/table.module';
4 |
5 | const routes: Routes = [];
6 |
7 | @NgModule({
8 | imports: [RouterModule.forRoot(routes), TableModule],
9 | exports: [RouterModule]
10 | })
11 | export class AppRoutingModule { }
12 |
--------------------------------------------------------------------------------
/tablePage/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/tablePage/src/app/app.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/incora-dev/Microfrontend-Angular/f51525d676d7de9c85e6812fb4867c718070d833/tablePage/src/app/app.component.scss
--------------------------------------------------------------------------------
/tablePage/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { RouterTestingModule } from '@angular/router/testing';
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async () => {
7 | await TestBed.configureTestingModule({
8 | imports: [
9 | RouterTestingModule
10 | ],
11 | declarations: [
12 | AppComponent
13 | ],
14 | }).compileComponents();
15 | });
16 |
17 | it('should create the app', () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.componentInstance;
20 | expect(app).toBeTruthy();
21 | });
22 |
23 | it(`should have as title 'tablePage'`, () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | const app = fixture.componentInstance;
26 | expect(app.title).toEqual('tablePage');
27 | });
28 |
29 | it('should render title', () => {
30 | const fixture = TestBed.createComponent(AppComponent);
31 | fixture.detectChanges();
32 | const compiled = fixture.nativeElement as HTMLElement;
33 | expect(compiled.querySelector('.content span')?.textContent).toContain('tablePage app is running!');
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/tablePage/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.scss']
7 | })
8 | export class AppComponent {
9 | title = 'tablePage';
10 | }
11 |
--------------------------------------------------------------------------------
/tablePage/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AppRoutingModule } from './app-routing.module';
5 | import { AppComponent } from './app.component';
6 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
7 |
8 | @NgModule({
9 | declarations: [
10 | AppComponent
11 | ],
12 | imports: [
13 | BrowserModule,
14 | AppRoutingModule,
15 | BrowserAnimationsModule
16 | ],
17 | providers: [],
18 | bootstrap: [AppComponent]
19 | })
20 | export class AppModule { }
21 |
--------------------------------------------------------------------------------
/tablePage/src/app/modules/table/components/paginated-table/paginated-table.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
No.
7 |
{{element.position}}
8 |
9 |
10 |
11 |
12 |
Name
13 |
{{element.name}}
14 |
15 |
16 |
17 |
18 |
Weight
19 |
{{element.weight}}
20 |
21 |
22 |
23 |
24 |
Symbol
25 |
{{element.symbol}}
26 |
27 |
28 |
29 |
30 |
31 |
32 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/tablePage/src/app/modules/table/components/paginated-table/paginated-table.component.scss:
--------------------------------------------------------------------------------
1 | @import "~@angular/material/prebuilt-themes/indigo-pink.css";
2 |
3 | table {
4 | width: 100%;
5 | }
6 |
--------------------------------------------------------------------------------
/tablePage/src/app/modules/table/components/paginated-table/paginated-table.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { PaginatedTableComponent } from './paginated-table.component';
4 |
5 | describe('PaginatedTableComponent', () => {
6 | let component: PaginatedTableComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ PaginatedTableComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(PaginatedTableComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/tablePage/src/app/modules/table/components/paginated-table/paginated-table.component.ts:
--------------------------------------------------------------------------------
1 | import { AfterViewInit, Component, ViewChild } from '@angular/core';
2 | import {MatPaginator} from '@angular/material/paginator';
3 | import {MatTableDataSource} from '@angular/material/table';
4 |
5 | @Component({
6 | selector: 'app-paginated-table',
7 | templateUrl: './paginated-table.component.html',
8 | styleUrls: ['./paginated-table.component.scss']
9 | })
10 | export class PaginatedTableComponent implements AfterViewInit {
11 | displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
12 | dataSource = new MatTableDataSource(ELEMENT_DATA);
13 |
14 | @ViewChild(MatPaginator) paginator?: MatPaginator;
15 |
16 | ngAfterViewInit() {
17 | this.dataSource.paginator = this.paginator!;
18 | }
19 | }
20 |
21 | export interface PeriodicElement {
22 | name: string;
23 | position: number;
24 | weight: number;
25 | symbol: string;
26 | }
27 |
28 | const ELEMENT_DATA: PeriodicElement[] = [
29 | {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
30 | {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
31 | {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
32 | {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
33 | {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
34 | ];
35 |
--------------------------------------------------------------------------------
/tablePage/src/app/modules/table/pages/table-page/table-page.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/tablePage/src/app/modules/table/pages/table-page/table-page.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/incora-dev/Microfrontend-Angular/f51525d676d7de9c85e6812fb4867c718070d833/tablePage/src/app/modules/table/pages/table-page/table-page.component.scss
--------------------------------------------------------------------------------
/tablePage/src/app/modules/table/pages/table-page/table-page.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { TablePageComponent } from './table-page.component';
4 |
5 | describe('TablePageComponent', () => {
6 | let component: TablePageComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ TablePageComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(TablePageComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/tablePage/src/app/modules/table/pages/table-page/table-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-table-page',
5 | templateUrl: './table-page.component.html',
6 | styleUrls: ['./table-page.component.scss']
7 | })
8 | export class TablePageComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit(): void {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/tablePage/src/app/modules/table/table-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule, Routes } from '@angular/router';
4 | import { TablePageComponent } from './pages/table-page/table-page.component';
5 |
6 | const routes: Routes = [{ path: '', component: TablePageComponent }];
7 |
8 | @NgModule({
9 | declarations: [],
10 | imports: [
11 | CommonModule,
12 | RouterModule.forChild(routes)
13 | ],
14 | exports: [RouterModule]
15 | })
16 | export class TableRoutingModule { }
17 |
--------------------------------------------------------------------------------
/tablePage/src/app/modules/table/table.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { TablePageComponent } from './pages/table-page/table-page.component';
4 | import { PaginatedTableComponent } from './components/paginated-table/paginated-table.component';
5 | import { MatTableModule } from '@angular/material/table';
6 | import { MatPaginatorModule } from '@angular/material/paginator';
7 | import { TableRoutingModule } from './table-routing.module';
8 |
9 |
10 | @NgModule({
11 | declarations: [
12 | PaginatedTableComponent,
13 | TablePageComponent
14 | ],
15 | imports: [
16 | CommonModule,
17 | TableRoutingModule,
18 | MatTableModule,
19 | MatPaginatorModule
20 | ]
21 | })
22 | export class TableModule { }
23 |
--------------------------------------------------------------------------------
/tablePage/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/incora-dev/Microfrontend-Angular/f51525d676d7de9c85e6812fb4867c718070d833/tablePage/src/assets/.gitkeep
--------------------------------------------------------------------------------
/tablePage/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/tablePage/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/tablePage/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/incora-dev/Microfrontend-Angular/f51525d676d7de9c85e6812fb4867c718070d833/tablePage/src/favicon.ico
--------------------------------------------------------------------------------
/tablePage/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | TablePage
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/tablePage/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.error(err));
13 |
--------------------------------------------------------------------------------
/tablePage/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /**
22 | * IE11 requires the following for NgClass support on SVG elements
23 | */
24 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
25 |
26 | /**
27 | * Web Animations `@angular/platform-browser/animations`
28 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
29 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
30 | */
31 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
32 |
33 | /**
34 | * By default, zone.js will patch all possible macroTask and DomEvents
35 | * user can disable parts of macroTask/DomEvents patch by setting following flags
36 | * because those flags need to be set before `zone.js` being loaded, and webpack
37 | * will put import in the top of bundle, so user need to create a separate file
38 | * in this directory (for example: zone-flags.ts), and put the following flags
39 | * into that file, and then add the following code before importing zone.js.
40 | * import './zone-flags';
41 | *
42 | * The flags allowed in zone-flags.ts are listed here.
43 | *
44 | * The following flags will work for all browsers.
45 | *
46 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
47 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
48 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
49 | *
50 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
51 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
52 | *
53 | * (window as any).__Zone_enable_cross_context_check = true;
54 | *
55 | */
56 |
57 | /***************************************************************************************************
58 | * Zone JS is required by default for Angular itself.
59 | */
60 | import 'zone.js'; // Included with Angular CLI.
61 |
62 |
63 | /***************************************************************************************************
64 | * APPLICATION IMPORTS
65 | */
66 |
--------------------------------------------------------------------------------
/tablePage/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
3 | html, body { height: 100%; }
4 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
5 |
--------------------------------------------------------------------------------
/tablePage/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(path: string, deep?: boolean, filter?: RegExp): {
12 | keys(): string[];
13 | (id: string): T;
14 | };
15 | };
16 |
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 | BrowserDynamicTestingModule,
20 | platformBrowserDynamicTesting(),
21 | { teardown: { destroyAfterEach: true }},
22 | );
23 |
24 | // Then we find all the tests.
25 | const context = require.context('./', true, /\.spec\.ts$/);
26 | // And load the modules.
27 | context.keys().map(context);
28 |
--------------------------------------------------------------------------------
/tablePage/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": [
9 | "src/main.ts",
10 | "src/polyfills.ts"
11 | ],
12 | "include": [
13 | "src/**/*.d.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/tablePage/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitReturns": true,
10 | "noFallthroughCasesInSwitch": true,
11 | "sourceMap": true,
12 | "declaration": false,
13 | "downlevelIteration": true,
14 | "experimentalDecorators": true,
15 | "moduleResolution": "node",
16 | "importHelpers": true,
17 | "target": "es2017",
18 | "module": "es2020",
19 | "lib": [
20 | "es2018",
21 | "dom"
22 | ]
23 | },
24 | "angularCompilerOptions": {
25 | "enableI18nLegacyMessageIdFormat": false,
26 | "strictInjectionParameters": true,
27 | "strictInputAccessModifiers": true,
28 | "strictTemplates": true
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/tablePage/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": [
7 | "jasmine"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts",
12 | "src/polyfills.ts"
13 | ],
14 | "include": [
15 | "src/**/*.spec.ts",
16 | "src/**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/tablePage/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require("webpack");
2 | const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
3 |
4 | module.exports = {
5 | output: {
6 | publicPath: "http://localhost:4202/",
7 | uniqueName: "table",
8 | },
9 | optimization: {
10 | runtimeChunk: false,
11 | },
12 | plugins: [
13 | new ModuleFederationPlugin({
14 | name: "table",
15 | library: { type: "var", name: "table" },
16 | filename: "remoteEntry.js",
17 | exposes: {
18 | TablePageModule:
19 | "./src/app/modules/table/table.module.ts",
20 | },
21 | shared: {
22 | "@angular/core": { singleton: true, requiredVersion:'auto' },
23 | "@angular/common": { singleton: true, requiredVersion:'auto' },
24 | "@angular/router": { singleton: true, requiredVersion:'auto' },
25 | "@angular/material": { singleton: true, requiredVersion:'auto' },
26 | },
27 | }),
28 | ],
29 | };
30 |
--------------------------------------------------------------------------------
/tablePage/webpack.prod.config.js:
--------------------------------------------------------------------------------
1 | module.exports = require("./webpack.config");
2 |
--------------------------------------------------------------------------------