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.

angulartypescript

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

Validating React Typescript Props: Ensuring that two specific props do not exist simultaneously

Currently, I'm developing a reusable component in React-Typescript and I am looking to validate my props OnClick and component as follows: Both onClick and component prop are optional. These props will only be passed to the component if they need to ...

reactjstypescripttypescript-typingsreact-typescript

The Angular Material Tree component is not rendering properly in an Angular tutorial demonstration

Upon completing the installation of @angular/material, @angular/cdk, and @angular/animations through npm install --save, I attempted to reconstruct the flat tree example provided by Angular. Unfortunately, even after addressing the error message stating Co ...

cssangulartreeangular-material

Incorporate an HTML span element with an onclick function bound in Angular framework

Is there a way to incorporate different icons by adding a span based on a flag, with an onclick event that triggers an internal function defined in the component ts? testfunc(){ console.log("it works") } flagToIcon(flag: boolean) { switch ( ...

angulartypescript

When an additional data stream is introduced, Resolver is unable to effectively resolve the issue

I have been working on implementing a resolver to fetch data based on the parameters provided by the route. However, I encountered an issue where the resolver does not resolve when there is an additional data stream that my data depends on. When I direct ...

angularangular6angular-routerangular-resolver

Encountering issues when trying to combine Sequelize with TypeScript

As I attempted to transition my NodeJs application to TypeScript, I encountered issues with Sequelize. Upon attempting to implement the code from a website, an error occurred: This expression is not constructable. Type 'typeof import("/home/de ...

javascriptnode.jstypescriptsequelize.js

Steps for importing jQuery to vendor.ts in Angular 2 webpack

Currently, I am in the process of setting up my Angular 2 app using webpack. As I review the vendor.ts file, I notice this specific structure. // Angular 2 import '@angular/platform-browser'; import '@angular/platform-browser-dynamic'; ...

angulartypescript

Reaching the maximum request threshold

Currently, I am facing an issue where users are able to upload files from the client side (using Angular 4) to the server (implemented with Spring Boot). The problem arises when a user attempts to upload more than 6 files at once. In such cases, Chrome uti ...

javascriptajaxangulargoogle-chromebrowser

Using observable object fields as query parameters in Firestore allows for dynamic filtering and retrieval

I have two separate services in my Angular project: an Auth service and a query service. The Auth service handles user authentication by managing the login process and observing changes to the user object. import {Injectable} from '@angular/core&apo ...

angularfirebaserxjsgoogle-cloud-firestore

The TypeScript error is causing issues in the Express router file

Here is the structure of my module: import * as express from 'express'; let router = express.Router(); router.post('/foo', function(req,res,next){ // ... }); export = router; However, I'm encountering the following error: ...

typescriptexpresstypescript2.0tsc

Reactify TypeScript: Accurate typings for onChange event

How can I resolve the issues with types for target: { value: any, name: any }? The errors I encounter include Duplicate identifier 'any'. and Binding element 'any' implicitly has an 'any' type.. Additionally, why does the erro ...

reactjstypescript

Transform a flat 2D shape into a dynamic 3D projection using d3.js, then customize the height based on the specific value from ANG

Currently, I am utilizing d3.js version 6 to generate a 3D representation of the 2D chart shown below. Within this circle are numerous squares, each colored based on its assigned value. The intensity of the color increases with higher values. My goal is t ...

javascripthtmlangularjsangulard3.js

Matching the appropriate data type for interface attributes

In the process of developing a module (module1), I have defined the following interface type: interface ModuleOneInterface { keyOne: customInterface; keyTwo: customInterface; keyThree: customInterface; } Now, as I work on another module (modul ...

typescripttypescript-typingsreact-typescript

After compiling, global variables in Vue.js 2 + Typescript may lose their values

I am currently working on a Vue.js 2 project that uses Typescript. I have declared two variables in the main.ts file that I need to access globally throughout my project: // ... Vue.prototype.$http = http; // This library is imported from another file and ...

javascripttypescriptvue.jsvuejs2

Configuring environment variables during Jest execution

A variable is defined in my `main.ts` file like this: const mockMode = process.env.MOCK_MODE; When I create a test and set the variable to true, it doesn't reflect as `'true'` in the main file, but as `'false'` instead. describe ...

javascriptnode.jstypescriptunit-testingjestjs

Creating a global variable in Angular 4 and Ionic 3 is simple when following these steps

Currently, I am developing an application in ionic3 and within it, there are numerous services and functions that utilize specific variables such as: let apiUrlPublic = 'http://localhost:8080/'; let apiUrl = 'http://localhost:9999/api/&apo ...

angularionic-frameworkglobal-variablesionic3

I encounter an error in my JavaScript function indicating that it is not defined

let element = document.querySelector("#value"); let buttons = document.querySelectorAll(".btn"); buttons.forEach(function (button) { button.addEventListener("click", function(event){ console.log(event.currentTarge ...

javascripttypescript

The Angular2 app and NodeJs in the Docker container are unresponsive

After creating a new Angular2 app using angular-cli and running it in Docker, I encountered an issue where I could not connect to it from localhost. First, I initialized the app on my local machine: ng new project && cd project && "put m ...

node.jsangulardocker

constant element within mat-menu in Angular

This coding snippet displays unread notifications to users: <mat-menu #menu="matMenu"> <div class="menu-item" mat-menu-item *ngFor="let item of notifications"> ...item content </div> <b ...

cssangularangular-material

Injecting Dependencies into an Angular 6 Service

Within my typescript file, I have a collection stored in an array. component.ts list: any[]; constructor( private listProcessor: ListProcessor ) {} ngOnInit() { this.listProcessor.getListItems() .subscribe( res => { th ...

angularservicedependenciescomponentscode-injection

Issue with Socket.io Client: Consistently receiving error messages for an incorrect

Here is the server-side code: import http from 'http'; import Koa from 'koa'; import { Server } from 'socket.io'; (async () => { const app = new Koa(); var server = http.createServer(app.callback()); var io = new Se ...

node.jstypescriptsocket.iokoa