Having trouble loading AngularJS 2 router

I'm encountering an issue with my Angular 2 project.

Directory :

- project
  - dev     
     - api
     - res
         - config
         - script
             - js
                 - components
                     - blog.components.js
                     - blog.components.js.map
                 - pipes
                 - services
                 - bootstrap.js
                 - bootstrap.js.map
             - ts
                 - components
                     - blog.components.ts
                 - pipes
                 - services
                 - bootstrap.ts
                 - tsconfig.json
         - style
             - css
             - sass
         - templates
             - components
                 - app.component.html
                 - blog.component.html
         - index.php
  - dist
     - api
     - res
         - config
         - script
             - js
                 - components
                    - blog.component.min.js
                 - pipes
                 - services
                 - bootstrap.min.js
         - style
             - css
         - templates
             - components
                 - app.component.html
                 - blog.component.html
     - index.php
  - node_modules
  - gulpfile.js
  - package.json

gulpfile.js :

    var gulp            = require('gulp'),
        sass            = require('gulp-sass'),
        autoprefixer    = require('gulp-autoprefixer'),
        minifycss       = require('gulp-minify-css'),
        concat          = require('gulp-concat'),
        typescript      = require('gulp-typescript'),
        uglify          = require('gulp-uglify'),
        htmlmin         = require('gulp-htmlmin'),
        livereload      = require('gulp-livereload'),
        changed         = require('gulp-changed'),
        plumber         = require('gulp-plumber'),
        rename          = require('gulp-rename');

function handleError (error) {
    console.error.bind(error.toString());
    this.emit('end');
}

gulp.task('process-styles', function() {
    return gulp.src('dev/res/style/sass/*.scss')
        .pipe(plumber({errorHandler: handleError}))

        .pipe(changed('dev/res/style/css/'))

        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(concat('all.css'))

        .pipe(gulp.dest('dev/res/style/css/'))

        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/res/style/css/'))

        .pipe(livereload());
});

gulp.task('process-scripts', function() {
    var tsconfig = typescript.createProject('dev/res/script/ts/tsconfig.json', {typescript: require('typescript')});

    return gulp.src('dev/res/script/ts/**/*.ts')
        .pipe(plumber({errorHandler: handleError}))

        .pipe(changed('dev/res/script/js/'))

        .pipe(typescript(tsconfig))
        .pipe(gulp.dest('dev/res/script/js/'))

        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('dist/res/script/js/'))

        .pipe(livereload());
});

gulp.task('process-templates', function() {
    return gulp.src('dev/res/templates/**/*.html')
        .pipe(plumber({errorHandler: handleError}))

        .pipe(changed('dist/res/templates/'))

        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist/res/templates/'))

        .pipe(livereload());
});

gulp.task('process-index', function() {
    return gulp.src('dev/index.*')
        .pipe(plumber({errorHandler: handleError}))

        .pipe(livereload());
});

gulp.task('watch', function() {
    var server = livereload();
    livereload.listen();

    gulp.watch('dev/res/style/sass/*.scss', ['process-styles']);
    gulp.watch('dev/index.*',               ['process-index']);
    gulp.watch('dev/res/script/ts/**/*.ts', ['process-scripts']);
    gulp.watch('dev/res/templates/**/*.html',   ['process-templates']);
});

gulp.task('default', ['process-styles', 'process-scripts', 'process-templates', 'watch']);

package.json :

