Creating assets from typescript plugins in Angular 6: A comprehensive guide

Situation

I am currently in the process of migrating from Angular 4 and Angular Seed to Angular 6 and Angular CLI.

Challenge

One issue I am facing is with dynamic loading of plugins within a component using SystemJS.

SystemJS.import("client/plugins/" + this.pluginElement.type + "/" + this.pluginElement.type + ".js")

When running the application, I encountered the following error:

http://localhost/client/plugins/dapChart/dapChart.js 404 (Not Found)

This indicates that the js file is not present as an Asset.

Within the src/client/plugins folder, there are modules written in Typescript that can be utilized in the application.

I am seeking a solution to instruct Angular CLI to compile the plugins folder and treat the output as an asset, copying it directly into the dist folder.

Possibilities

I have considered three options, although I do not have concrete evidence on which one is optimal:

  • Investigate how to customize the Angular-cli build https://codeburst.io/customizing-angular-cli-6-build-an-alternative-to-ng-eject-a48304cd3b21 However, being new to this, it may require a significant amount of time.

  • Manually compile the plugins folder and place it into a "pluginCompiled" directory, then declare it as Assets in Angular.json with 

     tsc -p src/client/plugins --outDir src/client/assets/plugins

    This method involves stopping the server, compiling, and restarting ng serve each time, making it cumbersome.

  • Create a sub project (workspace) in Angular.json specifically for compiling plugins and storing them in a "pluginCompiled" folder.

Inquiry

How can I include my transpiled plugins in the build output directory when using Angular 6 / Angular CLI?

angulartypescriptangular-cli

Answer №1

I can't actually remember the exact way I did it myself, but one option is to include the cli config file.

For Angular-CLI, you could potentially use something similar to this:


"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "client": [ "plugins": [ ] ], //a configuration like this
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The error message received is: "npm encountered an issue as it was unable to read the property 'resolve'

Whenever I try to execute a command using "npm" or "ng," I keep encountering this error message. I am delving into Nativescript and Angular, and I feel utterly confused at the moment... Any insight on why these errors are popping up? For instance, when ...

angularnpmundefinedangular-resolver

Performing an HTTP POST request in Angular 2

