I am currently encountering a problem which is probably simple, but I don't manage to nail it.
I have a polymer application using the latest version of lit-element (2.0.1).
Unfortunately after running the npm run build:static (behind it is polymer build) and serve it using: npm run serve:static (behind it is executing: polymer serve --port 5000 build/es5-bundled).
The lit-element.js is not available.
If I list the files in the project node_module I have:
pxke#station:ls -1 node_modules/lit-element/
CHANGELOG.md
lib
LICENSE
lit-element.d.ts
lit-element.d.ts.map
lit-element.js
lit-element.js.map
package.json
README.md
src
The lit-element.js seems to be there, after the build if I look in the node_module of the build it is not copied.
g#station: ls -1 build/es5-bundled/node_modules/lit-element/
CHANGELOG.md
lib
LICENSE
lit-element.d.ts
lit-element.d.ts.map
lit-element.js.map
package.json
README.md
src
Do you know why this would happen?
Thank you in advance.
Have a great day!
Here are some extra information:
Dependency section of package.json
"dependencies": {
"#material/base": ">=0.3.6",
"#material/mwc-base": ">=0.3.6",
"#material/mwc-button": ">=0.4.0",
"#material/mwc-icon": ">=0.3.6",
"#material/mwc-ripple": ">=0.3.6",
"#material/ripple": ">=0.3.6",
"#polymer/app-layout": ">=3.0.0",
"#polymer/paper-button": ">=3.0.1",
"#polymer/polymer": ">=3.1.0",
"#webcomponents/webcomponentsjs": ">=2.2.4",
"browser-sync": "2.26.3",
"lit-element": ">=2.0.1",
"lit-html": ">=1.0.0",
"npm": "^6.9.0",
"pwa-helpers": "^0.9.0",
"redux": ">=4.0.0",
"redux-thunk": ">=2.3.0",
"reselect": "^4.0.0",
"sinon": "^4.5.0"
},
polymer.json
{
"entrypoint": "index.html",
"shell": "src/components/test-app.js",
"sources": [
"images/**/*"
],
"extraDependencies": [
"manifest.json",
"node_modules/#webcomponents/webcomponentsjs/**",
"node_modules/lit-element/**",
"node_modules/lit-html/**",
"node_modules/#material/mwc-button/**",
"node_modules/#material/mwc-base/**",
"node_modules/#material/base/**",
"node_modules/#material/mwc-ripple/**",
"node_modules/#material/ripple/**",
"node_modules/#material/mwc-icon/**",
"push-manifest.json"
],
"builds": [
{
"name": "esm-bundled",
"browserCapabilities": [
"es2015",
"modules"
],
"js": {
"minify": true
},
"css": {
"minify": true
},
"html": {
"minify": true
},
"bundle": true,
"addServiceWorker": true
},
{
"name": "es6-bundled",
"browserCapabilities": [
"es2015"
],
"js": {
"compile": "es2015",
"minify": true,
"transformModulesToAmd": true
},
"css": {
"minify": true
},
"html": {
"minify": true
},
"bundle": true,
"addServiceWorker": true
},
{
"name": "es5-bundled",
"js": {
"compile": "es5",
"minify": true,
"transformModulesToAmd": true
},
"css": {
"minify": true
},
"html": {
"minify": true
},
"bundle": true,
"addServiceWorker": true
}
],
"moduleResolution": "node",
"npm": true
}
Normally, when you import lit-element, Polymer build may bundle the lit-element codes into built codes. You may not see at the path. But if you want to force to add the path then you may define in polymer.json file under fragments. example:
polymer.json:
{
"entrypoint": "index.html",
"shell": "src/components/test-app.js",
"sources": [
"images/**/*"
],
"fragments": [
"node_modules/lit-element/**/*",
],
"sources": [
"images/**/*"
],
"extraDependencies": [
...
Related
I apologize in advance because I have created a thread with a similar title to another thread. I had to do this because I couldn't find a way to fix this.
So, I want to make my website auto reload/refresh using the Laravel Serve LiveReload by Bangnokia library (src: https://github.com/bangnokia/laravel-serve-livereload) following the tutorial from Gubug IT's yt channel (src: https: //www.youtube.com/watch?v=ZJ7m6fWNW0E).
Well, when I install composer require bangnokia/laravel-serve-livereload --dev on laravel 9, an error appears like the photo below. maybe colleagues have a solution to fix this or suggest a solution with another method. please help me, thank you..
error picture
my composer.json:
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": ["framework", "laravel"],
"license": "MIT",
"require": {
"php": "^8.0.2",
"anhskohbo/no-captcha": "^3.4",
"google/recaptcha": "^1.2",
"guzzlehttp/guzzle": "^7.2",
"laravel-lang/lang": "~3.0",
"laravel/framework": "^9.2",
"laravel/sanctum": "^2.14.1",
"laravel/socialite": "^5.5",
"laravel/tinker": "^2.7",
"laravel/ui": "^3.4",
"realrashid/sweet-alert": "^5.0"
},
"require-dev": {
"fakerphp/faker": "^1.9.1",
"laravel/sail": "^1.0.1",
"mockery/mockery": "^1.4.4",
"nunomaduro/collision": "^6.1",
"phpunit/phpunit": "^9.5.10",
"spatie/laravel-ignition": "^1.0"
},
"autoload": {
"psr-4": {
"App\\": "app/",
"Database\\Factories\\": "database/factories/",
"Database\\Seeders\\": "database/seeders/"
}
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
"scripts": {
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"#php artisan package:discover --ansi"
],
"post-update-cmd": [
"#php artisan vendor:publish --tag=laravel-assets --ansi --force"
],
"post-root-package-install": [
"#php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"#php artisan key:generate --ansi"
]
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"minimum-stability": "dev",
"prefer-stable": true
}
This package is daed, please use the new Vite integrated instead.
https://laravel.com/docs/9.x/vite#blade-refreshing-on-save
While building my Angular 6 application, I need to specify 2 things at once:
If it's production or development build
The locale I'm using
In my angular.json I have:
"build": {
...
"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
},
"pl": {
"fileReplacements": [
{
"replace": "src/assets/i18n/translations.json",
"with": "src/assets/i18n/pl.json"
}
]
},
"en": {
"fileReplacements": [
{
"replace": "src/assets/i18n/translations.json",
"with": "src/assets/i18n/en.json"
}
]
}
}
}
But when I'm doing ng build --configuration=en --configuration=production I'm getting an error Configuration 'en,production' could not be found. I understand it means you can specify only 1 configuration at a time.
This means I need to create separate en, pl, productionEn, productionPl configurations. Though not the cleanest pattern, I can live with that.
"build": {
...
"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
},
"pl": {
"fileReplacements": [
{
"replace": "src/assets/i18n/translations.json",
"with": "src/assets/i18n/pl.json"
}
]
},
"en": {
"fileReplacements": [
{
"replace": "src/assets/i18n/translations.json",
"with": "src/assets/i18n/en.json"
}
]
},
"productionPl": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
},
{
"replace": "src/assets/i18n/translations.json",
"with": "src/assets/i18n/pl.json"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"productionEn": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
},
{
"replace": "src/assets/i18n/translations.json",
"with": "src/assets/i18n/en.json"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
}
But what I can't live with is copying and pasting the whole production configuration contents into productionEn and productionPl. If I add even more locales, or some third separate aspect that I'd like to specify during build, this pattern would become a total nightmare to maintain. Unfortunately it seem it's the pattern that Angular team recommends in their documentation.
Is there a way to tell Angular CLI that productionEn extends production, so to not duplicate the same configuration code multiple times? Something like the code below:
"build": {
...
"configurations": {
"production": {
(...)
},
"pl": {
"extends": "production",
(...)
},
"en": {
"extends": "production",
(...)
}
}
}
There finally is a way to do it, specifying multiple configurations in the command line:
ng build --configuration=en,production
Relevant issue in Angular repo
Note that --prod flag is ignored when you use --configuration (so you need to add production to the configuration list explicitly).
Angular docs for --configuration=configuration:
A named build target, as specified in the "configurations" section of angular.json. Each named target is accompanied by a configuration of option defaults for that target. Setting this explicitly overrides the "--prod" flag
Aliases: -c
Update: see accepted answer for building with multiple configurations. The details below are now outdated
Reading through some issues and angular.json documentation, it appears that the options act as the defaults for the project
"architect": {
"build": {
"options": {...}
These are overridden with partial options set in the configurations. From the Angular CLI workspace wiki:
configurations (object): A map of alternative target options.
configurationName (object): Partial options override for this builder.
This issue comment also mentions using configurations as an override
This sounds like all of the defaults for the project can be added to the options object e.g. move any duplicates from production, productionPl to the options: {}, and then add the fileReplacements, and the few other overrides that you require
Note: I have not tested this yet, it's just a suggestion based on the docs and issues
But this doesn't work for ng serve you say?
Here's what probably happened:
First, here's my configuration for angular12/architect/build/configurations:
"development": {
"customWebpackConfig": {
"path": "custom-webpack.dev.config.js",
"replaceDuplicatePlugins": true
},
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": false,
"namedChunks": true,
"aot": true
},
"quick": {
"fileReplacements": [
{
"replace": "src/app/app-routing.module.ts",
"with": "src/app/app-routing.module.quick.ts"
}
]
}
I have a standard development config, with an added configuration called quick which is what I want to set in addition to the options from development.
(So my quick is the same as OP's en and pl.)
Sorry this isn't a magic new 'quick Angular build' feature (!) - I simply made a copy of my app-routing file, commented out every lazy module except the one I'm currently working with and configured the fileReplacements option to override the standard file. The build is significant faster for a large project. Clearly though I didn't want to accidentally deploy this which is why I needed a separate configuration.
What happens when you run ng serve --configuration development,quick is it looks in the serve part of the configuration (below). As you can see I added quick here as a browser target, referencing what I have above.
"serve":
{
"builder": "#angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "angular12:build"
},
"configurations":
{
"production": {
"browserTarget": "angular12:build:production"
},
"development": {
"browserTarget": "angular12:build:development"
},
"quick": {
"browserTarget": "angular12:build:quick"
}
},
"defaultConfiguration": "development"
},
What's actually happening when you ask for --configuration development,quick is it merges these two nodes:
"development": {
"browserTarget": "angular12:build:development"
}
"quick": {
"browserTarget": "angular12:build:quick"
}
Which results in:
"development": {
"browserTarget": "angular12:build:development"
}
Makes sense why it didn't work now :-)
Solution:
The solution is fortunately as simple as updating serve/quick to:
"quick": {
"browserTarget": "angular12:build:development,quick"
}
Then simply run:
ng-serve --configuration quick
This will in turn will merge your development and quick configurations under architect/build as if you were running ng build.
PS. You may see I'm using customWebpackConfig. That is the #angular-builders/custom-webpack package that allows for customization. It's irrelevant to my answer, but allowed me to prove to myself that it was indeed working as I was able to observe both my customWebpack plugins running and only the single lazy chunk I wanted was built.
are you ask about ?
"scripts": {
[...]
"build-i18n": "for lang in en es fr pt;
do ng build --config=$lang;
done"
}
I'm trying to compile c++ inside VS Code.
I have MinGW installed.
I've followed the steps in this video: https://www.youtube.com/watch?v=rFdJ68WbkdQ
And the steps at the "getting started" docs https://code.visualstudio.com/docs/languages/cpp
Actually, my config shows like this:
{
"configurations": [
{
"name": "Mac",
"includePath": [
"/usr/include",
"/usr/local/include",
"${workspaceRoot}"
],
"defines": [],
"intelliSenseMode": "clang-x64",
"browse": {
"path": [
"/usr/include",
"/usr/local/include",
"${workspaceRoot}"
],
"limitSymbolsToIncludedHeaders": true,
"databaseFilename": ""
},
"macFrameworkPath": [
"/System/Library/Frameworks",
"/Library/Frameworks"
]
},
{
"name": "Linux",
"includePath": [
"/usr/include",
"/usr/local/include",
"${workspaceRoot}"
],
"defines": [],
"intelliSenseMode": "clang-x64",
"browse": {
"path": [
"/usr/include",
"/usr/local/include",
"${workspaceRoot}"
],
"limitSymbolsToIncludedHeaders": true,
"databaseFilename": ""
}
},
{
"name": "Win32",
"includePath": [
"C:/Program Files (x86)/Microsoft Visual Studio/2017/Community/VC/Tools/MSVC/14.11.25503/include/*",
"C:/Program Files (x86)/Microsoft Visual Studio/2017/Community/VC/Tools/MSVC/14.11.25503/atlmfc/include/*",
"C:/Program Files (x86)/Windows Kits/10/Include/10.0.16299.0/um",
"C:/Program Files (x86)/Windows Kits/10/Include/10.0.16299.0/ucrt",
"C:/Program Files (x86)/Windows Kits/10/Include/10.0.16299.0/shared",
"C:/Program Files (x86)/Windows Kits/10/Include/10.0.16299.0/winrt",
"${workspaceRoot}"
],
"defines": [
"_DEBUG",
"UNICODE"
],
"intelliSenseMode": "msvc-x64",
"browse": {
"path": [
"${workspaceRoot}",
"C:\\MinGW\\lib\\gcc\\mingw32\\6.3.0\\include\\c++",
"C:\\MinGW\\bin"
],
"limitSymbolsToIncludedHeaders": true,
"databaseFilename": ""
}
}
],
"version": 3
}
And the "tasks.json" file has the following:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "build",
"type": "shell",
"command": "g++",
"args": [
"-g", "Calculator.cpp", "-o","Calculator"
],
"group": {
"kind": "build",
"isDefault": true
},
"problemMatcher":"$gcc"
}
]
}
But when I hit "run main task" it prompts:
"> Executing task: g++ -g Calculator.cpp -o Calculator <
'g++' is not recognized as an internal or external command,
operable program or batch file.
The terminal process terminated with exit code: 1"
How can I get gcc detected?
I'm using VS Code with Windows 10 machine BTW.
If you have not added the folder path to windows, try that first.
If that still does not work try adding the full path in "task.json" instead of just g++.
Something like this:
C:/MinGW/bin/g++
I have installed angularjs-gauge component using bower. You can see it shows up in my bower.json below
{
"name": "triangular",
"version": "0.0.0",
"dependencies": {
"jquery": "^3.2.1",
"angular": "1.5.8",
"angular-animate": "1.5.8",
"angular-cookies": "1.5.8",
"angular-material": "1.1.1",
"angular-messages": "1.5.8",
"angular-sanitize": "1.5.8",
"angular-ui-router": "^0.3.1",
"angular-translate": "~2.10.0",
"angular-translate-loader-partial": "~2.10.0",
"angular-translate-storage-cookie": "~2.10.0",
"angular-translate-storage-local": "~2.10.0",
"angular-local-storage": "~0.2.5",
"angular-digest-hud": "~0.1.13",
"highlightjs": "^9.2.0",
"angular-highlightjs": "^0.6.3",
"angular-dragula": "~1.2.2",
"angular-chart.js": "0.10.2",
"angular-google-chart": "~0.1.0",
"angular-nvd3": "^1.0.8",
"angular-google-maps": "2.3.2",
"angular-permission": "^3.2.1",
"angular-linkify": "~1.2.0",
"angular-material-data-table": "0.10.9",
"angular-ui-calendar": "~1.0.1",
"angular-moment": "~1.0.0-beta.4",
"animatewithsass": "~3.2.2",
"countUp.js": "1.6.1",
"font-awesome": "~4.5.0",
"material-design-iconic-font": "~2.2.0",
"weather-icons": "https://github.com/chk1/weather-icons.git#master",
"textAngular": "~1.5.0",
"ng-file-upload": "~12.0.1",
"angular-fixed-table-header": "^0.2.1",
"angularjs-gauge": "^2.1.0"
},
"devDependencies": {
"angular-mocks": "1.5.8"
},
"overrides": {
"angular-material": {
"main": [
"angular-material.js",
"angular-material.scss"
]
},
"weather-icons": {
"main": [
"./css/weather-icons.css",
"./font/*"
]
},
"angular-dragula": {
"main": [
"dist/angular-dragula.js",
"dist/dragula.min.css"
]
},
"font-awesome": {
"main": [
"./css/font-awesome.css",
"./fonts/*"
]
},
"ng-file-upload": {
"main": [
"ng-file-upload-shim.js",
"ng-file-upload.js"
]
}
},
"resolutions": {
"angular": "1.5.8",
"jquery": "~2.2.1"
},
"main": [
"triangular.js",
"triangular.css",
"triangular.scss"
],
"ignore": [
"README.md"
]
}
for some reason it shows up here but the tag never gets created in the index.html file for angularjs-gauge. the others seem to work fine. If I go into my bower_components folder and then click on the bower.json file for the angularjs-gauge component it shows this.
{
"name": "angularjs-gauge",
"version": "1.2.0",
"description": "A Gauge directive for Angular 1.x apps and dashboards",
"keywords": [
"angular",
"gauge",
"speedometer",
"js",
"dial",
"semi",
"full",
"arc"
],
"main": "src/angularjs-gauge.js",
"authors": ["Ashish Chopra"],
"license": "MIT",
"homepage": "https://github.com/ashish-chopra/angular-gauge",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"angular": "~1.5.8"
}
}
I tried putting the main element in a list and tried using override as suggested in this post.
Grunt wiredep not wiring some bower components
But every time I ran my gulp tasks it just inserts all the bower components except angularjs-gauge. How do I get it to add the tag in the index file and not skip over this one?
look at this plugin https://www.npmjs.com/package/gulp-bower, haven't tested it but it seems suit you perfectly
I was trying to deploy my aurelia application using gulp. Once deployed however I see all the css and js files being requested with multiple dist directories in the request path. I don't quite know why this is occurring.
This is one of the warning message in the chrome console
Resource interpreted as Stylesheet but transferred with MIME type text/html:
"
http://integration.mcc.gto.intranet.db.com/mcc-gui/mu/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/dist/styles/bootstrap-theme-3.3.2.min.css"
This is my bundles section in the gulp build tasks:
{
"bundles": {
"dist/app-build": {
"includes": [
"[**/*.js]",
"**/*.html!text",
"**/*.css!text"
],
"options": {
"inject": true,
"minify": true,
"depCache": true,
"rev": false
}
},
"dist/aurelia": {
"includes": [
"aurelia-framework",
"aurelia-bootstrapper",
"aurelia-event-aggregator",
"aurelia-fetch-client",
"aurelia-router",
"aurelia-animator-css",
"aurelia-templating-binding",
"aurelia-polyfills",
"aurelia-templating-resources",
"aurelia-templating-router",
"aurelia-loader-default",
"aurelia-history-browser",
"aurelia-logging-console",
"aurelia-pal-browser",
"aurelia-templating-binding",
"bootstrap",
"bootstrap/css/bootstrap.css!text",
"bootstrap-tour",
"d3",
"fetch",
"font-awesome",
"jquery",
"lodash",
"moment"
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": false
}
}
}
}