{
    "name": "project",
    "version": "1.0.0",
    "description": "",
    "main": "gulpfile.js",
    "dependencies": {
        "gulp": "^3.9.0",
        "gulp-autoprefixer": "^3.1.0",
        "gulp-changed": "^1.3.0",
        "gulp-concat": "^2.6.0",
        "gulp-htmlmin": "^1.2.0",
        "gulp-livereload": "^3.8.1",
        "gulp-minify-css": "^1.2.2",
        "gulp-plumber": "^1.0.1",
        "gulp-rename": "^1.2.2",
        "bootstrap": "^3.3.6",
        "gulp-sass": "^2.1.0",
        "gulp-typescript": "^2.10.0",
        "gulp-uglify": "^1.5.1",
        "angular2": "^2.0.0-alpha.48",
        "gulp-live-server": "^0.0.29",
        "typescript": "^1.7.3",
        "gulp-ruby-sass": "^2.0.6",
        "live-server": "^0.8.2",
        "uglifyjs": "^2.4.10",
        "systemjs": "^0.19.6",
        "underscore": "^1.8.3",
        "sass": "^0.5.0"
    },
    "devDependencies": {
        "angular2": "^2.0.0-alpha.48",
        "bootstrap": "^3.3.6",
        "gulp": "^3.9.0",
        "gulp-autoprefixer": "^3.1.0",
        "gulp-changed": "^1.3.0",
        "gulp-concat": "^2.6.0",
        "gulp-htmlmin": "^1.2.0",
        "gulp-live-server": "^0.0.29",
        "gulp-livereload": "^3.8.1",
        "gulp-minify-css": "^1.2.2",
        "gulp-plumber": "^1.0.1",
        "gulp-rename": "^1.2.2",
        "gulp-ruby-sass": "^2.0.6",
        "gulp-sass": "^2.1.0",
        "gulp-tsc": "^1.1.4",
        "gulp-typescript": "^2.10.0",
        "gulp-uglify": "^1.5.1",
        "live-server": "^0.8.2",
        "sass": "^0.5.0",
        "systemjs": "^0.19.6",
        "typescript": "^1.7.3",
        "uglifyjs": "^2.4.10",
        "underscore": "^1.8.3"
    },
    "author": "",
    "license": "ISC"
}

tsconfig.json :

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    }
}

dev/res/script/ts/bootstrap.ts :

import {bootstrap, Component, Injectable, View} from 'angular2/angular2';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_BINDINGS} from 'angular2/router';
import {BlogComponent} from './components/blog.component';

@Injectable()
@Component ({
    selector:   'app'
})
@RouteConfig([
    {
        path:       '/', 
        component:  BlogComponent, 
        as:         'blogComponent'
    }
])
@View({
    templateUrl: 'res/templates/components/app.component.html',
    directives: [ROUTER_DIRECTIVES]
})
export class App {}

bootstrap(App);

dev/res/script/ts/components/blog.component.ts :

import {Component, Injectable} from 'angular2/angular2';

@Injectable()
@Component({
    selector: 'blog',
    templateUrl: 'res/templates/components/blog.view.component.html'
})
export class BlogComponent {}

dev/index.php :

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="../node_modules/systemjs/dist/system.src.js"></script>
        <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
        <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
        <script>
            System.config({
                packages: {'res/script/js': {defaultExtension: 'js'}}
            });
            System.import('res/script/js/bootstrap');
        </script>
    </head>
    <body>
        <app></app>
    </body>
</html>

Upon opening the project in the browser, I'm receiving the error message:

GET http://localhost/project/dev/angular2/router 404 (Not Found)

The inconsistency between finding angular2/angular2 module but not angular2/router is puzzling to me. The router file is present in my angular2 module directory. Thank you for any assistance!

javascriptangulartypescriptgulpsystemjs

Answer №1

The router module is not included in the main Angular 2 module

To fix this issue, you need to include the following script:

<script src="../node_modules/angular2/bundles/router.dev.js"></script>

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

Learning how to track mouse wheel scrolling using jQuery

Is there a way to track mouse scrolling using jquery or javascript? I want the initial value to be 0 and increment by 1 when scrolling down and decrement by 1 when scrolling up. The value should always be positive. For example, if I scroll down twice, the ...

javascriptjqueryhtmlcss

At what point does IE7 recalculate styles? It seems to have difficulty functioning consistently when a class is applied to the body

Currently facing a peculiar issue. I'm utilizing a class on the element as a toggle switch to control various layout behaviors on my website. When the class is active, specific actions occur; when it's inactive, these actions do not take place. ...

javascriptcssinternet-explorerinternet-explorer-7

The use of `await` within a loop may not function as anticipated when the code is being run through Puppeteer, yet it functions flawlessly when executed in the browser's console

Currently, I am assessing the functionality of the codeToBeEvaluated function within a browser environment using puppeteer. Within codeToBeEvaluated, there is a while loop designed to trigger an alert (referenced as LINE B) every 10 seconds. The issue ari ...

javascriptnode.jsasync-awaitpuppeteer

What is the best way to modify the class of specific items within an ngFor loop in

I apologize if this question has already been addressed, but I couldn't find a suitable solution. My goal is to develop a basic chat application where messages sent by the current user are displayed on the right side of the screen, while messages from ...

angularionic2

Tips for updating the DOM within a map function by utilizing the onChange event with a checkbox and react hooks

Initially, I imported a basic "database" object from another file that contains an array of students. I then used map to iterate through the student array and display all the students on the window object. Everything was working fine until I attempted to ...

