无法加载 AngularJS 2 路由器

Question

我的 Angular 2 项目有问题。

结构:

- 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>

当我在浏览器中打开项目时出现错误：

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

我不明白为什么它找到 angular2/angular2 模块而不是 angular2/router。在我的 angular2 模块文件夹中，我有路由器文件。谢谢大家！

Answer 1

路由器模块不在主angular2模块中

您必须添加：

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

无法加载 AngularJS 2 路由器

Can't load AngularJS 2 router

javascript

angular

typescript

gulp

systemjs