Executing the plugin-typescript library within an Angular 2 project hosted on localhost

I am encountering an issue every time I run my angular2 project where numerous files are being loaded, including the 'ts' library from unpkg.com/plugin-typescript/lib/plugin.js. I am looking to eliminate the need for this file to load from another server. I have already installed it locally but when I provide a local path as others, I receive errors indicating "responded with a status of 404 (Not Found)" as follows:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:6240/node_modules/plugin-typescript/lib/logger

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:6240/node_modules/plugin-typescript/lib/factory

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:6240/node_modules/plugin-typescript/lib/format-errors

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:6240/node_modules/plugin-typescript/lib/utils

Failed to load resource: the server responded with a status of 404 (Not Found) index.html:18 Error: Error: XHR error (404 Not Found) loading http://localhost:6240/node_modules/plugin-typescript/lib/logger(…)

My systemjs.config.js contains:

(function (global) {

System.config({

transpiler: 'ts',

typescriptOptions: {

  tsconfig: true

},

meta: {
  'typescript': {
    "exports": "ts"
  }
},
paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  app: 'app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  // other libraries
  'rxjs':                       'npm:rxjs',
  'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
  'ts':                         'npm:plugin-typescript/lib/plugin.js',
  //'ts':                       'https://unpkg.com/plugin-typescript/lib/plugin.js',
  'typescript':                 'npm:typescript/lib/typescript.js'

},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    main: './main.ts',
    defaultExtension: 'ts'
  },
  rxjs: {
    defaultExtension: 'js'
  },
  'angular2-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
  }
}

}); })(this);

And here is my Package.json:

{

"name": "angular2-quickstart",

"version": "1.0.0",

"scripts": {

    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",

    "lite": "lite-server",

    "postinstall": "typings install",

    "tsc": "tsc",

    "tsc:w": "tsc -w",

    "typings": "typings"

},

"license": "ISC",

"dependencies": {

    "@angular/common": "2.0.0-rc.6",

    "@angular/compiler": "2.0.0-rc.6",

    "@angular/compiler-cli": "0.6.0",

    "@angular/core": "2.0.0-rc.6",

    "@angular/forms": "2.0.0-rc.6",

    "@angular/http": "2.0.0-rc.6",

    "@angular/platform-browser": "2.0.0-rc.6",

    "@angular/platform-browser-dynamic": "2.0.0-rc.6",

    "@angular/router": "3.0.0-rc.2",

    "@angular/upgrade": "2.0.0-rc.6",

    "core-js": "^2.4.1",

    "reflect-metadata": "^0.1.3",

    "rxjs": "5.0.0-beta.11",

    "systemjs": "0.19.27",

    "zone.js": "^0.6.17",

    "angular2-in-memory-web-api": "0.0.18",

    "bootstrap": "^3.3.6"

},

"devDependencies": {

    "concurrently": "^2.2.0",

    "lite-server": "^2.2.2",

    "typescript": "^1.8.10",

    "typings": "^1.3.2"

}

}

Given my limited experience with Angular2 and NPM, I'm struggling to find a solution to this problem. Any advice or guidance on how to resolve this issue would be greatly appreciated. Thank you in advance.

Answer №1

For my Angular2 application hosted in IIS, I implemented a URL rewrite in the Web.Config file to redirect requests from "/plugin-typescript/lib/logger/logger" to "/plugin-typescript/lib/logger/logger.js":

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="rewrite directories to .js" stopProcessing="true">
          <match url="(.*[^/])$" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_FILENAME}" pattern="(.*?)\.[a-zA-Z]{1,4}$" negate="true" />
          </conditions>
          <action type="Rewrite" url="{R:1}.js" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

Regards, Steve

Answer №2

The reason for this issue is that the libraries are stored in the /node_modules/ directory which is not accessible to your web browser. To resolve this, move the libraries to a folder within your app's static content directory (for example, in my situation, it was wwwroot/js).

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

deleting the existing marker before placing a new marker on the Mapbox

Upon the map loading with GeoJson data, I have implemented code to display markers at specified locations. It works flawlessly, but I am seeking a way to remove previous markers when new ones are added. What adjustments should be made for this desired func ...

What could be causing the error message "why can't shows read property

Within my Ionic-Angular application, I have successfully loaded the content from the database and printed it on the console. However, I am facing an issue where I cannot bind this content to the view. The error message that appears is displayed in https:// ...

Utilize the TypeScript Compiler API to extract the Type Alias Declaration Node from a Type Reference Node

Currently, I am utilizing ts-morph library which makes use of the TS Compiler API. Here is an example of my code: export type Foo = string export const foo: Foo = 'bar' Whenever I try to find the type for the export of foo, it returns string. H ...