javascriptreactjsreact-hooks

The THREE.LineSegments - geometry.updateNeeded isn't refreshing

Hello, I'm having trouble updating my THREE.LineSegments using geometry.needsUpdate. In my animation, I am drawing a square side by side in a clockwise motion with each iteration. Even though I can see that the values of the side array are changing co ...

javascriptarraysthree.jsline-segment

Having trouble importing images in React and passing them as a prop?

I'm attempting to import images, place them into an array, and then pass that array to a prop in a component to display different images. However, after passing the array to the component, the items accessed from the array are showing as undefined, pr ...

javascriptreactjsimage

Store various dropdown selections in an array

Questions are being generated from a database for users to answer using a drop-down menu. Upon selecting a specific option, a suggestion is added to an array triggering a JavaScript on-change event. Once all questions are answered, the array including all ...

javascriptphplaravel

What is the reason that specifying the type of function parameters does not result in conversion being

Seeking clarity here. I have a TypeScript function (using version 1.7) that is linked to the change event of a select dropdown in HTML: toggleWorker(stsID: number): void { // get status object by selected status ID let cStatus: Status = this.s ...

typescriptangular

How to Redirect a Webpage to the Same Tab in ASP.NET

I am currently using an asp.net hyperlink control to direct users to a web URL when the hyperlink is clicked. My goal is for the user to open a new tab, rather than a new window, when they click the hyperlink. If the user clicks the link again, I want th ...

c#javascripthyperlinkasp.net-controls

Encountering an issue: Module not found - 'cryptile' during express js installation

Just dipping my toes into the world of Node.js and I'm encountering some obstacles when trying to install Express.js. Seeking assistance in resolving this issue and successfully setting up Express.js. https://i.stack.imgur.com/PlHiB.png Interestingl ...

javascriptnode.jsexpress

Unable to retrieve data from SpringBoot controller using $http.get request

I have developed an application that will execute queries on my store's database based on user input on the webpage. The backend method is functioning correctly and returns the response, but I am having trouble displaying the data in a dynamic table o ...

javascriptangularjsspringspring-bootdynamic-tables

Node application experiencing issues retrieving SVG files during production

When testing my application locally, the svg files display correctly with the code below (Angular.js variables are used within curly brackets): <img ng-src="img/servant_{{servant.personality}}.svg" draggable="false"> However, once deployed on Herok ...

javascriptnode.jsangularjssvgexpress

Establishing a minimum width for the value of zero in AmCharts column series by customizing the bullet labels

Here's an interesting example where I have arranged column series with bullet labels. However, you may notice that there are some 0 values present as well. My goal is to establish a minimum width for the series so that even if the value is small or 0, ...

javascriptchartsamchartsamcharts4

Connecting a pre-existing Angular 2 application to a Node.js server: A step-by-step guide

I am currently working on an Angular 2 application with the following structure : View Structure of my Angular app Furthermore, on the server side : View Structure of server app I have noticed that there are two module dependencies folders, but I am un ...

javascriptnode.jsangular

Can you explain the meaning of `(error: T) => void` in error?

I've come across this particular syntax in a few Typescript libraries and I am trying to grasp its meaning. error?: (error: T) => void I have seen it being used like so: class SomeClass { someFunction(error?: (error: T) => void){ } ...

typescript

Transform an { Key : Value } Object into Regular Variables using jQuery

Here is a code snippet in PHP: foreach($myarray as $key=>$value) { ${$key} = $value; } Now, I am wondering if we can achieve the same functionality using JS/jQuery? In this jQuery example, I am trying to assign the value of each td element with a cla ...

phpjavascriptjqueryarraysobject

What is a common mistake when using refs in React?

I've recently started diving into React. I've seen conflicting opinions on using refs - some sources claim it's a bad practice altogether. Can someone clarify this for me? Is it harmful to attach refs to child components in order to access ...

javascriptreactjsrefs

There seems to be an issue with the .html() function in one of my

I'm currently in the process of transitioning my code to Angular and I could use some assistance with creating a directive. Here's what I'm trying to convert: jQuery(document).ready(function ($) { "use strict"; $('#cool-naviga ...

javascriptangularjs

Issues with Javascript functionality on aspdotnetstorefront site

Lately, I've been facing some challenges with my Javascript and jQuery codes when trying to implement them in the storefront. Despite attempting different methods to create a slider, none seem to work within the store environment - even though they fu ...

javascriptjqueryaspdotnetstorefront