Open thebrianbug opened 3 years ago
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?
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 {}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
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.tsThis 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
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
Here's my
package.jsonFor additional context, here's how I'm trying to use the package