1. Anuncie Aqui ! Entre em contato fdantas@4each.com.br
Anuncie aqui Patrocinador Anuncios

Angular Material not working with Angular Elements

Discussão em 'Angular' iniciado por Sam Redmond, Novembro 6, 2024 às 13:52.

  1. Sam Redmond

    Sam Redmond Guest

    I'm trying to create a set of Angular Elements using Angular Material. When I run the Angular app everything works just fine. However, once I export my element the things using Angular Material just break.

    This is what is in my component

    <div fxLayout="row" fxLayoutGap="15px">

    <mat-form-field appearance="outline">
    <mat-label>First Name</mat-label>
    <input matInput type="text" />
    </mat-form-field>

    <mat-form-field appearance="outline">
    <mat-label>Last Name</mat-label>
    <input matInput type="text" />
    </mat-form-field>

    </div>

    <button mat-raised-button color="primary">Submit</button>


    When I run this inside my Angular project it looks as I expected it to (Note: to run this I replaced the body of the index.html in the Angular project with my test-element tag)

    Screenshot of Angular element running inside Angular project

    So then I try to export it using Angular elements. I ran ng add @angular/elements and added the following to my app.module.ts

    @NgModule({
    declarations: [
    AppComponent,Ï
    TestElementComponent,
    ],
    imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatInputModule,
    FlexLayoutModule,
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    providers: [],
    // bootstrap: [AppComponent],
    })
    export class AppModule {
    constructor(private injector: Injector) {}

    ngDoBootstrap() {
    const elements = [
    { name: 'test-element', component: TestElementComponent },
    ];

    // I plan on adding a bunch of elements which I why I have the for loop
    for (let i = 0; i < elements.length; i++) {
    const element = elements;

    const ngElement = createCustomElement(element.component, {
    injector: this.injector,
    });
    customElements.define(element.name, ngElement);
    }
    }
    }


    I will note, I tried to also move this to the main.ts file in the .then of the platformBrowserDynamic().bootstrapModule(AppModule) and I got the same result.

    Then I have the concat script as well

    const fs = require("fs-extra");
    const concat = require("concat");

    (async function () {
    const files = [
    "./dist/elements-demo/runtime.js",
    "./dist/elements-demo/main.js",
    "./dist/elements-demo/polyfills.js",
    ];

    await fs.ensureDir("elements");
    await concat(files, "elements/elements.js");
    await fs.copyFile("./dist/elements-demo/styles.css", "elements/styles.css");
    })();


    Then I have the build:elements script ng build --output-hashing none && node concat.js

    So I create a plain HTML page and try to use the element

    <!DOCTYPE html>
    <html>
    <title>Elements Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
    rel="stylesheet"
    />
    <link
    href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet"
    />

    <body>
    <h1>Customer's Website</h1>

    <test-element></test-element>

    <script src="http://localhost:8080/elements/elements.js"></script>
    </body>
    </html>


    This basically gives me a completely blank page: Elements not working after being using in a non-angular HTML page

    I've also tried including <link href="http://localhost:8080/elements/styles.css" rel="stylesheet" /> as well, but that doesn't work. I've tried using <link href="https://unpkg.com/@angular/material@12.2.12/prebuilt-themes/indigo-pink.css" rel="stylesheet"/> and nothing changes.

    Here are the versions of everything I am using

    "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/cdk": "^12.2.12",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/elements": "^12.2.13",
    "@angular/flex-layout": "^12.0.0-beta.35",
    "@angular/forms": "~12.2.0",
    "@angular/material": "^12.2.12",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "concat": "^1.0.3",
    "document-register-element": "^1.7.2",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
    },


    EDIT

    I tried using the ShadowDOM for view encapsulation and that KIND OF worked.

    Exported using Shadow DOM

    I went through all the combinations of things I tried using the Shadow DOM for view encapsulation but the screenshot above is what I got every time.

    Continue reading...
    Sam Redmond, Novembro 6, 2024 às 13:52
    #1

Compartilhe esta Página