How to load assets of library in building app (angular 6) - angular6

I made a library with angular 6 and there are assets into this library.
When I install this library in another app and build that app, assets of library don't exist into production building files.
I don't want to add library assets in angular.json of the app.
How can I load assets of library in building?
Thanks in advance.

According to this documentation
npm supports the "scripts" property of the package.json file, for the
following scripts:
install, postinstall: Run AFTER the package is installed.
So in your package.json file of your own library, add a section like this:
package.json:
{
"name": "app",
"version": "0.0.0",
"scripts": {
"install": "run some script in any language like node-js or python,..."
}
// ...
}
Then you can write a script file (for example in node-js) to do some jobs like copying your assets to wherever you want, compiling some files, etc.
So final changes would be something like this:
package.json:
{
"name": "app",
"version": "0.0.0",
"scripts": {
"install": "node install-assets.js"
}
// ...
}
And in your install-assets.js file you can write codes to copy your files:
var ncp = require('ncp').ncp; // ~ npm i ncp
ncp('sourcePath', 'destPath', function (err) {
if (err) {
return console.error(err);
}
console.log('done!');
});

Related

Environment Flag for Cucumber Protractor E2E Tests?

I have an existing Angular v5 app and have environment.json files for my environments (like DEV, Test, Production, etc.). The environments files are stored in the directory like so: src/Environments/DEV/environment.json.
Here is an example of a dev environment.json file:
{
"Comment": "Environment=DEV",
"API_ORIGIN": "https://myapp-dev",
"ORIGIN": "https://myapp-dev/index.html",
}
There is a root environment.json file in src folder that my app reads from. When I want to use a specific environment I just copy that environment content into the root and run the app.
Now with Cucumber and Protractor is there a way I can pass some command line argument to specify which environment.json file to use based on my setup? I have urls in these environment.json files so I need a way to tell Cucumber and Protractor which environment to use. If I have to copy all of the environment.json files into the e2e folder that is fine with me. Just in case the solution I need to use depends on the tools I am using here is my tsconfig.e2e.json file. Please let me know if it is incorrect:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"chai",
"cucumber",
"node"
]
}
}
Here is the protractor.conf.js file. Let me know if it is incorrect as well please:
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/features/**/*.feature'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'custom',
frameworkPath: require.resolve('protractor-cucumber-framework'),
cucumberOpts: {
// require step definition files before executing features
require: ['./e2e/steps/**/*.ts'],
// <string[]> (expression) only execute the features or scenarios with tags matching the expression
tags: [],
// <string[]> ("extension:module") require files with the given EXTENSION after requiring MODULE (repeatable)
compiler: []
},
// Enable TypeScript for the tests
onPrepare() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
}
};
I'm also using npm if that matters. I'm running these tests with ng e2e command provided by angular.
sure, 2 ways:
pass a parameter to protractor protractor conf.js --params.env="dev" and then refer to it as browser.params.env in specs. Downside is, it will only be available when the config is parsed and the browser is started, so you can really use that in the config itself
Run the process with an env variable MY_VAR=Dev protractor config.js and it will be available anywhere by running process.env.MY_VAR
For reference
https://stackoverflow.com/a/58547994/9150146
https://stackoverflow.com/a/66111592/9150146
P.S.
how you implement it is up to you, but this approach is the most flexible
conf.js
let environment = require('src/Environments/' + process.env.TEST_ENV + '/environment.json');
module.exports = {
baseUrl: environment.API_ORIGIN
}
and start your protractor like so
TEST_ENV=DEV protractor config.js

How do I include process.env.PORT in my script declarations string in my package.json file?

I'm trying to upload my file to Heroku and need to include the PORT specification. All my other projects have had an index.js file whereas this is just html, js, and css so I"m using "live-server" and my script looks like this
"scripts": {
"devserver": "live-server"
},
but I want this
"scripts": {
"devserver": "live-server --port=process.env.PORT"
},
Any idea? Because I have to put npm run devserver in the Procfile but I need to make sure the whole thing accounts and implements the environment variable for Heroku.
You can't make something in package.json dynamic. You can, however exec commands in Node. So, you are better off changing your package.json script to execute a special file:
{
"scripts": {
"devserver": "node startserver.js"
}
}
Then exec your actual function, like this:
const { exec } = require('child_process');
exec('live-server --port=' + process.env.PORT, (error, stdout, stderr) => {
if (error) {
return console.log(`error: ${error.message}`);
}
if (stderr) {
return console.log(`stderr: ${stderr}`);
}
// console.log(`stdout: ${stdout}`);
});

How to set application variable in angular 6?

