manfredsteyer / ngx-build-plus Goto Github PK
View Code? Open in Web Editor NEWExtend the Angular CLI's default build behavior without ejecting, e. g. for Angular Elements
Extend the Angular CLI's default build behavior without ejecting, e. g. for Angular Elements
Hi,
I was following your steps as mentioned in npmjs. However, changing webpack extra thing, while building I am facing this issue. Anything I am doing wrong here.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"kognifai-poseidon-ng-footer-component": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "ngx-build-plus:build",
"options": {
"outputPath": "dist/kognifai-poseidon-ng-footer-component",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
],
"styles": [
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "kognifai-poseidon-ng-footer-component:build"
},
"configurations": {
"production": {
"browserTarget": "kognifai-poseidon-ng-footer-component:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "kognifai-poseidon-ng-footer-component:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"styles.css"
],
"scripts": [],
"assets": [
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"kognifai-poseidon-ng-footer-component-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "kognifai-poseidon-ng-footer-component:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "kognifai-poseidon-ng-footer-component"
}
Thanks,
Rahul
Can you please let me know does this build cause any issues for IE support for angular elements?
Regarding styles, when we run the build we could see scripts.js and main.js. Can you please let me know how do we generate styles, is that bundled as part of one these .js files?
Is it possible to generate chunks, i.e. have the js
and css
files separated?
Thank you for creating this great library.
AngularCli injects scripts and styles into index.html. However, I would like to use this library to generate separated script.html and style.html by using HtmlWebpackPlugin, so the scripts and style tags will go to those two files respectively.
However, I can't make it work. All I got are 2 new empty files. It seems like htmlWebpackPlugin.files is empty.
I wonder if it is possible to use this library to achieve what I am trying to do. Thanks !
Hi,
first of all thank you for this awesome package!
I dynamicly add the generated main.js
file and create the custom element during runtime.
Is it possible after making changes in my component to rebuild it, reload the main.js file from the server and recreate the custom element with the changes (without page reload)?
Do you have any idea?
Kind regards
Jan
You'll notice something here that is completely present.
Imported from @angular/core
, of course...
This is a completely blank, unmodified Angular CLI project. It uses ngx-build-plus
's build system, but it seems like Angular's upset about something.
I haven't modified anything aside from removing Angular's testing bloat and e2e nonsense, as well as installing this particular package.
Not sure why, but if I use extraWebpackConfig to not have some libraries in the bundle (using externals), the lazy module definition e.g. { path: 'page2', loadChildren: "./page2/page2.module#Page2Module" } is completely ignored and it's not generated (= no chunk exist). The extraWebpackConfig file may be even empty. If I remove this option (from
ng build --prod --project module-a --extraWebpackConfig webpack.extra.js --output-hashing none
to
ng build --prod --project module-a --output-hashing none
) then everything is ok, chunk generated. Any known troubles with lazy modules?
Because of the versions in:
"@angular-devkit/architect": ">= 0.10.0 < 0.11.0",
"@angular-devkit/build-angular": ">= 0.10.0 < 0.11.0",
"@angular-devkit/core": ">= 0.10.0 < 7.1.0",
It is not possible to upgrade to Angular 7.1 without error or warnings:
ng update --all
Package "ngx-build-plus" has an incompatible peer dependency to "@angular-devkit/build-angular" (requires ">= 0.10.0 < 0.11.0", would install "0.11.0").
Incompatible peer dependencies found. See above.
It is possible to update by using ng update @angular/core
. It seems to work without any issue, it just produces warnings during the update process
npm WARN [email protected] requires a peer of @angular-devkit/architect@>= 0.10.0 < 0.11.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular-devkit/core@>= 0.10.0 < 7.1.0 but none is installed. You must install peer dependencies yourself.
I use the demo of this plugin and throw this error after modifying the custom component.
@manfredsteyer
Hi. ngx-build-plus builds the project just fine and scripts.js and main.js files are built correctly. But I would also expect there to be a styles.css file, but it is not build. As I am using sass, do I need some kind of plugin to compile sass files?
Thank your for your effort building this library
Torben
What is the best way to use Angular Material with this builder? I have tried importing material and cdk umd bundles after building, but all styles are bare.
Thanks
Hello.
Probably I have missed something but something works wrong for me =(
I need to build one bundle for angular elements (runtime + polifils + style + vendor + main ). But build with --single-bundle true does not work.
I have created new project by Angular cli and add ngx-build-plus to it.
Enviroment -
Angular CLI: 7.0.6
Node: 8.11.3
OS: darwin x64
Angular: 7.0.4
Build output -
[email protected] build:minus /Volumes/Storage/Misha/Documents/Projects/single-output
ng build --extraWebpackConfig webpack.extra.js --single-bundle false --delete-output-path --base-href=/single-output/dist/single-output/
Date: 2018-11-20T23:06:48.227Z
Hash: 239e6179bab0b984a1d9
Time: 10116ms
chunk {main} main.js, main.js.map (main) 12.2 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.23 MB [initial] [rendered]
MacBook-Pro-Misha:single-output Misha$ npm run build:plus
[email protected] build:plus /Volumes/Storage/Misha/Documents/Projects/single-output
ng build --extraWebpackConfig webpack.extra.js --single-bundle true --delete-output-path --base-href=/single-output/dist/single-output/
Date: 2018-11-20T23:07:42.177Z
Hash: 4116a3520125962f1fdc
Time: 10449ms
chunk {main} main.js, main.js.map (main) 3.25 MB [entry] [rendered]
MacBook-Pro-Misha:single-output Misha$
As you could see I have build empty project twice, with --single-bundle true and false.
With "--single-bundle false" I have standard 4 files as from default build - application start without any errors
With "--single-bundle true" I have 1 file but application do not start with error in chrome console -
compiler.js:2547 Uncaught Error: Can't resolve all parameters for ApplicationModule: (?).
at syntaxError (compiler.js:2547)
at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:17874)
at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:17767)
at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:17635)
at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:17445)
at compiler.js:17559
at Array.forEach ()
at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:17547)
at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:17445)
at compiler.js:17532
Thanks for your time =)
ngx-build-modern does an awesome job in serving seperate JS bundles to modern and legacy browsers. I think it would be great to do the same with CSS (based on browserslist). Would you @manfredsteyer accept a PR on this?
the example works, but when I try to apply that to my component, it keeps throwing these errors on
customElements.define('custom-element', customElement);
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
at NgElementImpl.NgElement [as constructor] (elements.js:391)
at new NgElementImpl (elements.js:427)
at new AppModule (app.module.ts:42)
at createClass (core.js:8213)
at createProviderInstance$1 (core.js:8185)
at initNgModule (core.js:8118)
at new NgModuleRef (core.js:8844)
at createNgModuleRef (core.js:8833)
at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:10658)
at NgModuleFactory.push.../../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (core.js:11360)
It seams that only @angular-devkit/build-angular versions
of ^0.7.1
are supported.
Are there any plans to update?
If I see it right there must be no problems if the arguments haven't changed, right?
130 LoganDark ~/ocide ng serve ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-09-01T17:34:52.138Z
Hash: 924f5298cad7c21d03a4
Time: 2649ms
chunk {main} main.js, main.js.map (main) 330 kB [entry] [rendered]
ERROR in ./src/main.ts
Module build failed: Error: Angular Compiler was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed. You can check this withnpm ls @ngtools/webpack
, and then remove the extra copies.
at Object.ngcLoader (/Users/LoganDark/ocide/node_modules/@ngtools/webpack/src/loader.js:33:15)
ERROR in No NgModule metadata found for 'AppModule'.
ℹ 「wdm」: Failed to compile.
Excuse GitHub's markdown fucking with the code block please.
Here's my extra webpack config:
module.exports = {
externals : {
rxjs: 'rxjs',
'@angular/core': 'ng.core',
'@angular/common': 'ng.common',
'@angular/platform-browser': 'ng.platformBrowser',
}
}
I did the modifications to build
and serve
in the config, nothing more
This is a BRAND NEW Angular CLI project. Absolutely NO modifications whatsoever to any source files.
130 LoganDark ~/ocide ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 6.0.8
Node: 10.1.0
OS: darwin x64
Angular: 6.1.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/build-webpack 0.7.5
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cli 6.0.8
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.3.1
typescript 2.7.2
webpack 4.8.3
Hi,
I was following your steps as mentioned in npmjs. However, changing webpack extra thing, while building I am facing this issue. Anything I am doing wrong here.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"kognifai-poseidon-ng-footer-component": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "ngx-build-plus:build",
"options": {
"outputPath": "dist/kognifai-poseidon-ng-footer-component",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
],
"styles": [
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "kognifai-poseidon-ng-footer-component:build"
},
"configurations": {
"production": {
"browserTarget": "kognifai-poseidon-ng-footer-component:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "kognifai-poseidon-ng-footer-component:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"styles.css"
],
"scripts": [],
"assets": [
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"kognifai-poseidon-ng-footer-component-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "kognifai-poseidon-ng-footer-component:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "kognifai-poseidon-ng-footer-component"
}
Thanks,
Rahul
I am trying to build a web component with ngx-build-plus, which should work withe IE11. In my polyfills.ts, all my polyfills are defined. If I am correct they are ignored by ngx-build-plus and no polyfills.js is created. But they are needed by IE11. Where do I import the polyfills? Is there a way to get the polyfills build?
Currently, ng add ngx-build-plus
command adds ngx-build-plus
package into dependencies
in package.json.
I think it will be better that adds it into devDependencies
because ngx-build-plus
is not needed in runtime.
Just a small warning when installing ngx-build-plus:
[email protected] requires a peer of @angular-devkit/core@~0.10.0 but none is installed. You must install peer dependencies yourself.
that's a peerDependency in your package.json, but that version of angular-devkit/core does not exist. see https://www.npmjs.com/package/@angular-devkit/core
Hello,
actually now sample project is broken.
Steps:
git clone https://github.com/manfredsteyer/ngx-build-plus.git
cd sample
npm install
npm run build
npm start
Actual result: blank page
Expected result: web component to be rendered
Hey,
first of all thank you - you saved me with this solution. :)
but i have a little issue:
i created custom element called 'login-element' and tried to host it in angular 5 app,
eveythings look fine but
when i loaded the js files in angular 5 app index.html file this way :
<script type="text/javascript" src="./assets/js/native-shim.js"></script> <script src="./assets/js/custom-elements.min.js"></script> <script type="text/javascript" src="./assets/js/rxjs.umd.js"></script> <script type="text/javascript" src="./assets/js/core.umd.js"></script> <script type="text/javascript" src="./assets/js/common.umd.js"></script> <script type="text/javascript" src="./assets/js/platform-browser.umd.js"></script> <script type="text/javascript" src="./assets/js/elements.umd.js"></script> <script type="text/javascript" src="./assets/js/login-element.js"></script>i got this error:
ERROR DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
and when i tried to load them this way:
<script type="text/javascript" src="./assets/js/login-element.js"></script> <script type="text/javascript" src="./assets/js/native-shim.js"></script> <script src="./assets/js/custom-elements.min.js"></script> <script type="text/javascript" src="./assets/js/rxjs.umd.js"></script> <script type="text/javascript" src="./assets/js/core.umd.js"></script> <script type="text/javascript" src="./assets/js/common.umd.js"></script> <script type="text/javascript" src="./assets/js/platform-browser.umd.js"></script> <script type="text/javascript" src="./assets/js/elements.umd.js"></script>i got this error:
Uncaught ReferenceError: ng is not defined
at Object. (login-element.js:1)
at r (login-element.js:1)
at Module. (login-element.js:1)
at r (login-element.js:1)
at Object. (login-element.js:1)
at r (login-element.js:1)
at login-element.js:1
at login-element.js:1
What am I not doing right?
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 7.1.4
Node: 11.3.0
OS: win32 x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.11.4
@angular-devkit/build-angular 0.11.4
@angular-devkit/build-ng-packagr 0.11.4
@angular-devkit/build-optimizer 0.11.4
@angular-devkit/build-webpack 0.11.4
@angular-devkit/core 7.1.4
@angular-devkit/schematics 7.1.4
@ngtools/json-schema 1.1.0
@ngtools/webpack 7.1.4
@schematics/angular 7.1.4
@schematics/update 0.11.4
ng-packagr 4.4.5
rxjs 6.3.3
typescript 3.1.6
webpack 4.23.1
After creating my lib (ng generate library my-lib
) and setting ngx-build-plus
manually [1], I did try to follow this another example, however, I`ve got this error, on build.
> ng build my-lib --extraWebpackConfig webpack.extra.js --output-hashing none --single-bundle true
Unknown option: '--project'
> ng new myApp
> cd myApp/
> ng generate library my-lib
> ng add @angular/elements --project my-lib
> npm install @webcomponents/custom-elements --save
On step 2, add this changes on ./projects/my-lib/src/lib/my-lib.component.ts
.
On step 3, install ngx-build-plus
manually [1].
step 5, add webpack.extra.js
on the root project.
And 6, finally, build the library to get this message error:
> ng build my-lib --extraWebpackConfig webpack.extra.js --output-hashing none --single-bundle true
Unknown option: '--project'
ngx-build-plus
manually?When I did install using Angular CLI, I got this error
> ng add ngx-build-plus --project my-lib
expected node projects/my-lib/architect/serve in angular.json
I need to create a umd
file from my angular library (as the angular builder does).
However, I need to customize my build process, because I need to include some dependencies into this file (E.g. @angular/material
) and another I'll send as parameter.
I would like to get one clarification before using this library. I had use case to display two angular elements in one browser window. I first tried with default angular devkit build and it was not supporting, getting error when i tried to add second angular element to DOM.
With ngx-build-plus i am not seeing any issues, i am able to display multiple angular elements in window. i am not using webpackextraconfig.js.
Trying to understand are you doing anything by default in this build to support this bevaviour (related angular elements library).
I looked at the code, couldn't understand much.
Thanks in advance.
When running npm install
for the sample app, it outputs the following error block:
npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected]
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'elements-loading'
npm ERR! notarget
This seems like a valid problem since this version history on npmjs suggests a version 6.1.1 never existed.
Steps:
git clone https://github.com/manfredsteyer/ngx-build-plus.git
cd sample
npm install
npm run build
npm start
open app in IE11
Actual result: blank page with errors in console
Expected result: web component to be rendered
Hi, I'm really interested in using this module as I'm also looking to use multiple angular elements in a page.
Not sure if I'm missing something silly but when I follow the instructions and then try to ng build
I get the following error:
Cannot find module '/Users/username/workspace/web-components-poc/apps/angular-content-element/node_modules/ngx-build-plus/src/plus'
The module is installed and when I look in the directory above, I can see index.ts
and schema.json
. Do I need to change something in my project because the module only contains .ts files?
0 LoganDark ~/ocide ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-09-02T22:12:43.502Z
Hash: be34aea8b5e889748a8b
Time: 2004ms
chunk {main} main.js, main.js.map (main) 331 kB [entry] [rendered]
ERROR in multi (webpack)-dev-server/client?http://0.0.0.0:0 ./src/main.ts
Module not found: Error: Can't resolve '@ngtools/webpack' in '/Users/LoganDark/ocide'
ERROR in No NgModule metadata found for 'AppModule'.
ℹ 「wdm」: Failed to compile.
The first error is important. The second one is already solved.
130 LoganDark ~/ocide npm ls @ngtools/webpack
[email protected] /Users/LoganDark/ocide
└─┬ [email protected]
└─┬ @angular-devkit/[email protected]
└── @ngtools/[email protected]
This used to work, but I'm not sure why it doesn't anymore...
I tried running npm run serve
in the sample app and get this error. Am I missing something?
Uncaught Error: Can't resolve all parameters for AppModule: (?).
at syntaxError (compiler.js:1016)
at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:10917)
at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:10810)
at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10678)
at JitCompiler../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:23858)
at JitCompiler../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23839)
at JitCompiler../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:23799)
at CompilerImpl../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
at PlatformRef../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule (core.js:4352)
at Object../src/main.ts (main.ts:11)
For example extraWebpackConfig is not processed
Create a project with serve like this
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"browserTarget": "bps:build",
"extraWebpackConfig": "./webpack.serve.extra.js"
},
"configurations": {
"production": {
"browserTarget": "bps:build:production"
}
}
},
Now in webpack.serve.extra.js make an error to stop the build (for example one line with error word).
ng serve will work, so webpack.serve.extra.js is not processed.
The fix is just get the options from run function.
I have done a new pull request that is more clear the changes. The fix is very simple, the param browserOptions in buildWebpackConfig has been filtered by the run function, and run function will call to buildWebpackConfig passing the the filtered options instead the original options, you can see in Line 83, so when run functions call to buildWebpackConfig functions Line 91 your extended class will receive the options without additional options like extraWebpackConfig.
The fix save the original options in a var in run function so instead using processed options the fix use the cached options (localOptions var).
@manfredsteyer If you need that I fix the conflicts in the pull request I can do it, it is a very simple fix.
PS: conflicts resolved
Warning message
warning " > [email protected]" has unmet peer dependency "@angular-devkit/architect@>= 0.10.0".
warning " > [email protected]" has unmet peer dependency "@angular-devkit/core@>= 0.10.0".
warning "ngx-build-plus > [email protected]" has unmet peer dependency "webpack@^4.0.0".
warning "ngx-build-plus > webpack-dev-server > [email protected]" has unmet peer dependency "webpack@^4.0.0".
Thanks for your response. Can you please let me know what is that global variable introduces with default angular cli build and are we eliminating this variable in ngx-build-plus output bundle?
I am not using any extrawebpackconfig. also not importing any angular libraries while using angular elements. I am able to display two angular elements in one window (which will not work with angular-devkit build)
Can you please help me understand how this works?
Originally posted by @sri1980 in #41 (comment)
No repo yet but when output as a single bundle in prod mode, it appears the polyfill are not working. I've moved the zone.js file out and followed the guidance but when running in prod mode and single bundle, it appears to not work, (ie 11...). Anyone else have tips so I love the idea of a single bundle
From what I can tell from the documentation, webpack-merge's merge.smart() function is better at merging webpack configs than a plain merge()
is. The merge.smart() function does a better job of merging the loaders
and module.rules
webpack configuration, and maybe some other parts of the config.
Thoughts on whether ngx-build-plus should switch over to merge.smart()?
webpack.extra.js
const uglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
"externals": {
"rxjs": "rxjs",
"@angular/core": "ng.core",
"@angular/common": "ng.common",
"@angular/platform-browser": "ng.platformBrowser",
"@angular/elements": "ng.elements"
},
"output": {
library: "omegaChatBot"
},
plugins: [
new uglifyJSPlugin({
uglifyOptions: {
output: {
comments: false
}
}
})
]
}
Trying to add uglifyJSPlugin to the webpack extra result in a failure with the following error.
ERROR in scripts.js from UglifyJs
Unexpected token: keyword (const) [scripts.js:29,2]
Can you please add a LICENSE file and set the license type in your repo? Also for ngx-build-modern.
If you want me to, I will create a PR to add these files. Just let me know.
I'm having some trouble with an error in Angular core being thrown in is_dev_mode.ts
:
export function enableProdMode(): void {
if (_runModeLocked) {
throw new Error('Cannot enable prod mode after platform setup.');
}
_devMode = false;
}
When enableProdMode()
is active in main.ts
during a prod build, I receive the error and only the first element of two loads on the page. If I comment this out, the error goes away and both elements load. Because I have two projects that are both elements, there are two identical main.ts
files and they each just bootstrap their respective modules.
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { DataConnectorModule } from "./data-connector/data-connector.module";
import { environment } from "./environments/environment";
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(DataConnectorModule)
.catch(err => console.error(err));
There is no nesting of these elements. They are both sibling projects:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
"packageManager": "yarn",
"warnings": {
"typescriptMismatch": true
}
},
"newProjectRoot": "projects",
"projects": {
"data-connector": {
"root": "projects/data-connector/",
"sourceRoot": "projects/data-connector/src",
"projectType": "application",
"prefix": "data-connector",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "ngx-build-plus:build",
"options": {
"outputPath": "dist/data-connector",
"index": "projects/data-connector/src/index.html",
"main": "projects/data-connector/src/main.ts",
"polyfills": "projects/data-connector/src/polyfills.ts",
"tsConfig": "projects/data-connector/tsconfig.app.json",
"assets": [
"projects/data-connector/src/favicon.ico",
"projects/data-connector/src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"projects/data-connector/src/styles.scss"
],
"scripts": [
{
"input": "node_modules/document-register-element/build/document-register-element.js"
}
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "projects/data-connector/src/environments/environment.ts",
"with": "projects/data-connector/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"browserTarget": "data-connector:build"
},
"configurations": {
"production": {
"browserTarget": "data-connector:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "data-connector:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/data-connector/src/test.ts",
"polyfills": "projects/data-connector/src/polyfills.ts",
"tsConfig": "projects/data-connector/tsconfig.spec.json",
"karmaConfig": "projects/data-connector/karma.conf.js",
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"projects/data-connector/src/styles.scss"
],
"scripts": [],
"assets": [
"projects/data-connector/src/favicon.ico",
"projects/data-connector/src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/data-connector/tsconfig.app.json",
"projects/data-connector/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"scan-connector": {
"root": "projects/scan-connector/",
"sourceRoot": "projects/scan-connector/src",
"projectType": "application",
"prefix": "scan-connector",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "ngx-build-plus:build",
"options": {
"outputPath": "dist/scan-connector",
"index": "projects/scan-connector/src/index.html",
"main": "projects/scan-connector/src/main.ts",
"polyfills": "projects/scan-connector/src/polyfills.ts",
"tsConfig": "projects/scan-connector/tsconfig.app.json",
"assets": [
"projects/scan-connector/src/favicon.ico",
"projects/scan-connector/src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"projects/scan-connector/src/styles.scss"
],
"scripts": [
{
"input": "node_modules/document-register-element/build/document-register-element.js"
}
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "projects/scan-connector/src/environments/environment.ts",
"with": "projects/scan-connector/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"browserTarget": "scan-connector:build"
},
"configurations": {
"production": {
"browserTarget": "scan-connector:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "scan-connector:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/scan-connector/src/test.ts",
"polyfills": "projects/scan-connector/src/polyfills.ts",
"tsConfig": "projects/scan-connector/tsconfig.spec.json",
"karmaConfig": "projects/scan-connector/karma.conf.js",
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"projects/scan-connector/src/styles.scss"
],
"scripts": [],
"assets": [
"projects/scan-connector/src/favicon.ico",
"projects/scan-connector/src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/scan-connector/tsconfig.app.json",
"projects/scan-connector/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Elements</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="native-shim.js"></script>
<script type="text/javascript" src="custom-elements.min.js"></script>
<script type="text/javascript" src="zone.min.js"></script>
<script type="text/javascript" src="rxjs.umd.min.js"></script>
<script type="text/javascript" src="core.umd.min.js"></script>
<script type="text/javascript" src="common.umd.min.js"></script>
<script type="text/javascript" src="platform-browser.umd.min.js"></script>
<script type="text/javascript" src="elements.umd.min.js"></script>
<script type="text/javascript" src="ng-elements.js"></script>
</head>
<body>
<data-connector></data-connector>
<scan-connector></scan-connector>
</body>
</html>
Any suggestions welcome. Thanks!
Hello,
i had successfully introduced webcomponents into our old legacy angular 1 application.
I have one bundle because it's our non functional requirements and everything worked well.
But after updating to Angular 7 webcomponent does not render. I found that it's because runtime.js has to be in bundle as well. When i insert it manually in the bundle - webcomponent renders. But would like such things to be done under the hood.
Also i notices that ngx-build-plus/sample also does not work now. Webcomponent is not rendered.
i'm building it in this way
"build:watch": "ng build --vendor-chunk=false --delete-output-path=false --watch --extraWebpackConfig webpack/webpack.dev-extra.js",
webpack.dev-extra.js:
module.exports = {
"entry": {
"item-html5": "src/main.ts"
},
"externals": {
"lodash" : {
commonjs: 'lodash',
amd: 'lodash',
root: '_' // indicates global variable
},
"jquery": 'jQuery'
},
"devtool": 'inline-source-map',
}
It will be good if you fix sample application and this should also solve my problem. Or maybe you have any ideas?
thanks in advance,
Vlad
Hello, I just tried to use the library, unfortunately, it's breaking build because of jasmine (we are using jest for testing)
version: [email protected]
running regular (old) build (ng build --prod --configuration=production
)
running modern build (yarn run build:modern
)
When removed jasmine (diry rm -rf jasmine @types/jasmine
) build was succesfull (with both cases).
only library (based on yarn list) which brings jasmine into the project is this one. Do you think it will be solvable? (e.g move jasmine to devDependencies).
Also, let me know if any other information is needed, will be glad to help :)
angular 7.1.4
cli 7.1.4
ngx-build-plus 7.6.0
I've set up the example from the readme using webpack.DefinePlugin
and the --plugin
option.
Works fine using build
and serve
, but i can't get the tests running as the custom webpack config seems to be ignored.
How to solve this?
[edit]
to be more precise:
i checked out ngx-build-plus and tried your getting-started
project which seems to have the same problem: tests fail with VERSION is not defined
...
Please tell me this is somehow solvable... :)
I tried to create a production build with additional webpack.extra.js:
module.imports = { output: { jsonpFunction: "BLABLABLA" } }
Running ng build --prod --extraWebpackConfig webpack.extra.js
results in
Uncaught Error: In this configuration Angular requires Zone.js
Running ng build --prod --extraWebpackConfig webpack.extra.js --single-bundle false
works fine
The Angular global scripts defined in the angular.json config do not get injected into the HtmlWebpackPlugin output. Adding 'new HtmlWebpackPlugin()' into the plugins array causes this issue, as well as incorrectly sorting the chunks that did get injected.
The scripts chunk gets correctly injected by the Angular CLI without including the HtmlWebpackPlugin and or by excluding the extraWebpackConfig build flag.
Package versions:
"@angular/cli": "~7.1.2",
"ngx-build-plus": "^7.3.2",
"html-webpack-plugin": "^3.2.0",
Build script:
"dev": "ng build --extraWebpackConfig webpack.extra.js --outputPath=../../../public/dist --extract-css"
HtmlWebpackPlugin config:
new HtmlWebpackPlugin({
inject: true,
template: '../../views/layouts/app.blade.php',
filename: '../../resources/views/index.blade.php',
chunksSortMode: 'manual',
chunks: [
'polyfills',
'runtime',
'vendor',
'scripts', // The global scripts from angular.json
'main',
'styles',
],
})
styles.css
does nothing.
index.html
can't even <link>
to it. ng serve
detects it as unchanged when I change index.html
. It seems like this is only useful when you aren't going to be changing any HTML or CSS. I don't even have any extra Webpack configs, and the build process is still entirely different from the regular Angular one. I didn't even tell it to change anything!
I saw a similar issue on closed issues list. Nothing was mentioned on how to fix it and what the cause was.
Cannot find module '/Users/kalebr/dev/fileManager/angularElements/node_modules/ngx-build-plus/src/plus'
Error: Cannot find module '/Users/kalebr/dev/fileManager/angularElements/node_modules/ngx-build-plus/src/plus'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
at Function.Module._load (internal/modules/cjs/loader.js:520:25)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Architect.getBuilder (/Users/kalebr/dev/fileManager/angularElements/node_modules/@angular-devkit/architect/src/architect.js:189:35)
at MapSubscriber.getBuilderDescription.pipe.operators_1.map [as project] (/Users/kalebr/dev/fileManager/angularElements/node_modules/@angular-devkit/architect/src/architect.js:121:332)
I always wanted to be able to use my babel-engine-plugin
to transpile down dependencies which use some of the new ES features. It works perfectly fine with the build
step when using ngx-build-plus
, would be nice if I could run it with serve
as well.
I've just integrated this fantastic library into my project to customize the webpack config, but I've found that I have to duplicate --extraWebpackConfig webpack.extra.config.js
in many of my npm scripts. Moreover, I will need to ensure that any one who invokes ng
directly does this to get the desired behaviour.
Could this value be put somewhere central, e.g. package.json
or angular.json
so that if the setting is there this option is used implicitly?
Hi,
In the past I've built a library that does the same thing as this one but without native integration, which means monkey patching and dedicated cli command...
This lib takes the native approach, which is, of course, a significant improvement and the best way to go.
I'v upgraded my library to do the same thing (code copy 💯 ) this lib does but with 2 features I was missing.
I would be happy to pass them into this repo, if you want:
Use .ts
config files (as long as ts-node
exists)
Provide a function instead of a configuration object (objects are still supported tough)
The first feature is straightforward... the 2nd:
ngx-build-plus
excepts a webpack configuration object which it merges into the
original configuration produces by the cli.
A function accepts a single parameter, the original configuration object
generated by the angular cli. Internally, the function can modify the object or return a new
object that will be used as the configuration object sent to webpack.
Using a function provides a high level of control over the configuration file.
Under the hood, ngx-build-plus
is using webpack-merge to do the merging. webpack-merge
has
a lot of features and merging strategies which you can't use, with a function you
can do the merging manually.
webpack-merge
aside, sometimes you want to apply complex logic on the config
that act's based on certain conditions, removing things, adding things etc.. this is
not possible with merging.
See more here
Thanks!
Hello,
Apology for adding it as an issue, we have a requirement as given below:
We have a requirement for creating a dynamic dashboard, which can hold the widgets coming from various third-party servers.
We thought of having the dashboard developed in Angular and all the widgets will be developed as Angular elements.
Another requirement we have is like the dashboard code will be hosted on some server and is not required to update or modify the source code for the widget.
We have been following you for the ng-zone already initialized error.
Can you please help us in identifying a proper mechanism for implementing it?
Appreciate the help.
Thanks!
Is it possible to use "ngx-build-plus" for building multiple angular custom elements and consume them in angular CLI project? I'm asking since in "ngx-build-plus/sample" newly built element is used in index.html file, which includes files from angular/core,common, etc..., Also i've tried to create elements and use them in angular CLI project but unsuccessfully.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.