The 'checked' property cannot be bound to 'mat-button-toggle' as it is not recognized as a valid property in Angular 9

I am encountering an issue with my Angular 9 application. I have integrated angular-material and imported the MatCheckboxModule correctly in the module. Here is the version of the material package I am using: "@angular/material": "^10.2.0&q ...

Tricks to access value from a Nativescript array of Switch elements when tapping a Button

Scenario: In my project, I am using Nativescript 5.0 with Angular. The data is fetched from an API and displayed in customers.component.ts I am successfully rendering the elements based on the received IDs in customers.component.html When the user inter ...

Parameters for constructing classes in TypeScript

I've been exploring different coding styles in TypeScript recently. When it comes to initializing an object from a class, what are the advantages and disadvantages of these two code styles in TypeScript? class Class3 { // members private rea ...

Angular 10 introduces a new approach to handling concurrency called "forkJoin"

Here is the code I have: async getBranchDetails() ----component method { let banks = this.bankDataService.getBanks(); let branchTypes = this.branchDataService.getBranchTypes(); forkJoin([banks,branchTypes]).subscribe(results => { ...

What is the best way to utilize the features of component A within component B when they exist as separate entities

Component A has all the necessary functionalities, and I want to use it in Component B. The code for ComponentA.ts is extensive, but it's not written in a service. How can I utilize the logic from Component A without using a service, considering both ...

The behavior of the Ionic checkbox in version 5 seems to be quite delayed

I am facing an issue with binding the checked attribute value on an ion-checkbox, as the behavior seems to be delayed. In my .ts file, I have an array variable named user_id. In my checkbox list, I am trying to populate this array based on which checkboxe ...

What is the best way to avoid special characters in Angular Date pipe?

I have a query that might have been addressed on SO before. However, none of the solutions provided so far have helped me. Therefore, I am posting this question in hopes of finding an answer: I am trying to format a string and escape the h letter within i ...

problem encountered when running "ionic cordova build android --prod --release"

A chat application has been developed using Ionic2. Upon attempting to generate a production build with ionic cordova build android --prod --release, the following error is encountered. Error: ./node_modules/rxjs/observable/BoundCallbackObservable.js ...

Step-by-step guide to setting up Angular 2 with fullpage.js scrolloverflow

I am currently working on a project using Angular 2 that incorporates the fullpage.js port from https://github.com/meiblorn/ngx-fullpage. I am facing an issue with implementing scrolloverflow on a specific section and could use some guidance. I have alread ...

The latest update for angular-devkit/build-angular (version 0.13.4) has brought a new issue with the configuration output. It seems that there is an unrecognized property

After upgrading a project from angular-devkit/build-angular v0.11.4 to v0.13.4, an error is now appearing: Invalid configuration object. Webpack has been initialised using a setup that does not align with the API schema. - configuration.output contains a ...

Row buttons in a mat-table that can be clicked individually

In my mat-table, each row represents an audio recording for a call. At the end of each row, there is a play button that plays the respective audio file when clicked. However, whenever I click any play button, the correct audio file plays but all the play b ...

Utilize a function to wrap the setup and teardown code in Jest

I am attempting to streamline some common setup and teardown code within a function as shown below: export function testWithModalLifecycle() { beforeEach(() => { const modalRootDom = document.createElement('div') modalRootDom.id = M ...

Vue.js - A dynamic parent component generates content based on data passed from a renderless child component

I am currently working on developing a system for generating buttons using vue 3 and vue-class-component. The main goal is to create a flexible button generation process, where the number of buttons generated can vary (it could be just one or multiple). Us ...

What is the best way to create a universal function that can return a promise while also passing along event

I created a specialized function that waits for an "EventEmitter" (although it's not completely accurate as I want to use it on other classes that have once but don't inherit from EventEmitter): export function waitEvent(emitter: { once: Function ...

Block users from printing in text input with Angular

I need to restrict users from entering text into a specific input field, even though they can click on it and select the value. Using the disabled attribute is not an option because it triggers another event when clicked. I also want users to have the ab ...

What could be causing my TSC to constantly crash whenever I try to utilize MUI props?

Currently in the process of converting a JavaScript project using Next.js and Material UI to TypeScript. This is a snippet of code from one of my components. Whenever I include Props as an intersection type along with MUI's BoxProps, the TypeScript c ...

Issue encountered when working with Next Auth and TypeScript: The argument type 'string | undefined' cannot be assigned to the parameter type 'string | Buffer'

Encountering a TypeScript error that states: "Argument of type 'string | undefined' is not assignable to parameter of type 'string | Buffer'." An attempt to integrate NextAuth into a Next.js 14 application and configure logi ...