I have an ASP.Net Webforms app running .Net 4.5.
I've built an Angular v.17 app with Angular Elements and an Angular Materials Table following this tutorial as a model of the Angular Elements portion: https://angularindepth.com/posts/1116/angular-web-components-a-complete-guide.
Following the example here is my Angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"MatTableElements": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss",
"standalone": false
},
"@schematics/angular:directive": {
"standalone": false
},
"@schematics/angular:pipe": {
"standalone": false
}
},
"root": "projects/mat-table-elements",
"sourceRoot": "projects/mat-table-elements/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/mat-table-elements",
"index": "projects/mat-table-elements/src/index.html",
"browser": "projects/mat-table-elements/src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "projects/mat-table-elements/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"projects/mat-table-elements/src/favicon.ico",
"projects/mat-table-elements/src/assets"
],
"styles": [
"@angular/material/prebuilt-themes/indigo-pink.css",
"projects/mat-table-elements/src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "1500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "none",
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
}
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "MatTableElements:build:production"
},
"development": {
"buildTarget": "MatTableElements:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "MatTableElements:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "projects/mat-table-elements/tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
"projects/mat-table-elements/src/favicon.ico",
"projects/mat-table-elements/src/assets"
],
"styles": [
"@angular/material/prebuilt-themes/indigo-pink.css",
"projects/mat-table-elements/src/styles.scss"
],
"scripts": []
}
}
}
}
}
}
And here my app.module.ts. *Please note I am not using standalone components:
import { NgModule, DoBootstrap, Injector, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from "@angular/elements";
import { ItemAssignmentsComponent } from './item-assignments/item-assignments.component';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
@NgModule({
declarations: [
ItemAssignmentsComponent
],
imports: [
BrowserModule,
MatTableModule,
MatPaginatorModule
],
providers: [
provideAnimationsAsync()
]
// entryComponents: [ItemAssignmentsComponent]
})
export class AppModule implements DoBootstrap {
constructor(private injector: Injector) {
const el = createCustomElement(ItemAssignmentsComponent, {injector});
customElements.define('item-assignment', el);
}
ngDoBootstrap(appRef: ApplicationRef): void {
}
}
I use the CLI to build the app,
Then load the Javascript libraries and Styles into my ASP.Net webforms app, calling the scripts and the custom tag in the page:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link rel="stylesheet" type="text/css" href="assets/css/moog-default.css" />
<link rel="stylesheet" type="text/css" href="assets/css/moog-layout.css" />
<link rel="stylesheet" type="text/css" href="assets/js/item-data-report/styles.css" />
<script type="text/javascript" src="assets/js/item-data-report/chunk-HH4V2P6H.js"></script>
<script type="text/javascript" src="assets/js/item-data-report/chunk-OH42BLK4.js"></script>
<script type="text/javascript" src="assets/js/item-data-report/main.js"></script>
<script type="text/javascript" src="assets/js/item-data-report/polyfills.js"></script>
<item-assignment></item-assignment>
</asp:Content>
However, upon running the webforms app I get these errors in my browser console:
Uncaught SyntaxError: Unexpected token 'export' chunk-HH4V2P6H.js:7
Uncaught SyntaxError: Cannot use import statement outside a module chunk-OH42BLK4.js:1
Uncaught SyntaxError: Cannot use import statement outside a module main.js:1
Is there an error in my Angular setup? Or is there something I am missing in trying to import the Angular Element into my ASP.Net webform?
EDIT: Adding tsconfig.json:
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"esModuleInterop": true,
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": [
"ES2022",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
Update 1:
Went ahead and rebuilt this as a standalone following https://www.angulararchitects.io/blog/angular-elements-web-components-with-standalone-components/ as a guide.
However, still receiving the error above from the ASP.net page about not being able to use export outside of of a module.
New tsconfig.json:
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"esModuleInterop": true,
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": [
"ES2022",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
tsconfig.json?