After starting my work with Angular 2 and TypeScript, everything was going great. However, I encountered an issue when working with a REST API (POST) where the console log displayed Response {_body: "", status: 204, statusText: "Ok", headers: Headers, type ...

javascriptangularresttypescript

Using the Ternary Operator in JavaScript to Dynamically Update HTML Elements with Angular

Is there a way to convert the code below into a ternary operator so that it can be used in an .HTML file? statusChange && statusChange === 'Employed' ? true : employmentStatus === 'Employed'; To clarify, I want to assign the re ...

javascriptangular

Next.js Version 13 - Unable to find solution for 'supports-color' conflict

Currently in the midst of developing a Next.js 13 app (with TypeScript) and utilizing the Sendgrid npm package. An ongoing issue keeps popping up: Module not found: Can't resolve 'supports-color' in '.../node_modules/debug/src' ...

node.jstypescriptnext.js

What are the necessary steps to deploy Angular 2 universal starter on a third-party server host such as Google Cloud or Azure?

I recently cloned the universal-starter (webpack version) repository and successfully got it running on my local machine using npm start and npm run watch as per the provided instructions. However, I hit a roadblock after running npm run build and trying ...

expressangularwebpackweb-deploymentangular-universal

Type the query into the search bar on the website, hit the submit button, and receive the search results

Is there a way to dynamically pass any query string (from any oracle table, not hardcoded) from a webpage form/field to the database and have the webpage display a table/grid of the results without predefining columns or table names? Current examples I&apo ...

javascriptnode.jsspringangularspring-boot

How to stop a checkbox from being selected in Angular 2

I have a table with checkboxes in each row. The table header contains a Check All checkbox that can toggle all the checkboxes in the table rows. I want to implement a feature where, if the number of checkboxes exceeds a certain limit, an error message is ...

javascriptangulartypescriptangular2-ngmodel

Is there a way to implement error validation successfully in React Hook Form while utilizing template literals within the register function?

Utilizing React Hook Form along with Typescript, I am in the process of constructing a series of forms using a configuration object. Within this configuration object, there exists a key named prop which is of type string and is being passed to the register ...

reactjstypescriptreact-hook-form

The 'connectedCallback' property is not found in the 'HTMLElement' type

After taking a break from my project for a year, I came back to find that certain code which used to work is now causing issues: interface HTMLElement { attributeChangedCallback(attributeName: string, oldValue: string, newValue: string): void; con ...

typescript

Integrating additional JavaScript into an Ionic 2 project

Imagine we have a foo.js file containing a variable, function, and class that are not yet part of the project. Now suppose we want to access these elements in our home.ts method or make them globally available for use within a home.ts method. How can this ...

javascriptangulartypescriptionic2faye

How to include subdirectories in a TypeScript npm module

I am in the process of developing a package for npm and I would like it to be imported in the following manner: import myPackage from 'my-package'; import { subFunction1, subFunction2 } from 'my-package/subfunctions'; Upon trying to u ...

javascripttypescriptnpm

Why is the bearing attribute important in determining the location of an object?

I have started using this plugin to enable GPS functionality in my app. If you are interested, the link to the plugin can be found here: https://github.com/mauron85/cordova-plugin-background-geolocation My question is about the bearing property of the lo ...

angularcordovaionic-frameworkcordova-plugins

Developing React component libraries with TypeScript compared to Babel compiler

Currently, I'm utilizing the babel compiler for compiling my React component libraries. The initial choice was influenced by Create React App's use of the same compiler. However, I've encountered challenges with using babel for creating libr ...

reactjstypescriptbabeljstsc

Managing errors with Angular2 Observables within the HTML template

The updated Angular's use of observables is a game-changer. No more long chains of .done().fail().always() like in JQuery - NG2 simplifies it all with the | async pipe. However, what happens if something goes wrong while loading data for myObservable? ...

angulartypescriptrxjsangular2-template

Challenges in Power BI Custom Visual Development: Trouble setting height for div elements

Currently, I am working on creating a custom visual for Power BI that includes a leaflet map within a div element. However, the issue arises when I fail to set a specific height for the map, resulting in an empty visual. I have managed to set a fixed heigh ...

typescriptpowerbi

An unconventional approach to conducting runtime checks on Typescript objects

I've been working on a server application that receives input data in the form of JavaScript objects. My main task is to validate whether these data meet certain requirements, such as: having all required fields specified by an interface ensuring th ...

typescripttypechecking

Embracing Typescript version 2.7 and above allows for utilizing multiple types within a parameter, enabling developers to efficiently handle specific properties

Imagine a scenario where a ChildClass is extending the ParentClass. You can view the code on Stackblitz here. The ChildClass simply adds a public property called "brainPower": class ParentClass{ _me: string; constructor() { this._me = "I'm ...

typescript

When using Angular with mdbootstrap, the mdb-tabs directive will move to the end if the ngIf condition is true

Currently facing a challenge with a significant amount of code here. It is referenced as follows: "ng-uikit-pro-standard": "file:ng-uikit-pro-standard-8.3.0.tgz", I am attempting to display a tab between 1 and 3 if a certain condition ...

cssangulartypescriptbootstrap-4mdbootstrap

Use Typescript to access and utilize the value stored in local storage by using the

Trying to retrieve the language setting from localHost and implement it in a translation pipe as shown below: transform(value: string): string {... localStorage.setItem("language", JSON.stringify("en")); let language = JSON.parse(loca ...

angulartypescript

How can I get rid of the table borders and set colors for every other row in the

How can I remove the border lines from a table and assign colors to alternate rows in the table? Follow this link for the code: https://stackblitz.com/angular/kooxxyvddeqb?file=app%2Ftable-sticky-columns-example.css Thank you in advance ...

htmlcssangulartypescript