Configuring Systemjs to properly load the templateUrl in Angular2ORSetting

Question

Configuring Systemjs to properly load the templateUrl in Angular2ORSetting

I am facing an issue with systemjs while working with angular2.

index.html

System.config({
     packages: {
       'app': {
               format: 'register',
               defaultExtension: 'js'
        },
        'angular2': {
                defaultExtension: 'js'
        },
        'rxjs': {
               defaultExtension: 'js'
        }
    },
    paths: {
        '*': 'dist/*',
        'app/*': 'dist/app/*',
        'angular2/*': 'node_modules/angular2/*',
        'rxjs/*': 'node_modules/rxjs/*'
    }
});

System.import('app/main.js').then(null, console.error.bind(console));

app.js

import {NavbarComponent} from './components/navbar/navbar';
@Component({
    selector: 'main-app',
    templateUrl: './app/app.html',
    directives: [RouterOutlet, NavbarComponent]
})

This is the structure:

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

When I run serve:

dev: {
        port: 8080,
        host: "127.0.0.1",
        open: '/',
        root: '.',
        file: "index.html",
        wait: 1000
    },

All .js files are loaded with path
But templateUrl is loaded with path
How can I configure to load templateUrl with path similar to .js file ?

javascript angularjs

Answer 1

Answer №1

Due to the length of this response, I have posted it as an answer instead of a comment.

In response to your question, you must provide a path from the src folder, which is currently working post my earlier comment. Additionally, you mentioned about .map files.

It is possible to configure automatic mapping paths when loading templateUrls by creating gulp tasks like so:

Add this code to your gulpfile.js:

gulp.task('compile-ts', function () {
    var sourceTsFiles = [
        config.allTs,
        config.allcompoTs
    ];

    var tsResult = gulp
        .src(sourceTsFiles)
        .pipe(sourcemaps.init())
        .pipe(tsc(tsProject));

    return tsResult.js
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.tsOutputPath));
});

And include this in your gulp.config.js:

module.exports = function() {

    var config = {
        allTs : 'src/*.ts',
        allcompoTs: 'src/**/*.ts',
        tsOutputPath : 'dist/',
        index : 'index.html'
    };
    return config;
};

You can now customize gulp tasks according to your needs. I hope this proves helpful!

Answer 2

Due to the length of this response, I have posted it as an answer instead of a comment.

In response to your question, you must provide a path from the src folder, which is currently working post my earlier comment. Additionally, you mentioned about .map files.

It is possible to configure automatic mapping paths when loading templateUrls by creating gulp tasks like so:

Add this code to your gulpfile.js:

gulp.task('compile-ts', function () {
    var sourceTsFiles = [
        config.allTs,
        config.allcompoTs
    ];

    var tsResult = gulp
        .src(sourceTsFiles)
        .pipe(sourcemaps.init())
        .pipe(tsc(tsProject));

    return tsResult.js
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.tsOutputPath));
});

And include this in your gulp.config.js:

module.exports = function() {

    var config = {
        allTs : 'src/*.ts',
        allcompoTs: 'src/**/*.ts',
        tsOutputPath : 'dist/',
        index : 'index.html'
    };
    return config;
};

You can now customize gulp tasks according to your needs. I hope this proves helpful!

Configuring Systemjs to properly load the templateUrl in Angular2ORSetting

Answer №1

Similar questions

Media publications do not conform to the current trends

react-intersection-observer is specifically designed to function with the final elements

Display a loading component within the navbar in React while waiting for data to be retrieved

Get the specific URL path from the designated <input type="file"> location

What is the best way for Laravel to utilize the information provided via an Angular Ajax post request

The hyperlink to a different webpage does not trigger any JavaScript functionalities or render any CSS styles

Provide arguments for Auth0 registration

Creating a CSS animation to slide a div outside of its container is

Dropdown box not displaying any choices

Executing asynchronous JavaScript calls within a loop

JavaScript: Array methods and Functions

Updating the state on a click event triggered by a MenuItem in React using Material UI

I am puzzled by the Policy Violation notification I received, especially since I have been in compliance with API Level 33 regulations since August 25, 202

What causes the transformation of [{"value":"tag1"} into [object Object] when it is logged?

Utilizing Jest and nest.js for testing with absolute paths

Is there a way to modify the starting position of my shapes in Three.js?

As you scroll, a box blocks off half of the screen

Leveraging jQuery's `.eq()` method on multiple class selectors

Adding information into MongoDb with the help of mongoose

Leverage the Power of Two AngularJS Factories