Struggling with the relative path in Angular 2 components

My settings can be found below. I wanted to utilize relative paths for the component, but unfortunately, I am encountering this issue:

Error: 404 GET /js/some.component.html

I am currently utilizing SystemJS.

some.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
    moduleId: module.id,
    selector: 'relative-path',
    templateUrl: 'some.component.html',
    styleUrls: ['some.component.css'],

})

export class SomeRelativeComponent {
}

app.component.ts

import { Component } from '@angular/core';
import { SomeRelativeComponent } from './some.component';
@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1>
  <relative-path></relative-path>
  `,
  directives: [SomeRelativeComponent]
})
export class AppComponent { }

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "./js"
  }
}

Folder Structure:

https://i.sstatic.net/vnlUz.png

There seems to be an absence of some.component.html in the /js directory. How can I resolve this and save it there when my components are located in the /app directory?

Answer №1

When configuring your ts.config.json file, you specify the outdir where the .js files are exported.

If you need to make changes to the outdir, consider using a tool like Gulp, which allows for file manipulation through streams. With Gulp, you can create tasks to move, concatenate, minify, and more with your .css and .js files.

package.json

"devDependencies": {
    "typescript": "^1.8.10",
    "typings": "^1.0.4",
    "gulp": "^3.9.1",
    "path": "^0.12.7",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-typescript": "^2.13.1",
    "gulp-tsc": "^1.1.5",
    "run-sequence": "^1.2.2"
}

To utilize Gulp, add the necessary dependencies in your package.json and install them using npm: https://www.npmjs.com/package/gulp

In a single gulpfile.js within your project solution, you can define tasks and set up pre-compilation with watchers, providing convenience.

For TypeScript usage, consider the following:

gulpfile.js

var destPathComponents = './wwwroot/app/';

var tsProject = ts.createProject('tsconfig.json');
gulp.task('Components_JS', function () {
    var tsResult = tsProject.src()
        .pipe(ts(tsProject));

    return tsResult.js.pipe(gulp.dest(destPathComponents));
});

It is important to note that when using the tsconfig.json with Gulp, the outDir value from tsconfig.json takes precedence over the path specified in the gulpfile.js.

Using Gulp is highly recommended for efficient task management.

Here is another example demonstrating how Gulp can be used with simple CSS:

gulp.task('Components_HTML', function () {
    return gulp.src([
        '*.html'
    ], {
        cwd: "Sources/**"
    })
        .pipe(gulp.dest(destPathComponents));
});

This defines a gulp task named "Components_HTML," which copies all HTML files to the destination path './wwwroot/app/' in this case. I hope this information proves helpful.

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

Utilizing a syntax highlighter in combination with tsx React markdown allows for cleaner

I'm currently looking at the React Markdown library on Github and attempting to incorporate SyntaxHighlighter into my markdown code snippets. When I try to implement the example code within a function used for rendering posts, I encounter the error de ...

When should you utilize the Safe Navigation Operator (?.) and when is it best to use the Logical AND (&&) operator in order to prevent null/undefined references?

Imagine having an object property (let's call it arrThatCouldBeNullOrUndefined: SomeObjType) in your Angular component. You aim to perform an array operation (let's say filter() operation) on its data: DataType[] object and save the result in an ...

Encountering a CORS error while utilizing a Node.js Express API with an Angular frontend

While developing an API using Node.js, Express, and MongoDB, I encountered a CORS error when trying to call the API from an Angular application. Strangely enough, the API works fine when deployed on Render, but throws an error locally. Error: Access to XM ...

Updating Object Properties in Angular 6 without Explicitly Setting Them

In my editor, users can modify product details. To allow for resetting these edits, I store the initial product instance in ngOnInit as initialProduct. However, I've encountered a strange problem: When adding a new tag, the properties of initialProdu ...

Can you explain how to utilize prop values for setting attributes in styled-components v4 with TypeScript?

Overview Situation: const Link = styled.a` border: solid 1px black; border-radius: 5px; padding: 5px; margin: 10px 5px; `; type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>; const LinkAsButton = styled(Link).attrs<ButtonP ...

The extend keyword in TypeScript causing issues with type inference

Why is TypeScript showing an error in the code below? type A = { kind: "a" } type B = { kind: "b" } const a = (a: A): void => undefined const b = (b: B): void => undefined const c = <C extends A | B>(c: C): void => (c.kind == "a" ? a(c) : ...

Exploring the implementation of custom global declaration in the latest version of NextJS, version

Looking to implement custom global declaration in NextJS In my NextJS project, I've defined a global prototype for String as shown below utils.d.ts export {} declare global { interface String { /** * Returns string after removing all htm ...

Customize the date format of the Datepicker in Angular by implementing a personalized pipe

I am dealing with a datepicker that defaults to the MM/dd/yyyy format, and I need it to adjust based on the user's browser language. For example, if the browser language is English India, then the format should be set to dd/MM/yyyy as shown below. Be ...

Invalid component prop provided to ButtonBase in Material UI. Ensure that the children prop is correctly rendered in this custom component

Forgive me for asking a basic question, as I am not the most proficient frontend developer and have searched extensively online. Whenever I inspect my frontend application in Chrome, I keep encountering this error. (3) Material-UI: The component prop pro ...

What are the signs that Angular 2 code has been written in HTML for display within a div using innerHTML?

Let's frame the question differently: In my Application, I have a button: <div #displayDiv></div> <button (click)="genTable()"></button> The function in the component is as follows: @ViewChild('displayDiv') div: E ...

Struggling to implement cookie functionality in Go language

I've been trying to figure out the issue by watching videos like this one and checking out this link. There's also a similar question on Stack Overflow This is the code I've been working with: func articlesHandler(w http.ResponseWriter, r * ...

Exploring the Annotation of Higher-Order Functions in Typescript

I've been tackling a challenge of migrating a sizable JS code base to TypeScript, and I've hit a roadblock when trying to annotate a specific higher order function... doStuff() takes fn1 as an argument and wraps it to return a new function that ...

Creating a new store in Redux Typescript can be challenging due to issues with the middleware

import { configureStore } from "@reduxjs/toolkit"; import { userAPI } from "./api/userAPI"; export const server = import.meta.env.VITE_SERVER; export const store = configureStore({ reducer: { [userAPI.reducerPath]: userAPI ...

Encountering issues with MatToolbar in Angular 9 causes unexpected errors

Running Angular version 9.2.0 Encountering an issue while importing the MatToolbarModule in a module and utilizing it in the HTML template. The error message reads as follows: This could indicate that the library (@angular/material/toolbar) that declar ...

Is there a way to utilize the same code in a template without having any redundant duplicates

How can I display the same HTML code in a modal window after clicking on a button in my Angular2 component? Is there a way to achieve this without duplicating the code? html code. ... ... ... <div class="modal fade" id="a" tabindex="-1" role="mod ...

Determine the return type based on the input parameter and a mapping strategy

I am encountering an issue with the inferred returnType of the following types. The problem lies in the cityAttractions type, where it should ideally have a type error in its return statement for returning a string instead of an array of strings. Playgrou ...

Using Checkboxes in React with Material-UI

I am currently facing an issue with my 2 checkboxes. Whenever I select one, both of them get selected automatically. I want the user to be able to choose one, both, or none at all. It's puzzling why they are both getting selected simultaneously. Here ...

Customizing the HTMLElement class to modify particular attributes

Is there a way to modify the behavior of an HTMLElement's scrollTop property by adding some extra logic before updating the actual value? The common approach seems to be deleting the original property and using Object.defineProperty(): delete element. ...

Utilizing a switch case for typing

I am working on a React component that takes in a list and a type as props. The list is an array of objects, while the type is an optional enum string. Inside this component, there is a function that uses a switch case statement to enforce a specific type ...

What kind of index object has values that depend on the keys?

Can this kind of task be accomplished? type GeometryParams = { rectangle: { x:number, y:number, width:number, height:number}, circle: { x:number, y:number, radius:number } }; type GeometricShapes = { [shapeName in keyof GeometryParams]:{ ...