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

Is there a way for my React application to detect changes in an npm package?

I am currently customizing an npm package for my application, but I am facing issues with it not being detected when starting my development server. Previously, I was able to resolve this by removing the library and reinstalling it, followed by replacing t ...

javascriptreactjstypescriptnext.js

Encountering a 500 Error in an Angular 6 application on a .NET Core 2.1.1 framework when deployed

After upgrading my project from the old Visual Studio SPA Angular template to the latest version, including moving from Angular 5 to Angular 6 and webpack to angular-cli, I encountered an issue. While everything works fine in development, I'm facing a ...

angularasp.net-corevisual-studio-2017

I'm still searching for a proper solution on how to access JavaScript/jQuery functions within Colorbox

For my website, I am utilizing PHP, jQuery/JavaScript, Colorbox (a jQuery lightbox plugin), Smarty, and other tools. Currently, I am working on displaying data in a popup using the Colorbox plugin. However, I am facing an issue with calling a JavaScript fu ...

javascriptphpjqueryajaxcolorbox

Error: npm global installation not detected for gulp

My first attempt at using gulp has hit a roadblock. Despite following online instructions, I encountered the error message 'gulp' is not recognized as an internal or external command[...] after installing it both globally and locally. Switching ...

node.jsnpmgulp

Making the Angular 2 Http Service Injectable

I am fetching a large object from my server using an Angular 2 service when the website loads. The structure of the data I need to fetch is as follows: { Edu: [...], Exp: [...], Links: [...], Portfolio: [...], Skills: [...] } Here&apo ...

httpserviceangularinjectable

Perform an addition operation on two numerical values within an AJAX function

Hello, I am a beginner in ajax and I am attempting to sum two numbers within an ajax function. Here is the code snippet that I am using: $("#next_btn").click(function(){ Display_Load(); var page = this.title; var subtract = 1; $("#content" ...

phpjavascriptajax

What is the best way to display two radio buttons side by side in HTML?

Looking at my HTML form in this JSFiddle link, you'll see that when the PROCESS button is clicked, a form with two radio buttons appears. Currently, they are displayed vertically, with the female radio button appearing below the male radio button. I& ...

javascriptjqueryhtmlcssjsp

The 'HTMLDivElement' type does not include the property 'prepend' in Typescript

When working with a typescript method, the following code snippet is used: some_existing_div.prepend(some_new_div) This may result in an error message: [ts] Property 'prepend' does not exist on type 'HTMLDivElement'. However, despi ...

typescript

Exploring the Magic of Class Variable Destructuring in React

Is there a simpler method to break down a prop object and assign them to variables of the same name in the class? I am familiar with ({ first: this.first, second: this.second, } = props) however, it can get complicated when dealing with numerous variable ...

javascriptreactjstypescript

We are currently moving up from NG 12 to NG 16 and encountering an issue with the package "@ng-bootstrap/ng-bootstrap" due to an incompatible peer dependency

When attempting to upgrade from Angular version 12 to version 13, we encountered some dependency errors. Following the instructions at https://update.angular.io/?v=12.0-13.0, we tried running ng update @angular/core@13 @angular/cli@13. We received the fo ...

angularng-bootstrapng

Creating an Elastic Beanstalk instance from an s3 bucket using the aws-sdk tutorial

I am currently facing some difficulties in deploying an elastic beanstalk instance using the AWS JavaScript SDK. My goal is to have the source code come from an S3 bucket. While I know this can be done through the web interface, I am struggling to figure o ...

javascriptnode.jsamazon-web-servicesamazon-s3amazon-elastic-beanstalk

What causes the accordion class to activate panels with varying names?

Why are some of my accordions triggering other accordions when they have different names? I've been working on resolving the issue where opening the second accordion in the second, third, or fourth panel closes the second accordion in the first panel ...

javascripthtmlcsstwitter-bootstrap-3

Challenges arise when dealing with generics in TypeScript

I'm a beginner in TypeScript and I'm trying to write a method with a generic type argument similar to what you can do in .Net. Here's the code snippet I've been working on: class TestObject { Id: number; Truc: string; Machin: str ...

typescript

Differences in behavior of multiple select with track by in Angular versions above 1.4.x

I recently upgraded my product from Angular 1.2.x to 1.4.x. Since updating to angularjs 1.4.x, I've encountered an issue: What I have: I included code snippets for both angular 1.2.0 and 1.4.8. You can check out the comparison on JSFIDDLE. Explanat ...

javascripthtmlangularjshtml-select

Responsive design element order rearrangement

My code example is as follows: <div class="info-container"> <span class="item1">item1</span> <a class="item2" href="#">item2</a> <a class="item3" href="#">item3</a> </div> I want to rearran ...

javascriptjqueryhtmlcssangularjs

Strategies for optimizing progressive enhancement

Designing a website that is accessible to everyone is truly an art form, and Progressive Enhancement is something I hold dear... I am curious to hear about the best techniques you have used to ensure websites work for all users, regardless of their browse ...

javascripthtmlprogressive-enhancement

Generate a form using code that has the trigger turned off by default

Summary: Looking for a solution to avoid the automatic disabling of a programmatically created trigger in a form. function autoTrigger(e) { var result = {}; var responses = e.response.getItemResponses(); for (var i = 0; i < responses.length; i++) ...

javascriptgoogle-apps-scripttriggersgoogle-forms

Join and Navigate in Angular 2

Attempting to retrieve information from a JSON file has been an issue for me. Here is the code snippet: ngOnInit() { this.http.get('assets/json/buildings.json', { responseType: 'text'}) .map(response => response) .subsc ...

javascriptangulartypescript

Acquiring images from an external source and storing them in either the $lib directory or the static folder during the

Currently, I have a Sveltekit project set up with adapter-static. The content for my pages is being pulled from Directus, and my images are hosted in S3, connected to Directus for easy access. I am also managing audio samples in a similar manner. During b ...

javascriptnode.jssveltesveltekit

Download a collection of base64 images as a ZIP file in Angular 4

I am currently developing an Angular2 v4 app using Typescript and I'm looking for a solution to download multiple images (in base64 format) as a Zip file. For instance, I have a sample array like this (containing fake base64 images just for illustrat ...

angularimagetypescriptdownloadzip