├── .github └── workflows │ └── build.yml ├── .gitignore ├── .ncurc.json ├── .npmignore ├── .vscode └── launch.json ├── Gruntfile.js ├── LICENSE ├── README.md ├── angular.json ├── package.json ├── projects └── angular-compile │ ├── .eslintrc.json │ ├── .gitkeep │ ├── README.md │ ├── karma.conf.js │ ├── ng-package.json │ ├── package.json │ ├── src │ ├── index.ts │ ├── lib │ │ ├── angular-compile.component.ts │ │ └── angular-compile.module.ts │ ├── public-api.ts │ └── test.ts │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ └── tsconfig.spec.json ├── src ├── app │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.ts │ └── app.module.ts ├── assets │ └── .gitkeep ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.scss └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── yarn.lock /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: build 5 | 6 | on: 7 | schedule: 8 | - cron: '0 0 1 * *' 9 | push: 10 | branches: [ master ] 11 | pull_request: 12 | branches: [ master ] 13 | 14 | jobs: 15 | build: 16 | 17 | runs-on: ubuntu-latest 18 | 19 | strategy: 20 | matrix: 21 | node-version: ['lts/*'] 22 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 23 | 24 | steps: 25 | - uses: actions/checkout@v2 26 | - name: Use Node.js ${{ matrix.node-version }} 27 | uses: actions/setup-node@v2 28 | with: 29 | node-version: ${{ matrix.node-version }} 30 | - run: npm i -g grunt-cli 31 | - run: npm install 32 | - run: grunt 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /.angular/cache 2 | /node_modules 3 | /build 4 | /dist 5 | .idea/workspace.xml 6 | .idea/tasks.xml 7 | .idea/profiles_settings.xml 8 | .idea/inspectionProfiles/Project_Default.xml 9 | .idea/inspectionProfiles/profiles_settings.xml 10 | 11 | node_modules/.yarn-integrity 12 | 13 | -------------------------------------------------------------------------------- /.ncurc.json: -------------------------------------------------------------------------------- 1 | { 2 | "reject": [ 3 | "core-js", 4 | "reflect-metadata", 5 | "rxjs", 6 | "tslib", 7 | "zone.js", 8 | "typescript", 9 | "karma", 10 | "ng-packagr", 11 | "eslint" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | /artifacts 3 | /build 4 | /test 5 | /node_modules 6 | /*.iml 7 | /*.ipr 8 | /*.iws 9 | /.travis.yml 10 | /.scrutinizer.yml 11 | /Gruntfile.js 12 | /*.lock 13 | *.log 14 | /corifeus-boot.json 15 | 16 | 17 | # Corifeus / P3X 18 | /tsconfig* 19 | /dist/node_modules 20 | /dist/test 21 | /src 22 | /src-save 23 | /index.ts 24 | 25 | # need to allow ts for awesome=typscript-loader 26 | 27 | /.github 28 | /.vscode -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | 8 | { 9 | "outputCapture": "std", 10 | "type": "node", 11 | "request": "launch", 12 | "name": "npm run start", 13 | "args": [ 14 | "run", 15 | "start" 16 | ], 17 | "skipFiles": [ 18 | "/**" 19 | ], 20 | "cwd": "${workspaceRoot}", 21 | "runtimeExecutable": "npm", 22 | "runtimeArgs": [ 23 | "--preserve-symlinks" 24 | ] 25 | } 26 | ] 27 | } -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | const utils = require('corifeus-utils'); 2 | const path = require('path') 3 | const fs = require('fs').promises 4 | 5 | module.exports = (grunt) => { 6 | 7 | const builder = require(`corifeus-builder`); 8 | const loader = new builder.loader(grunt); 9 | loader.js({ 10 | replacer: { 11 | type: 'p3x', 12 | }, 13 | config: { 14 | htmlmin: { 15 | dist: { 16 | options: { // Target options 17 | removeComments: true, 18 | collapseWhitespace: true, 19 | minifyCSS: true, 20 | }, 21 | files: { 22 | './dist/angular-compile-workspace/index.html': './dist/angular-compile-workspace/index.html' 23 | } 24 | } 25 | }, 26 | } 27 | }); 28 | 29 | 30 | grunt.registerTask('publish', async function () { 31 | const done = this.async(); 32 | 33 | try { 34 | await builder.utils.spawn({ 35 | grunt: grunt, 36 | gruntThis: this, 37 | }, { 38 | cmd: 'npm', 39 | args: [ 40 | 'run', 41 | 'build-lib', 42 | ] 43 | }); 44 | done() 45 | } catch (e) { 46 | done(e) 47 | } 48 | 49 | }); 50 | 51 | grunt.registerTask('build', async function () { 52 | const done = this.async(); 53 | 54 | try { 55 | await builder.utils.spawn({ 56 | grunt: grunt, 57 | gruntThis: this, 58 | }, { 59 | cmd: process.platform === 'win32' ? 'cmd' : 'npm', // Use cmd for Windows 60 | args: process.platform === 'win32' 61 | ? ['/c', 'npm', 'run', 'build-app'] // Correctly pass the command in Windows 62 | : ['run', 'build-app'], // For non-Windows platforms 63 | }); 64 | done() 65 | } catch (e) { 66 | done(e) 67 | } 68 | 69 | }); 70 | 71 | 72 | const defaultTask = builder.config.task.build.js.concat(['cory-angular-hook-lib', 'cory-raw-npm-angular', 'build', 'htmlmin:dist']) 73 | grunt.registerTask('default', defaultTask ); 74 | 75 | 76 | } 77 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [//]: #@corifeus-header 2 | 3 | [![NPM](https://img.shields.io/npm/v/p3x-angular-compile.svg)](https://www.npmjs.com/package/p3x-angular-compile) [![Donate for PatrikX3 / P3X](https://img.shields.io/badge/Donate-PatrikX3-003087.svg)](https://paypal.me/patrikx3) [![Contact Corifeus / P3X](https://img.shields.io/badge/Contact-P3X-ff9900.svg)](https://www.patrikx3.com/en/front/contact) [![Corifeus @ Facebook](https://img.shields.io/badge/Facebook-Corifeus-3b5998.svg)](https://www.facebook.com/corifeus.software) [![Uptime ratio (90 days)](https://network.corifeus.com/public/api/uptime-shield/31ad7a5c194347c33e5445dbaf8.svg)](https://network.corifeus.com/status/31ad7a5c194347c33e5445dbaf8) 4 | 5 | 6 | 7 | 8 | 9 | # 🆖 Angular Dynamic Compile - Convert strings to Angular components v2025.4.123 10 | 11 | 12 | 13 | 🌌 **Bugs are evident™ - MATRIX️** 14 | 🚧 **This project is under active development!** 15 | 📢 **We welcome your feedback and contributions.** 16 | 17 | 18 | 19 | 20 | ### NodeJS LTS is supported 21 | 22 | ### 🛠️ Built on NodeJs version 23 | 24 | ```txt 25 | v22.13.1 26 | ``` 27 | 28 | 29 | 30 | 31 | # 📦 Built on Angular 32 | 33 | ```text 34 | 19.1.4 35 | ``` 36 | 37 | 38 | 39 | # 📝 Description 40 | 41 | 42 | [//]: #@corifeus-header:end 43 | 44 | 45 | # WARNING 46 | Angular has changed, so it stricts many things for dynamic compilation. The only solution right now, is to simple copy the code into your code and it will work (like on https://angular-compile.corifeus.com/). 47 | 48 | The code you just copy into your project is here: 49 | https://github.com/patrikx3/angular-compile/tree/master/projects/angular-compile/src/lib 50 | 51 | The package on the NPM is the pure TypeScript code. Not built using Angular. 52 | 53 | # Use case 54 | Dynamically compile standard strings to fully functional Angular components. Supports imports, exports, and standard context. 55 | 56 | ## Install 57 | 58 | ```bash 59 | npm install --save p3x-angular-compile 60 | # or 61 | yarn add p3x-angular-compile 62 | ``` 63 | 64 | ## Check out how it works and code 65 | 66 | https://angular-compile.corifeus.com 67 | 68 | https://github.com/patrikx3/angular-compile/blob/master/src/app/app.component.ts 69 | 70 | ## IMPORTANT 71 | 72 | 73 | Make sure AOT is disabled in the `angular.json`: 74 | ```json 75 | { 76 | "architect": { 77 | "build": { 78 | "builder": "@angular-devkit/build-angular:browser", 79 | "options": { 80 | "outputPath": "dist/workspace", 81 | "index": "src/index.html", 82 | "main": "src/main.ts", 83 | "polyfills": "src/polyfills.ts", 84 | "tsConfig": "tsconfig.app.json", 85 | 86 | // make sure it is false 87 | "aot": false, 88 | 89 | "assets": [ 90 | "src/favicon.ico", 91 | "src/assets" 92 | ], 93 | "styles": [ 94 | "src/styles.scss" 95 | ], 96 | "scripts": [] 97 | } 98 | } 99 | } 100 | ``` 101 | 102 | 103 | #### Minimum build requirement arguments 104 | 105 | ```bash 106 | ng build --aot=false --build-optimizer=false 107 | ``` 108 | 109 | 110 | ## Usage 111 | 112 | 113 | ```typescript 114 | import { CompileModule} from "p3x-angular-compile" 115 | 116 | // the module settings 117 | @NgModule({ 118 | imports: [ 119 | CorifeusWebMaterialModule, // Optional 120 | CompileModule, // Required 121 | ], 122 | declarations: [ 123 | Page, 124 | ], 125 | providers: [ 126 | ], 127 | bootstrap: [ Page ] 128 | }) 129 | export class Module { }; 130 | ``` 131 | 132 | #### Template 133 | ```html 134 | 137 | *ngIf="isEnabled" 138 | 139 | 140 | [p3x-compile]="template" 141 | 142 | 143 | [p3x-compile-ctx]="this" 144 | 145 | 146 | [p3x-compile-error-handler]="handleCompileErrorHandler" 147 | 148 | 149 | [p3x-compile-module]="dataModule" 150 | > 151 | 152 | ``` 153 | 154 | #### Code 155 | ```typescript 156 | // A page example 157 | export class Page { 158 | 159 | isEnabled: boolean = true; 160 | 161 | dataModule : any = { 162 | //schemas: [CUSTOM_ELEMENTS_SCHEMA], 163 | //declarations: [], 164 | imports: [ 165 | MatButtonModule 166 | ], 167 | exports: [ 168 | ] 169 | } 170 | 171 | template: string = ""; 172 | 173 | handleCompileErrorHandler(error: Error) { 174 | console.error(error) 175 | } 176 | 177 | alert() { 178 | alert('ok'); 179 | } 180 | } 181 | ``` 182 | 183 | 214 | 215 | ### Options 216 | [Reference for the Angular module settings which are available.]( 217 | https://github.com/angular/angular/blob/master/packages/core/src/metadata/ng_module.ts) 218 | 219 | 222 | 223 | 236 | 237 | 238 | 239 | ## Dev environment end test 240 | 241 | ```bash 242 | npm install -g yarn 243 | git clone https://github.com/patrikx3/angular-compile.git 244 | cd angular-compile 245 | npm install 246 | npm run start 247 | ``` 248 | 249 | [http://localhost:4200](http://localhost:4200) 250 | 251 | 252 | 253 | # Errors 254 | 255 | ## Type x is part of the declarations of 2 modules 256 | 257 | Basically, you need a shared component. 258 | 259 | https://stackoverflow.com/questions/42993580/angular-2-type-childcomponent-is-a-part-of-the-declarations-of-2-modules-par 260 | 261 | ## AOT + JIT 262 | 263 | ### Since Angular 5.x.x + 264 | 265 | We cannot use AOT + JIT at once. 266 | 267 | 268 | #### Info 269 | https://github.com/angular/angular/issues/20156#issuecomment-341767899 270 | 271 | On the issue, you can see: 272 | ```text 273 | To reduce the payload, we do not ship the compiler in AOT. 274 | ``` 275 | 276 | 277 | So right now, it is not possible. 278 | 279 | Although, there are some hacks, but you are on your own... 280 | https://github.com/angular/angular/issues/20156#issuecomment-468686933 281 | 282 | 293 | 294 | ### Size 295 | If you want very small bundle, use ```gzip```. 296 | 297 | [//]: #@corifeus-footer 298 | 299 | --- 300 | 301 | ## 🚀 Quick and Affordable Web Development Services 302 | 303 | If you want to quickly and affordably develop your next digital project, visit [corifeus.eu](https://corifeus.eu) for expert solutions tailored to your needs. 304 | 305 | --- 306 | 307 | ## 🌐 Powerful Online Networking Tool 308 | 309 | Discover the powerful and free online networking tool at [network.corifeus.com](https://network.corifeus.com). 310 | 311 | **🆓 Free** 312 | Designed for professionals and enthusiasts, this tool provides essential features for network analysis, troubleshooting, and management. 313 | Additionally, it offers tools for: 314 | - 📡 Monitoring TCP, HTTP, and Ping to ensure optimal network performance and reliability. 315 | - 📊 Status page management to track uptime, performance, and incidents in real time with customizable dashboards. 316 | 317 | All these features are completely free to use. 318 | 319 | --- 320 | 321 | ## ❤️ Support Our Open-Source Project 322 | If you appreciate our work, consider ⭐ starring this repository or 💰 making a donation to support server maintenance and ongoing development. Your support means the world to us—thank you! 323 | 324 | --- 325 | 326 | ### 🌍 About My Domains 327 | All my domains, including [patrikx3.com](https://patrikx3.com), [corifeus.eu](https://corifeus.eu), and [corifeus.com](https://corifeus.com), are developed in my spare time. While you may encounter minor errors, the sites are generally stable and fully functional. 328 | 329 | --- 330 | 331 | ### 📈 Versioning Policy 332 | **Version Structure:** We follow a **Major.Minor.Patch** versioning scheme: 333 | - **Major:** 📅 Corresponds to the current year. 334 | - **Minor:** 🌓 Set as 4 for releases from January to June, and 10 for July to December. 335 | - **Patch:** 🔧 Incremental, updated with each build. 336 | 337 | **🚨 Important Changes:** Any breaking changes are prominently noted in the readme to keep you informed. 338 | 339 | --- 340 | 341 | 342 | [**P3X-ANGULAR-COMPILE**](https://corifeus.com/angular-compile) Build v2025.4.123 343 | 344 | [![NPM](https://img.shields.io/npm/v/p3x-angular-compile.svg)](https://www.npmjs.com/package/p3x-angular-compile) [![Donate for PatrikX3 / P3X](https://img.shields.io/badge/Donate-PatrikX3-003087.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QZVM4V6HVZJW6) [![Contact Corifeus / P3X](https://img.shields.io/badge/Contact-P3X-ff9900.svg)](https://www.patrikx3.com/en/front/contact) [![Like Corifeus @ Facebook](https://img.shields.io/badge/LIKE-Corifeus-3b5998.svg)](https://www.facebook.com/corifeus.software) 345 | 346 | 347 | 348 | 349 | 350 | [//]: #@corifeus-footer:end 351 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "angular-compile-workspace": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss" 11 | } 12 | }, 13 | "root": "", 14 | "sourceRoot": "src", 15 | "prefix": "app", 16 | "architect": { 17 | "build": { 18 | "builder": "@angular-devkit/build-angular:application", 19 | "options": { 20 | "outputPath": { 21 | "base": "dist/angular-compile-workspace", 22 | "browser": "" 23 | }, 24 | "index": "src/index.html", 25 | "polyfills": [ 26 | "src/polyfills.ts" 27 | ], 28 | "tsConfig": "tsconfig.app.json", 29 | "aot": false, 30 | "assets": [ 31 | "src/favicon.ico", 32 | "src/assets" 33 | ], 34 | "styles": [ 35 | "src/styles.scss" 36 | ], 37 | "scripts": [], 38 | "extractLicenses": false, 39 | "sourceMap": true, 40 | "optimization": false, 41 | "namedChunks": true, 42 | "browser": "src/main.ts" 43 | }, 44 | "configurations": { 45 | "production": { 46 | "fileReplacements": [ 47 | { 48 | "replace": "src/environments/environment.ts", 49 | "with": "src/environments/environment.prod.ts" 50 | } 51 | ], 52 | "optimization": true, 53 | "outputHashing": "all", 54 | "sourceMap": false, 55 | "namedChunks": false, 56 | "extractLicenses": true, 57 | "budgets": [ 58 | { 59 | "type": "initial", 60 | "maximumWarning": "2mb", 61 | "maximumError": "5mb" 62 | }, 63 | { 64 | "type": "anyComponentStyle", 65 | "maximumWarning": "6kb", 66 | "maximumError": "10kb" 67 | } 68 | ] 69 | } 70 | } 71 | }, 72 | "serve": { 73 | "builder": "@angular-devkit/build-angular:dev-server", 74 | "options": { 75 | "buildTarget": "angular-compile-workspace:build" 76 | }, 77 | "configurations": { 78 | "production": { 79 | "buildTarget": "angular-compile-workspace:build:production" 80 | } 81 | } 82 | }, 83 | "extract-i18n": { 84 | "builder": "@angular-devkit/build-angular:extract-i18n", 85 | "options": { 86 | "buildTarget": "angular-compile-workspace:build" 87 | } 88 | }, 89 | "test": { 90 | "builder": "@angular-devkit/build-angular:karma", 91 | "options": { 92 | "main": "src/test.ts", 93 | "polyfills": "src/polyfills.ts", 94 | "tsConfig": "tsconfig.spec.json", 95 | "karmaConfig": "karma.conf.js", 96 | "assets": [ 97 | "src/favicon.ico", 98 | "src/assets" 99 | ], 100 | "styles": [ 101 | "src/styles.scss" 102 | ], 103 | "scripts": [] 104 | } 105 | }, 106 | "lint": { 107 | "builder": "@angular-eslint/builder:lint", 108 | "options": { 109 | "lintFilePatterns": [ 110 | "src/**/*.ts", 111 | "src/**/*.html" 112 | ] 113 | } 114 | }, 115 | "e2e": { 116 | "builder": "@angular-devkit/build-angular:protractor", 117 | "options": { 118 | "protractorConfig": "e2e/protractor.conf.js", 119 | "devServerTarget": "angular-compile-workspace:serve" 120 | }, 121 | "configurations": { 122 | "production": { 123 | "devServerTarget": "angular-compile-workspace:serve:production" 124 | } 125 | } 126 | } 127 | } 128 | }, 129 | "angular-compile": { 130 | "projectType": "library", 131 | "root": "projects/angular-compile", 132 | "sourceRoot": "projects/angular-compile/src", 133 | "prefix": "lib", 134 | "architect": { 135 | "build": { 136 | "builder": "@angular-devkit/build-angular:ng-packagr", 137 | "options": { 138 | "tsConfig": "projects/angular-compile/tsconfig.lib.json", 139 | "project": "projects/angular-compile/ng-package.json" 140 | }, 141 | "configurations": { 142 | "production": { 143 | "tsConfig": "projects/angular-compile/tsconfig.lib.prod.json" 144 | } 145 | } 146 | }, 147 | "test": { 148 | "builder": "@angular-devkit/build-angular:karma", 149 | "options": { 150 | "main": "projects/angular-compile/src/test.ts", 151 | "tsConfig": "projects/angular-compile/tsconfig.spec.json", 152 | "karmaConfig": "projects/angular-compile/karma.conf.js" 153 | } 154 | }, 155 | "lint": { 156 | "builder": "@angular-eslint/builder:lint", 157 | "options": { 158 | "lintFilePatterns": [ 159 | "projects/angular-compile/**/*.ts", 160 | "projects/angular-compile/**/*.html" 161 | ] 162 | } 163 | } 164 | } 165 | } 166 | }, 167 | "cli": { 168 | "analytics": false 169 | } 170 | } 171 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "p3x-angular-compile", 3 | "version": "2025.4.123", 4 | "corifeus": { 5 | "prefix": "p3x-", 6 | "publish": true, 7 | "type": "p3x", 8 | "code": "Logico", 9 | "nodejs": "v22.13.1", 10 | "opencollective": false, 11 | "reponame": "angular-compile", 12 | "build": true, 13 | "cdn": true, 14 | "angular": "19.1.4", 15 | "publish-location": "./dist/angular-compile" 16 | }, 17 | "description": "🆖 Angular Dynamic Compile - Convert strings to Angular components", 18 | "scripts": { 19 | "ng": "ng", 20 | "start": "ng serve --hmr", 21 | "build": "ng build", 22 | "test": "grunt", 23 | "lint": "ng lint", 24 | "e2e": "ng e2e", 25 | "build-lib": "mkdirp ./dist/angular-compile && ncp ./projects/angular-compile/src ./dist/angular-compile && ncp ./projects/angular-compile/package.json ./dist/angular-compile/package.json && cp README.md ./dist/angular-compile && cp LICENSE ./dist/angular-compile && node node_modules/corifeus-builder/src/utils/angular/post-lib-build.js", 26 | "build-lib-old": "ng build --configuration=production --project angular-compile && cp README.md ./dist/angular-compile && cp LICENSE ./dist/angular-compile && node node_modules/corifeus-builder/src/utils/angular/post-lib-build.js", 27 | "build-app-info": "Have to disable AOT for this build", 28 | "build-app": "ng build --configuration=production --source-map=false --output-hashing=all --base-href=/ --aot=false --optimization=true && grunt htmlmin:dist", 29 | "stats": "ng build --stats-json && webpack-bundle-analyzer dist/angular-compile-workspace/stats.json" 30 | }, 31 | "repository": { 32 | "type": "git", 33 | "url": "git+https://github.com/patrikx3/angular-compile.git" 34 | }, 35 | "keywords": [ 36 | "p3x", 37 | "angular", 38 | "ng", 39 | "compile", 40 | "html", 41 | "angular", 42 | "dynamic", 43 | "aot" 44 | ], 45 | "author": "Patrik Laszlo ", 46 | "license": "MIT", 47 | "bugs": { 48 | "url": "https://github.com/patrikx3/angular-compile/issues" 49 | }, 50 | "homepage": "https://corifeus.com/angular-compile", 51 | "dependencies": { 52 | "@angular/animations": "^19.1.4", 53 | "@angular/cdk": "^19.1.2", 54 | "@angular/common": "^19.1.4", 55 | "@angular/compiler": "^19.1.4", 56 | "@angular/core": "^19.1.4", 57 | "@angular/forms": "^19.1.4", 58 | "@angular/material": "^19.1.2", 59 | "@angular/platform-browser": "^19.1.4", 60 | "@angular/platform-browser-dynamic": "^19.1.4", 61 | "@angular/router": "^19.1.4", 62 | "postcss": "^8.5.1", 63 | "rxjs": "~6.6.3", 64 | "tslib": "^2.2.0", 65 | "zone.js": "~0.15.0" 66 | }, 67 | "devDependencies": { 68 | "@angular-devkit/build-angular": "^19.1.5", 69 | "@angular/cli": "^19.1.5", 70 | "@angular/compiler-cli": "^19.1.4", 71 | "@types/node": "^22.13.0", 72 | "corifeus-builder": "^2025.4.135", 73 | "mkdirp": "^3.0.1", 74 | "ncp": "^2.0.0", 75 | "ts-node": "~10.9.2", 76 | "typescript": "~5.6.3", 77 | "webpack-bundle-analyzer": "^4.10.2" 78 | }, 79 | "engines": { 80 | "node": ">=12.13.0" 81 | } 82 | } -------------------------------------------------------------------------------- /projects/angular-compile/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../.eslintrc.json", 3 | "ignorePatterns": [ 4 | "!**/*" 5 | ], 6 | "overrides": [ 7 | { 8 | "files": [ 9 | "*.ts" 10 | ], 11 | "parserOptions": { 12 | "project": [ 13 | "projects/angular-compile/tsconfig.lib.json", 14 | "projects/angular-compile/tsconfig.spec.json" 15 | ], 16 | "createDefaultProgram": true 17 | }, 18 | "rules": { 19 | "@angular-eslint/component-selector": [ 20 | "error", 21 | { 22 | "type": "element", 23 | "prefix": "lib", 24 | "style": "kebab-case" 25 | } 26 | ], 27 | "@angular-eslint/directive-selector": [ 28 | "error", 29 | { 30 | "type": "attribute", 31 | "prefix": "lib", 32 | "style": "camelCase" 33 | } 34 | ] 35 | } 36 | }, 37 | { 38 | "files": [ 39 | "*.html" 40 | ], 41 | "rules": {} 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /projects/angular-compile/.gitkeep: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /projects/angular-compile/README.md: -------------------------------------------------------------------------------- 1 | # AngularCompile 2 | 3 | This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.5. 4 | 5 | ## Code scaffolding 6 | 7 | Run `ng generate component component-name --project angular-compile` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular-compile`. 8 | > Note: Don't forget to add `--project angular-compile` or else it will be added to the default project in your `angular.json` file. 9 | 10 | ## Build 11 | 12 | Run `ng build angular-compile` to build the project. The build artifacts will be stored in the `dist/` directory. 13 | 14 | ## Publishing 15 | 16 | After building your library with `ng build angular-compile`, go to the dist folder `cd dist/angular-compile` and run `npm publish`. 17 | 18 | ## Running unit tests 19 | 20 | Run `ng test angular-compile` to execute the unit tests via [Karma](https://karma-runner.github.io). 21 | 22 | ## Further help 23 | 24 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 25 | -------------------------------------------------------------------------------- /projects/angular-compile/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-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage/angular-compile'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /projects/angular-compile/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/angular-compile", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/angular-compile/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "p3x-angular-compile", 3 | "version": "0.0.1", 4 | "peerDependencies": { 5 | "@angular/common": "^13.0.0", 6 | "@angular/core": "^13.0.0" 7 | }, 8 | "main": "index.ts", 9 | "corifeus": { 10 | "install": false 11 | }, 12 | "devDependencies": { 13 | "corifeus-builder": "^2021.10.163" 14 | }, 15 | "dependencies": { 16 | "tslib": "^2.0.0" 17 | } 18 | } -------------------------------------------------------------------------------- /projects/angular-compile/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api' 2 | -------------------------------------------------------------------------------- /projects/angular-compile/src/lib/angular-compile.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Compiler, 3 | Component, 4 | Injectable, 5 | Input, 6 | ModuleWithProviders, 7 | NgModule, 8 | NgModuleFactory, 9 | OnChanges, 10 | SimpleChanges, 11 | Type, 12 | } from '@angular/core'; 13 | 14 | import {CommonModule} from '@angular/common'; 15 | //import { BrowserModule } from '@angular/platform-browser'; 16 | //let SingletonDefaultModule: NgModule; 17 | //import cloneDeep from 'lodash/cloneDeep'; 18 | 19 | //import { CorifeusMaterialModule } from 'corifeus-web-material'; 20 | 21 | function reverse(str: string) { 22 | return str.split('').reverse().join('') 23 | } 24 | 25 | function random() { 26 | return (Math.floor(Math.random() * (99999999999999999 - 10000000000000000)) + 10000000000000000).toString(16) 27 | } 28 | 29 | let currentIdTime: number; 30 | let currentId = 0; 31 | 32 | function nextId(): string { 33 | 34 | const now = Date.now(); 35 | if (currentIdTime !== now) { 36 | currentId = 0; 37 | currentIdTime = now 38 | } 39 | const comingId = ++currentId; 40 | const randomHex = reverse(random()).padStart(15, '0'); 41 | const timeHex = reverse(currentIdTime.toString(16).padStart(12, '0')) 42 | const comingIdHex = reverse(comingId.toString(16).padStart(3, '0')) 43 | const newId: string = `p3x-angular-compile-${timeHex}${comingIdHex}${randomHex}`; 44 | //console.log(newId) 45 | return newId 46 | } 47 | 48 | 49 | //const cache : any = {}; 50 | 51 | @Component({ 52 | selector: '[p3x-compile]', 53 | template: ` 54 | 55 | 56 | 57 | `, 58 | standalone: false 59 | }) 60 | @Injectable() 61 | export class CompileAttribute implements OnChanges { 62 | //export class CompileAttribute implements OnChanges ,OnInit { 63 | 64 | @Input('p3x-compile') 65 | html: string; 66 | 67 | @Input('p3x-compile-ctx') 68 | context: any; 69 | 70 | @Input('p3x-compile-error-handler') 71 | errorHandler: Function = undefined; 72 | 73 | dynamicComponent: any; 74 | dynamicModule: NgModuleFactory | any; 75 | 76 | @Input('p3x-compile-module') 77 | module: NgModule; 78 | 79 | @Input('p3x-compile-imports') 80 | imports: Array | ModuleWithProviders | any[]>; 81 | 82 | constructor( 83 | // private container: ViewContainerRef, 84 | // private service: CompileService 85 | private compiler: Compiler, 86 | // @Inject('config') private config:CompileServiceConfig 87 | ) { 88 | } 89 | 90 | /* 91 | // not requires, since ngOnChanges does it first time change 92 | ngOnInit() { 93 | //console.log('ng init') 94 | // this.update(); 95 | } 96 | */ 97 | 98 | get renderComponent() { 99 | return typeof this.html === 'string' && this.html.trim() !== '' 100 | } 101 | 102 | ngOnChanges(changes: SimpleChanges) { 103 | //console.log('ng one changes') 104 | this.update(); 105 | } 106 | 107 | 108 | update() { 109 | try { 110 | if (this.html === undefined || this.html === null || this.html.trim() === '') { 111 | // this.container.clear(); 112 | this.dynamicComponent = undefined; 113 | this.dynamicModule = undefined; 114 | return; 115 | } 116 | 117 | /* 118 | 119 | // looks like Angular already is caching 120 | 121 | //console.log('html', this.html) 122 | const cacheKey = this.html; 123 | //console.log(Object.keys(cache).indexOf(cacheKey), cache) 124 | if (cache.hasOwnProperty(cacheKey)) { 125 | const currentCache = cache[cacheKey]; 126 | this.dynamicComponent = currentCache.dynamicComponent 127 | this.dynamicModule = currentCache.dynamicModule 128 | return ; 129 | } 130 | */ 131 | this.dynamicComponent = this.createNewComponent(this.html, this.context); 132 | this.dynamicModule = this.compiler.compileModuleSync(this.createComponentModule(this.dynamicComponent)); 133 | 134 | /* 135 | cache[cacheKey] = { 136 | dynamicComponent: this.dynamicComponent, 137 | dynamicModule: this.dynamicModule, 138 | }; 139 | */ 140 | } catch (e) { 141 | if (this.errorHandler === undefined) { 142 | throw e; 143 | } else { 144 | this.errorHandler(e); 145 | } 146 | } 147 | /* 148 | // now we use it with ngComponentOutlet, since about angular 5 149 | await this.service.compile({ 150 | template: this.html, 151 | container: this.container, 152 | context: this.context, 153 | imports: this.imports, 154 | module: this.module 155 | }) 156 | */ 157 | } 158 | 159 | private createComponentModule(componentType: any) { 160 | let module: NgModule = {}; 161 | 162 | if (this.module !== undefined) { 163 | module = Object.assign({}, this.module); 164 | } 165 | /* 166 | else if (SingletonDefaultModule !== undefined && SingletonDefaultModule !== null) { 167 | module = cloneDeep(SingletonDefaultModule); 168 | } 169 | */ 170 | module.imports = module.imports || []; 171 | module.imports.push(CommonModule); 172 | if (this.imports !== undefined) { 173 | module.imports = module.imports.concat(this.imports) 174 | } 175 | if (module.declarations === undefined) { 176 | module.declarations = [ 177 | componentType 178 | ]; 179 | } else { 180 | module.declarations.push(componentType); 181 | } 182 | 183 | @NgModule(module) 184 | class RuntimeComponentModule { 185 | } 186 | 187 | return RuntimeComponentModule; 188 | } 189 | 190 | 191 | private createNewComponent(html: string, context: any) { 192 | 193 | const selector: string = nextId() 194 | 195 | @Component({ 196 | selector: selector, 197 | template: html, 198 | standalone: false 199 | }) 200 | class DynamicComponent { 201 | context: any = context; 202 | } 203 | 204 | return DynamicComponent; 205 | } 206 | } 207 | -------------------------------------------------------------------------------- /projects/angular-compile/src/lib/angular-compile.module.ts: -------------------------------------------------------------------------------- 1 | import { 2 | NgModule, 3 | //ModuleWithProviders, 4 | } from '@angular/core'; 5 | import {CompileAttribute} from "./angular-compile.component"; 6 | import {CommonModule} from '@angular/common'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | CompileAttribute 11 | ], 12 | imports: [ 13 | CommonModule 14 | ], 15 | exports: [ 16 | CompileAttribute 17 | ] 18 | }) 19 | export class CompileModule { } 20 | -------------------------------------------------------------------------------- /projects/angular-compile/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of angular-compile 3 | */ 4 | 5 | export * from './lib/angular-compile.module'; 6 | export * from './lib/angular-compile.component'; 7 | -------------------------------------------------------------------------------- /projects/angular-compile/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'; 4 | import 'zone.js/testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { 7 | BrowserDynamicTestingModule, 8 | platformBrowserDynamicTesting 9 | } from '@angular/platform-browser-dynamic/testing'; 10 | 11 | // First, initialize the Angular testing environment. 12 | getTestBed().initTestEnvironment( 13 | BrowserDynamicTestingModule, 14 | platformBrowserDynamicTesting(), { 15 | teardown: { destroyAfterEach: false } 16 | } 17 | ); 18 | -------------------------------------------------------------------------------- /projects/angular-compile/tsconfig.lib.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/lib", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [], 10 | "lib": [ 11 | "dom", 12 | "es2018" 13 | ] 14 | }, 15 | "angularCompilerOptions": { 16 | "skipTemplateCodegen": true, 17 | "strictMetadataEmit": true, 18 | "enableResourceInlining": true 19 | }, 20 | "exclude": [ 21 | "src/test.ts", 22 | "**/*.spec.ts" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /projects/angular-compile/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /projects/angular-compile/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 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | P3X Angular Compile v{{ version }} 4 | 5 | 6 | 7 | 8 | 9 | 10 | Corifeus.com Wiki 11 | How it works from the code in GitHub, some examples 12 | 13 |
14 | Go ahead and inspect the elements and click away!!! 15 | 16 |
17 | 18 |
19 | 20 |
Template 1
21 |
22 | 23 |
24 | 25 |
26 | 27 |
Template 2
28 |
29 | 30 |
31 | 32 |
33 |
Template 3
34 |
35 | 36 |
37 | 38 |
39 |
Template 4 - Re-use the same context
40 |
41 | 42 | 43 |
44 |
45 | 46 |
47 | 48 |
Pure Router Link with JIT Angular
49 | 50 |   51 | 52 | 53 |
54 |
55 | 56 |
57 | 58 |
Router Link with p3x-angular-compile
59 |
60 | 61 | 62 |
63 |
64 | 65 | 66 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | .p3x-angular-compile-element { 2 | border: 1px dashed grey; 3 | background-color: rgba(128, 128, 128, 0.1); 4 | padding: 8px; 5 | } 6 | 7 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import packageInfo from '../../package.json'; 3 | 4 | import { MatButtonModule } from "@angular/material/button"; 5 | 6 | @Component({ 7 | selector: 'app-root', 8 | templateUrl: './app.component.html', 9 | styleUrls: ['./app.component.scss'], 10 | standalone: false 11 | }) 12 | export class AppComponent { 13 | version = packageInfo.version 14 | 15 | data1: string; 16 | data2: string = 'init'; 17 | 18 | data3: string = 'Just simple stringinfo'; 19 | 20 | counter1: number = 0; 21 | counter2: number = 0; 22 | 23 | interval: any; 24 | 25 | dataRouterLink: string = '' 26 | 27 | compileForm: string = `` 28 | 29 | dataMaterialDefault: string = ` 30 | 31 | ` 32 | dataMaterial: string = ` 33 | 34 | ` 35 | dataMaterialModule: any = { 36 | // schemas: [CUSTOM_ELEMENTS_SCHEMA], 37 | // declarations: [], 38 | imports: [ 39 | MatButtonModule 40 | ], 41 | exports: [] 42 | 43 | } 44 | 45 | constructor( 46 | // private compileHtmlService: CompileService 47 | ) { 48 | } 49 | 50 | private update1() { 51 | this.counter1++; 52 | this.data1 = ` 53 |
P3X Angular Compile
54 |
{{ context.counter1}}
55 | `; 56 | } 57 | 58 | public formClick() { 59 | alert('form click'); 60 | } 61 | 62 | private update2() { 63 | this.counter2++; 64 | this.data2 = ` 65 |
Attribute
66 |
{{ context.counter2}}
67 | `; 68 | 69 | } 70 | 71 | chars: string = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ' 72 | 73 | getRandomChar() { 74 | return this.chars[Math.floor(Math.random() * (62 - 0)) + 0] 75 | } 76 | 77 | randomRouterLinkPure() { 78 | let counter = 0; 79 | let randomString = ''; 80 | 81 | while (counter < 10) { 82 | counter++; 83 | randomString += this.getRandomChar(); 84 | } 85 | this.dataRouterLink = `${randomString}` 86 | 87 | } 88 | 89 | randomRouterLinkJit() { 90 | let counter = 0; 91 | let randomString2 = ''; 92 | 93 | while (counter < 10) { 94 | counter++; 95 | randomString2 += this.getRandomChar(); 96 | } 97 | this.dataMaterial = ` 98 | ${this.dataMaterialDefault}   ${randomString2} 99 | ` 100 | } 101 | 102 | ngOnInit() { 103 | this.update1(); 104 | this.update2(); 105 | this.randomRouterLinkPure() 106 | this.randomRouterLinkJit() 107 | /* 108 | let is = false; 109 | let newData = '123'; 110 | let defaultData = ''; 111 | let count = 0; 112 | 113 | this.interval = setInterval(() => { 114 | is = !is; 115 | if (is) { 116 | count++; 117 | defaultData = defaultData + newData; 118 | this.data3 = defaultData + defaultData; 119 | if (count > 10) { 120 | count = 0; 121 | defaultData = newData; 122 | } 123 | } else { 124 | this.data3 = '
321
' 125 | } 126 | }, 1000) 127 | */ 128 | } 129 | 130 | ngOnDestroy() { 131 | clearInterval(this.interval); 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import {BrowserModule} from '@angular/platform-browser'; 2 | import {NgModule} from '@angular/core'; 3 | 4 | import {AppComponent} from './app.component'; 5 | import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 6 | 7 | import {CompileModule} from "../../projects/angular-compile/src/lib/angular-compile.module"; 8 | import {MatToolbarModule} from "@angular/material/toolbar"; 9 | import {MatCardModule} from "@angular/material/card"; 10 | import {MatButtonModule} from "@angular/material/button"; 11 | 12 | import { MatDividerModule} from "@angular/material/divider"; 13 | 14 | @NgModule({ 15 | declarations: [ 16 | AppComponent 17 | ], 18 | imports: [ 19 | MatDividerModule, 20 | BrowserAnimationsModule, 21 | //MatProgressSpinnerModule, 22 | MatCardModule, 23 | MatButtonModule, 24 | MatToolbarModule, 25 | CompileModule, 26 | BrowserModule, 27 | BrowserAnimationsModule 28 | ], 29 | providers: [], 30 | bootstrap: [AppComponent] 31 | }) 32 | export class AppModule { 33 | } 34 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrikx3/angular-compile/de8177f9d875a122e68b1d5acdde3d5ece7fc768/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` 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 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrikx3/angular-compile/de8177f9d875a122e68b1d5acdde3d5ece7fc768/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | P3X Angular Compile 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /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 | window['corifeus'] = { 8 | core: { 9 | http: { 10 | status: 200, 11 | counter: 0, 12 | } 13 | } 14 | } 15 | 16 | if (environment.production) { 17 | enableProdMode(); 18 | } 19 | 20 | platformBrowserDynamic().bootstrapModule(AppModule) 21 | .catch(err => console.error(err)); 22 | -------------------------------------------------------------------------------- /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 | * By default, zone.js will patch all possible macroTask and DomEvents 23 | * user can disable parts of macroTask/DomEvents patch by setting following flags 24 | * because those flags need to be set before `zone.js` being loaded, and webpack 25 | * will put import in the top of bundle, so user need to create a separate file 26 | * in this directory (for example: zone-flags.ts), and put the following flags 27 | * into that file, and then add the following code before importing zone.js. 28 | * import './zone-flags'; 29 | * 30 | * The flags allowed in zone-flags.ts are listed here. 31 | * 32 | * The following flags will work for all browsers. 33 | * 34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 37 | * 38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 40 | * 41 | * (window as any).__Zone_enable_cross_context_check = true; 42 | * 43 | */ 44 | 45 | /*************************************************************************************************** 46 | * Zone JS is required by default for Angular itself. 47 | */ 48 | import 'zone.js'; // Included with Angular CLI. 49 | 50 | 51 | /*************************************************************************************************** 52 | * APPLICATION IMPORTS 53 | */ 54 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | @use '@angular/material' as mat; 2 | /* You can add global styles to this file, and also import other style files */ 3 | 4 | html, body { 5 | height: 100%; 6 | } 7 | 8 | body { 9 | margin: 0; 10 | color: rgba(255, 255, 255, 0.87); 11 | background-color: rgba(0, 0, 0, 0.87) !important; 12 | font-family: Roboto, "Helvetica Neue", sans-serif; 13 | } 14 | 15 | 16 | // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles. 17 | // The following line adds: 18 | // 1. Default typography styles for all components 19 | // 2. Styles for typography hierarchy classes (e.g. .mat-headline-1) 20 | // If you specify typography styles for the components you use elsewhere, you should delete this line. 21 | // If you don't need the default component typographies but still want the hierarchy styles, 22 | // you can delete this line and instead use: 23 | // `@include mat.legacy-typography-hierarchy(mat.define-typography-config());` 24 | @include mat.all-component-typographies(); 25 | @include mat.elevation-classes(); 26 | @include mat.app-background(); 27 | 28 | // The following mixins include base theme styles that are only needed once per application. These 29 | // theme styles do not depend on the color, typography, or density settings in your theme. However, 30 | // these styles may differ depending on the theme's design system. Currently all themes use the 31 | // Material 2 design system, but in the future it may be possible to create theme based on other 32 | // design systems, such as Material 3. 33 | // 34 | // Please note: you do not need to include the 'base' mixins, if you include the corresponding 35 | // 'theme' mixin elsewhere in your Sass. The full 'theme' mixins already include the base styles. 36 | // 37 | // To learn more about "base" theme styles visit our theming guide: 38 | // https://material.angular.io/guide/theming#theming-dimensions 39 | // 40 | // TODO(v17): Please move these @include statements to the preferred place in your Sass, and pass 41 | // your theme to them. This will ensure the correct values for your app are included. 42 | //@include mat.all-component-bases(__<>__); 43 | 44 | $workspace-primary: mat.m2-define-palette(mat.$m2-green-palette); 45 | $workspace-accent: mat.m2-define-palette(mat.$m2-purple-palette, 700, 900, 600); 46 | $workspace-warn: mat.m2-define-palette(mat.$m2-red-palette); 47 | $workspace-theme: mat.m2-define-dark-theme(mat.m2-define-dark-theme(( 48 | color: ( 49 | primary: $workspace-primary, 50 | accent: $workspace-accent, 51 | warn: $workspace-warn, 52 | ), 53 | typography: mat.m2-define-typography-config(), 54 | density: 0, 55 | ))); 56 | 57 | @include mat.elevation-classes(); 58 | @include mat.app-background(); 59 | @include mat.divider-theme($workspace-theme); 60 | @include mat.card-theme($workspace-theme); 61 | 62 | @include mat.toolbar-theme(mat.m2-define-dark-theme(( 63 | color: ( 64 | primary: mat.m2-define-palette(mat.$m2-blue-grey-palette, 700), 65 | accent: mat.m2-define-palette(mat.$m2-blue-grey-palette, 800), 66 | warn: mat.m2-define-palette(mat.$m2-green-palette), 67 | ), 68 | typography: mat.m2-define-typography-config(), 69 | density: 0, 70 | ))); 71 | 72 | 73 | @include mat.button-theme(mat.m2-define-dark-theme(( 74 | color: ( 75 | primary: mat.m2-define-palette(mat.$m2-orange-palette, 900), 76 | accent: mat.m2-define-palette(mat.$m2-indigo-palette, 900), 77 | warn: mat.m2-define-palette(mat.$m2-red-palette, 500) 78 | ), 79 | typography: mat.m2-define-typography-config(), 80 | density: 0, 81 | ))); 82 | 83 | @include mat.fab-theme(mat.m2-define-dark-theme(( 84 | color: ( 85 | primary: mat.m2-define-palette(mat.$m2-orange-palette, 900), 86 | accent: mat.m2-define-palette(mat.$m2-indigo-palette, 500), 87 | warn: mat.m2-define-palette(mat.$m2-red-palette, 500) 88 | ), 89 | typography: mat.m2-define-typography-config(), 90 | density: 0, 91 | ))); 92 | 93 | 94 | @include mat.icon-theme(mat.m2-define-dark-theme(( 95 | color: ( 96 | primary: mat.m2-define-palette(mat.$m2-orange-palette, 900), 97 | accent: mat.m2-define-palette(mat.$m2-indigo-palette, 500), 98 | warn: mat.m2-define-palette(mat.$m2-red-palette, 500) 99 | ), 100 | typography: mat.m2-define-typography-config(), 101 | density: 0, 102 | ))); 103 | 104 | 105 | 106 | .p3x-ng-compile-template-intent:before { 107 | } 108 | .p3x-ng-compile-template-intent { 109 | color: mat.m2-get-color-from-palette(mat.$m2-grey-palette, 500); 110 | padding: 8px; 111 | font-size: 18px; 112 | font-weight: bold; 113 | display: inline-block; 114 | } 115 | 116 | .p3x-ng-compile-template { 117 | font-size: 18px; 118 | font-weight: bold; 119 | display: inline-block; 120 | } 121 | 122 | a.mat-mdc-button { 123 | //padding: 0; 124 | } 125 | -------------------------------------------------------------------------------- /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 {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing'; 6 | 7 | // First, initialize the Angular testing environment. 8 | getTestBed().initTestEnvironment( 9 | BrowserDynamicTestingModule, 10 | platformBrowserDynamicTesting(), { 11 | teardown: { destroyAfterEach: false } 12 | } 13 | ); 14 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "resolveJsonModule": true, 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "esModuleInterop": true, 8 | "sourceMap": true, 9 | "declaration": false, 10 | "experimentalDecorators": true, 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "ES2022", 14 | "module": "es2022", 15 | "lib": [ 16 | "es2022", 17 | "dom" 18 | ], 19 | "paths": { 20 | "angular-compile": [ 21 | "dist/angular-compile/angular-compile", 22 | "dist/angular-compile" 23 | ] 24 | }, 25 | "useDefineForClassFields": false 26 | }, 27 | "angularCompilerOptions": { 28 | 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------