Не удается загрузить AngularJS 2 router

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/Рез/скрипт/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/Рез/скрипт/TS/компоненты/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/маршрутизатор. В моей папке модуля angular2 у меня есть файл маршрутизатора. Спасибо вам всем!

Answer 1

модуль маршрутизатора не в главном модуле angular2

Вы должны добавить:

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