I'm using angular 6 where we can create multiple applications and libraries apart from default app.module. I want to use an application variable like a url prefix or cache expiry time which can be used in all libraries and applications. But when i declare a variable in environment.ts i can only refer it in it's root directory that is src folder. since other projects where i want to refer to this variable, are not created in its root directory, it throws error at runtime saying it cannot access variables from folders not declared in it's root directory.
Can you please suggest something which can help me get access to application variable across all application.
I found the solution finally.
I created a folder Config at the root level and added a file environment.ts.
I copied the environment variables from src/app/environment/environment.ts into Config/environment.ts but with different values.
Eg. in src/app/environment/environment.ts
i added a variable setTimeout=3000
export const environment = {
production: false,
setTimout=3000
};
and in Config/environment.ts setTimeout=13000
export const environment = {
production: false,
setTimout=13000
};
in app.component.ts i used this setTimeout variable.
constructor(){
console.log("timeout is "+environment.setTimeout);
}
I ran it in dev env and it consoled 3000.
Now i replaced the folowwing line in angular.json
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
with
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "Config/environment.ts"
}
]
Then i ran ng serve [MyAppName] --prod .
And went to dist/myapp folder and ran lite-server to deploy and run app locally.
And my setTimeout value from config/environment.ts replaced the one used during development in app.component.ts from environment/environment.ts file. It consoled 13000.
So in this way i can create a config like folder and use it in any library or app.

What's necessary when deploying an Aurelia/Node application?

I've have built an Aurelia application, but I'm not sure what needs to be pushed to a production server. I've read up on Node and I'm starting to grasp it a little more. If we just push the dist folder (bundled folder), index.html, and package.json, does the server automatically use the json file to pull down the appropriate packages? Or do we have to run npm install on the server's CLI to pull down those packages? If we have to do that, then I'm assuming we must do the same thing with jspm.
Also, along with the json file, do we need do push config.js to production?
Edit
I just ran gulp export and it produces an export folder with the following:
dist folder
jspm_packages folder
config.js
index.html
favicon.ico
I copy all of those files and push them into production. The first error I'm getting it a 404 on main.js
Here's my bundles.js file
module.exports = {
"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-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",
"bootstrap",
"bootstrap/css/bootstrap.css!text",
"fetch",
"jquery"
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": false
}
}
}
};
I'm confused on why it's not loading my nprogress bar. I'm getting the 404 where it's searching for appName/jspm_packages/github/rstacruz-nprogress. Why doesn't it automatically configure this to be bundled/exported? How do I fix it to where it automatically includes all of my libraries that I brought in?
Run the command gulp export. It will bundle the app and copy the necessary files (index.html, config.js, etc...) to a export folder. Then, just copy the export folder to the server. There is no need to install packages in production.
EDIT
When you install a package, such as nprogress, you have to include it into one of the bundle files. The bundles are configured in the build/bundles.js. The aurelia navigation-skeleton comes with 2 bundles configured, one for the aurelia libraries and one for the rest of your application. You can also create more bundles if you want. To add a package into a bundle file, you just have to add its name into the specific array, for example:
//...
"dist/aurelia": {
"includes": [
"aurelia-framework",
"aurelia-bootstrapper",
"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",
"bootstrap",
"bootstrap/css/bootstrap.css!text",
"fetch",
"jquery",
"nprogress"
],
//...
In the above example I am adding nprogress into aurelia bundle. You could add this into app-build bundle, or even create another bundle just for nprogress.
Now, when you run gulp export, nprogress will be bundled into aurelia-######.js file, and it will be ready to work in production.

In the Grunt.js docs, there is a "this.filessrc" option, is it possible to do "this.filesDest"?

I created a Grunt plugin for generating "manifests" in YAML or JSON format. For instance, the task can create package.json or component.json from given metadata, or by using the metadata from one of those files to build the other.
The task also includes an option for reading directories of files to generate "collections" out of files with certain file extensions. So, for example, you can create a "component" manifest that lists out the files required by the component:
{
"name": "My Component",
"description": "",
"version": "",
"scripts": {
"jquery.js",
"component.js"
"one.js",
"two.js",
"three.js"
},
"styles": {
"component.css"
}
}
So, both src and dest are used in the task for building the "collections", however, when you are only generating a package.json or component.json for instance, you only need the dest.
I didn't find a native Grunt method for doing this, or another clean way of accomplishing the same goal?
You can use one of:
grunt.file.expand
grunt.task.normalizemultitaskfiles
Example (simplified):
module.exports = function( grunt ) {
"use strict";
var util = require('util');
grunt.initConfig({
pkg: grunt.file.readJSON("package.json")
});
grunt.registerTask('default', ['normalizeMultiTaskFiles', 'expand']);
grunt.registerTask('normalizeMultiTaskFiles', function(pattern) {
var result = grunt.task.normalizeMultiTaskFiles(['./public/**/*']);
console.log(util.inspect(result[0].src));
});
grunt.registerTask('expand', function() {
var result = grunt.file.expand(['./public/**/*']);
console.log(util.inspect(result));
})
};
Output:
Running "normalizeMultiTaskFiles" task
[ './public/css',
'./public/css/main.css',
'./public/index.html',
'./public/js',
'./public/js/file1.js',
'./public/js/file2.js',
'./public/js/file3.js',
'./public/js/index.js',
'./public/js/lib',
'./public/vendor',
'./public/vendor1.js',
'./public/vendor2.js' ]
Running "expand" task
[ './public/css',
'./public/css/main.css',
'./public/index.html',
'./public/js',
'./public/js/file1.js',
'./public/js/file2.js',
'./public/js/file3.js',
'./public/js/index.js',
'./public/js/lib',
'./public/vendor',
'./public/vendor1.js',
'./public/vendor2.js' ]