ErinCoughlan / create-ng1-wrapper

Helper method for using Angular Elements within an AngularJS application
Apache License 2.0
21 stars 7 forks source link

Build errors due to undefined namespaces #6

Open thebrianbug opened 3 years ago

thebrianbug commented 3 years ago

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 https://github.com/ErinCoughlan/create-ng1-wrapper/issues/5

npm run build ng-hello-world-element -- --configuration=production

> ah-applications-nx@0.0.0 build /Users/brianmcilwain/source/ah-applications-nx
> nx build "ng-hello-world-element" "--configuration=production"

> nx run ng-hello-world-element:build:production 
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
✔ Browser application bundle generation complete.

Error: node_modules/create-ng1-wrapper/create_ng1_wrapper.ts:49:8 - error TS2503: Cannot find namespace 'angular'.

49     ): angular.IComponentOptions {
          ~~~~~~~
node_modules/create-ng1-wrapper/create_ng1_wrapper.ts:68:19 - error TS2304: Cannot find name 'JQuery'.

68         $element: JQuery,
                     ~~~~~~
node_modules/create-ng1-wrapper/create_ng1_wrapper.ts:69:38 - error TS2503: Cannot find namespace 'angular'.

69         private readonly $rootScope: angular.IRootScopeService,
                                        ~~~~~~~
node_modules/create-ng1-wrapper/create_ng1_wrapper.ts:122:24 - error TS2339: Property '$inject' does not exist on type 'typeof Ng1WrapperController'.

122   Ng1WrapperController.$inject= ['$element', '$rootScope'];
                           ~~~~~~~
node_modules/create-ng1-wrapper/create_ng1_wrapper.ts:153:28 - error TS2503: Cannot find namespace 'angular'.

153   const ng1ElementWrapper: angular.IComponentOptions = {
                               ~~~~~~~

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ah-applications-nx@0.0.0 build: `nx build "ng-hello-world-element" "--configuration=production"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the ah-applications-nx@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/brianmcilwain/.npm/_logs/2021-08-05T16_55_07_720Z-debug.log

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

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';

@NgModule({
  imports: [BrowserModule, NgHelloWorldModule],
  providers: [],
})
export class AppModule implements DoBootstrap {
  constructor(private injector: Injector) {
    const elements: any[] = [[HelloWorldComponent, 'hello-world-wc']];

    for (const [component, name] of elements) {
      const el = createCustomElement(component, { injector });
      customElements.define(name, el);
      createNg1Wrapper(name, component, { injector });
    }
  }

  ngDoBootstrap() {}
}
thebrianbug commented 3 years ago

Finally, can you please let me know where ng1Module on the slides comes from? Is this an Angular 2+ module, or an AngularJS module? If it really is an AnguarJS module, how do you get AngularJS into your Angular project? I'm assuming you don't need ngUpdate to make that work?

Screen Shot 2021-08-05 at 12 11 29 PM

Thanks again for your work!

thebrianbug commented 3 years ago

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 {}
thebrianbug commented 3 years ago

Another update - the build errors go away with

npm i -D @types/angular

IMO 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

npm run build ng-hello-world-element -- --configuration=production

> ah-applications-nx@0.0.0 build /Users/brianmcilwain/source/ah-applications-nx
> nx build "ng-hello-world-element" "--configuration=production"

> nx run ng-hello-world-element:build:production 
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
✔ Browser application bundle generation complete.

Warning: /Users/brianmcilwain/source/ah-applications-nx/apps/ng/hello-world-element/src/app/app.module.ts depends on 'angular'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Error: ./apps/ng/hello-world-element/src/app/app.module.ts
Module not found: Error: Can't resolve 'create-ng1-wrapper' in '/Users/brianmcilwain/source/ah-applications-nx/apps/ng/hello-world-element/src/app'
resolve 'create-ng1-wrapper' in '/Users/brianmcilwain/source/ah-applications-nx/apps/ng/hello-world-element/src/app'
  Parsed request is a module
  using description file: /Users/brianmcilwain/source/ah-applications-nx/package.json (relative path: ./apps/ng/hello-world-element/src/app)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in /Users/brianmcilwain/source/ah-applications-nx
        using description file: /Users/brianmcilwain/source/ah-applications-nx/package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/brianmcilwain/source/ah-applications-nx/package.json (relative path: ./create-ng1-wrapper)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/brianmcilwain/source/ah-applications-nx/create-ng1-wrapper doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/brianmcilwain/source/ah-applications-nx/create-ng1-wrapper.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/brianmcilwain/source/ah-applications-nx/create-ng1-wrapper.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/brianmcilwain/source/ah-applications-nx/create-ng1-wrapper.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/brianmcilwain/source/ah-applications-nx/create-ng1-wrapper.js doesn't exist
            as directory
              /Users/brianmcilwain/source/ah-applications-nx/create-ng1-wrapper doesn't exist
      /Users/brianmcilwain/source/ah-applications-nx/apps/ng/hello-world-element/src/app/node_modules doesn't exist or is not a directory
      /Users/brianmcilwain/source/ah-applications-nx/apps/ng/hello-world-element/src/node_modules doesn't exist or is not a directory
      /Users/brianmcilwain/source/ah-applications-nx/apps/ng/hello-world-element/node_modules doesn't exist or is not a directory
      /Users/brianmcilwain/source/ah-applications-nx/apps/ng/node_modules doesn't exist or is not a directory
      /Users/brianmcilwain/source/ah-applications-nx/apps/node_modules doesn't exist or is not a directory
      /Users/brianmcilwain/source/node_modules doesn't exist or is not a directory
      /Users/brianmcilwain/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/brianmcilwain/source/ah-applications-nx/node_modules
        using description file: /Users/brianmcilwain/source/ah-applications-nx/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/package.json (relative path: .)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper is not a file
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper.js doesn't exist
            as directory
              existing directory
                use ./create_ng1_wrapper.js from main in package.json
                  using description file: /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/package.json (relative path: .)
                    Field 'browser' doesn't contain a valid alias configuration
                    using description file: /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/package.json (relative path: ./create_ng1_wrapper.js)
                      no extension
                        Field 'browser' doesn't contain a valid alias configuration
                        /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/create_ng1_wrapper.js doesn't exist
                      .ts
                        Field 'browser' doesn't contain a valid alias configuration
                        /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/create_ng1_wrapper.js.ts doesn't exist
                      .tsx
                        Field 'browser' doesn't contain a valid alias configuration
                        /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/create_ng1_wrapper.js.tsx doesn't exist
                      .mjs
                        Field 'browser' doesn't contain a valid alias configuration
                        /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/create_ng1_wrapper.js.mjs doesn't exist
                      .js
                        Field 'browser' doesn't contain a valid alias configuration
                        /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/create_ng1_wrapper.js.js doesn't exist
                      as directory
                        /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/create_ng1_wrapper.js doesn't exist
                using path: /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/index
                  using description file: /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/package.json (relative path: ./index)
                    no extension
                      Field 'browser' doesn't contain a valid alias configuration
                      /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/index doesn't exist
                    .ts
                      Field 'browser' doesn't contain a valid alias configuration
                      /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/index.ts doesn't exist
                    .tsx
                      Field 'browser' doesn't contain a valid alias configuration
                      /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/index.tsx doesn't exist
                    .mjs
                      Field 'browser' doesn't contain a valid alias configuration
                      /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/index.mjs doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
                      /Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/index.js doesn't exist
[/Users/brianmcilwain/source/ah-applications-nx/create-ng1-wrapper]
[/Users/brianmcilwain/source/ah-applications-nx/create-ng1-wrapper.ts]
[/Users/brianmcilwain/source/ah-applications-nx/create-ng1-wrapper.tsx]
[/Users/brianmcilwain/source/ah-applications-nx/create-ng1-wrapper.mjs]
[/Users/brianmcilwain/source/ah-applications-nx/create-ng1-wrapper.js]
[/Users/brianmcilwain/source/ah-applications-nx/apps/ng/hello-world-element/src/app/node_modules]
[/Users/brianmcilwain/source/ah-applications-nx/apps/ng/hello-world-element/src/node_modules]
[/Users/brianmcilwain/source/ah-applications-nx/apps/ng/hello-world-element/node_modules]
[/Users/brianmcilwain/source/ah-applications-nx/apps/ng/node_modules]
[/Users/brianmcilwain/source/ah-applications-nx/apps/node_modules]
[/Users/brianmcilwain/source/node_modules]
[/Users/brianmcilwain/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper]
[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper.ts]
[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper.tsx]
[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper.mjs]
[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper.js]
[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/create_ng1_wrapper.js]
[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/create_ng1_wrapper.js.ts]
[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/create_ng1_wrapper.js.tsx]
[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/create_ng1_wrapper.js.mjs]
[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/create_ng1_wrapper.js.js]
[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/index]
[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/index.ts]
1m[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/index.tsx]
[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/index.mjs]
[/Users/brianmcilwain/source/ah-applications-nx/node_modules/create-ng1-wrapper/index.js]
 @ ./apps/ng/hello-world-element/src/app/app.module.ts 5:0-54 17:30-46
 @ ./apps/ng/hello-world-element/src/main.ts
 @ multi ./apps/ng/hello-world-element/src/main.ts

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 noop similarly to os is in the post

Or, a module might be declared in multiple modules https://github.com/angular/angular-cli/issues/8860