Build errors due to undefined namespaces #6
Comments
|
Finally, can you please let me know where
Thanks again for your work! |
|
Update - this is my updated code after finding the example here import { BrowserModule } from '@angular/platform-browser';
import { DoBootstrap, Injector, NgModule } from '@angular/core';
import {
HelloWorldComponent,
NgHelloWorldModule,
} from '@ah-applications-nx/ng/hello-world';
import { createCustomElement } from '@angular/elements';
import { createNg1Wrapper } from 'create-ng1-wrapper';
import * as angular from 'angular';
@NgModule({
imports: [BrowserModule, NgHelloWorldModule],
providers: [],
})
export class AppModule implements DoBootstrap {
constructor(private injector: Injector) {
const elements: any[] = [[HelloWorldComponent, 'hello-world-ce']];
const dcWebComponentsModule = angular.module('ng1WebComponents', []);
for (const [component, name] of elements) {
const el = createCustomElement(component, { injector });
customElements.define(name, el);
const ng1El = createNg1Wrapper(name, component, { injector });
dcWebComponentsModule.component(
`${this.toCamelCase(name)}Wrapper`,
ng1El
);
}
}
ngDoBootstrap() {}
private toCamelCase(s: string) {
return s.replace(/-([a-z])/g, function (g) {
return g[1].toUpperCase();
});
}
}import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HelloWorldComponent } from './hello-world/hello-world.component';
@NgModule({
imports: [CommonModule],
declarations: [HelloWorldComponent],
exports: [HelloWorldComponent],
})
export class NgHelloWorldModule {} |
|
Another update - the build errors go away with npm i -D @types/angularIMO this package should be added as a peer dependency along with angular since this plugin cannot work without them. Then, I got a new error This error seems similar to the following post https://www.amadousall.com/angular-cli-module-not-found-error-cant-resolve/ Perhaps browser needs to be defined as a Or, a module might be declared in multiple modules angular/angular-cli#8860 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for creating this wrapper!! It looks like I'm getting a number of errors due to different namespaces being assumed as defined but as we can see that doesn't seem to be the case for me. I'm on Angular 11 so maybe this lib needs an update to work with that version?
If I'm missing something about how to use the library, let me know! Documentation is a little sparse as noted #5
Here's my
package.json{ "name": "ah-applications-nx", "version": "0.0.0", "license": "MIT", "scripts": { "nx": "nx", "start": "nx serve", "build": "nx build", "test": "nx test", "lint": "nx workspace-lint && nx lint", "e2e": "nx e2e", "affected:apps": "nx affected:apps", "affected:libs": "nx affected:libs", "affected:build": "nx affected:build", "affected:e2e": "nx affected:e2e", "affected:test": "nx affected:test", "affected:lint": "nx affected:lint", "affected:dep-graph": "nx affected:dep-graph", "affected": "nx affected", "docker:build": "COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose build", "docker:serve": "docker-compose up", "fb:deploy": "./firebase-deploy.sh", "format": "nx format:write", "format:write": "nx format:write", "format:check": "nx format:check", "update": "nx migrate latest", "workspace-generator": "nx workspace-generator", "dep-graph": "nx dep-graph", "help": "nx help", "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points && node_modules/.bin/prisma generate" }, "private": true, "dependencies": { "@angular/animations": "^11.0.7", "@angular/cdk": "^11.0.4", "@angular/common": "^11.0.7", "@angular/compiler": "^11.0.7", "@angular/core": "^11.0.7", "@angular/fire": "^6.1.4", "@angular/forms": "^11.0.7", "@angular/platform-browser": "^11.0.7", "@angular/platform-browser-dynamic": "^11.0.7", "@angular/router": "^11.0.7", "@aws-amplify/ui-angular": "^1.0.6", "@nestjs/common": "^7.0.0", "@nestjs/core": "^7.0.0", "@nestjs/platform-express": "^7.0.0", "@nestjs/typeorm": "^7.1.5", "@prisma/client": "2.25.0", "@types/faker": "^5.5.6", "amazon-cognito-identity-js": "^3.3.3", "aws-amplify": "^3.3.26", "aws-lambda": "^1.0.6", "aws-sdk": "^2.881.0", "aws-serverless-express": "^3.4.0", "axios": "^0.19.2", "axios-cookiejar-support": "^0.5.1", "cookie-parser": "^1.4.5", "cors": "^2.8.5", "create-ng1-wrapper": "^1.0.2", "csv-parse": "^4.9.1", "express": "^4.17.1", "faker": "^5.5.3", "firebase": "^8.2.1", "firebase-admin": "^9.4.2", "ftps": "^1.1.1", "joi": "^17.1.1", "jsonwebtoken": "^8.5.1", "jwk-to-pem": "^2.0.3", "lodash": "^4.17.21", "luxon": "^1.27.0", "lz-string": "^1.4.4", "mustache": "^3.2.1", "mysql2": "^2.2.5", "nestjs-pino": "^1.1.3", "ng-mocks": "^11.3.1", "node-fetch": "^2.6.0", "nodemailer": "^6.4.6", "passport": "^0.4.1", "phone": "^2.4.20", "pino-pretty": "^4.7.1", "primeicons": "^4.1.0", "primeng": "^11.1.0", "reflect-metadata": "^0.1.13", "rxjs": "^6.6.3", "tough-cookie": "^3.0.1", "tslib": "^2.0.0", "type-fest": "^1.1.1", "typeorm": "^0.2.29", "zone.js": "^0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1100.7", "@angular/cli": "^11.0.7", "@angular/compiler-cli": "^11.0.7", "@angular/elements": "^11.0.7", "@angular/language-service": "^11.0.7", "@nestjs/schematics": "^7.0.0", "@nestjs/testing": "^7.0.0", "@nrwl/angular": "11.1.2", "@nrwl/cli": "11.1.2", "@nrwl/cypress": "11.1.2", "@nrwl/eslint-plugin-nx": "11.1.2", "@nrwl/jest": "11.1.2", "@nrwl/nest": "11.1.2", "@nrwl/node": "11.1.2", "@nrwl/storybook": "11.1.2", "@nrwl/tao": "11.1.2", "@nrwl/workspace": "11.1.5", "@types/aws-lambda": "^8.10.73", "@types/aws-serverless-express": "^3.3.3", "@types/cookie-parser": "^1.4.2", "@types/express": "^4.17.11", "@types/ftps": "^1.1.1", "@types/jest": "^26.0.8", "@types/node": "12.12.38", "@typescript-eslint/eslint-plugin": "4.3.0", "@typescript-eslint/parser": "4.3.0", "@webcomponents/webcomponentsjs": "^2.6.0", "codelyzer": "^6.0.0", "cypress": "^6.0.1", "dotenv": "^6.2.0", "eslint": "7.10.0", "eslint-config-prettier": "6.0.0", "eslint-plugin-cypress": "^2.10.3", "jest": "26.2.2", "jest-mock-extended": "^1.0.14", "jest-preset-angular": "8.3.1", "prettier": "2.2.1", "prisma": "2.25.0", "serverless": "^2.37.0", "serverless-iam-roles-per-function": "^3.1.0", "serverless-jetpack": "^0.10.8", "serverless-plugin-optimize": "Album-Health/serverless-plugin-optimize", "ts-jest": "26.4.0", "ts-node": "~9.1.1", "tslint": "~6.1.0", "typescript": "~4.0.3" } }For additional context, here's how I'm trying to use the package
The text was updated successfully, but these errors were encountered: