Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error with route in production

See original GitHub issue

Hi juste create a little projet with 2 pages.

The problem is the views in components are not displayed

app.component.ts

import {Component} from ‘angular2/core’; import {RouteConfig, ROUTER_DIRECTIVES} from ‘angular2/router’;

import {HomeComponent} from './home.components'
import {CommandezComponent} from './commandez.components'
import {ValidezComponent} from './validez.components'
import {InformationService} from './information.service'

@Component({
    selector: 'my-app',
    template:
        '<div class="container"><router-outlet></router-outlet></div>',
    directives: [ROUTER_DIRECTIVES],
    providers: [InformationService]
})

@RouteConfig([
    {path:'/',             name: 'Home',          component: HomeComponent,        useAsDefault: true},
    {path:'/commandez',    name: 'Commandez',     component: CommandezComponent},
    {path:'/validation',      name: 'Validez',       component: ValidezComponent}
])

export class AppComponent {
}

boot.ts

import {bootstrap}    from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {InformationService} from './information.service';
import {AppComponent} from './app.component';

bootstrap(AppComponent, [
    ROUTER_PROVIDERS, InformationService
]).catch(err => console.error(err));

index.html

<html>
<head>
    <title>MyApp</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="src/assets/style/bootstrap.min.css" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="src/assets/style/animate.min.css" type="text/css">
    <link rel="stylesheet" href="src/assets/style/style.css" type="text/css">

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.js"></script>
    <script src="node_modules/angular2/bundles/http.js"></script>
    <script src="node_modules/angular2/bundles/router.js"></script>
    <base href="/">

    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/boot')
                .then(null, console.error.bind(console));
    </script>

    <html lang="fr">
</html>
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

HomeComponent

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {NgForm}    from 'angular2/common';
import {InformationService} from './information.service';
@Component({
    selector: 'home',
    template: `

    <div class="header-content-inner">
        ....
    </div>
    `,
    directives: [ROUTER_DIRECTIVES]
})
export class HomeComponent {
    constructor(public informationService:InformationService) { }
    onSubmit() { }
}

====> And it produce this HTML :

<html lang="fr">
<head>
     Header ...
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.js"></script>
    <script src="node_modules/angular2/bundles/http.js"></script>
    <script src="node_modules/angular2/bundles/router.js"></script>
    <base href="/">

    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/boot')
                .then(null, console.error.bind(console));
    </script>
</head>

<body>
    <my-app><div class="container"><router-outlet></router-outlet></div></my-app>
</body>
</html>

No error in console

So router-outlet does not works ?

Is there a problem in my code ?

gulpfil.js

var gulp = require('gulp');

var plugins = require('gulp-load-plugins')();
var del = require('del');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var tsc = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var path = require('path');
var fs = require('fs');


var PATHS = {
    src: {
        root: 'src',
        ts: 'app/*.ts',
        html: '*.html',
        css: 'src/assets/style/*.css',
        fonts: 'src/assets/fonts/*.*'
    },
    lib: [
        'angular2/bundles/*.js',
        'angular2/bundles/*.map',
        'systemjs/dist/*.js',
        'systemjs/dist/*.map',
        'es6-shim/*.js',
        'rxjs/bundles/*.js'
    ]
};

var tsProject = tsc.createProject('tsconfig.json', {typescript: require('typescript')});

gulp.task('clean', function(done) {
    del(['dist'], done);
});

gulp.task('ts', function () {
    return gulp.src(PATHS.src.ts)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(tsc(tsProject))
        .pipe(sourcemaps.write('source'))
        .pipe(gulp.dest('dist/app/'));
});

gulp.task('html', function () {
    return gulp.src(PATHS.src.html)
        .pipe(gulp.dest('dist'));
});

gulp.task('css', function () {
    return gulp.src(PATHS.src.css).pipe(gulp.dest('dist/src/assets/style'));
});

gulp.task('fonts', function () {
    return gulp.src(PATHS.src.fonts).pipe(gulp.dest('dist/src/assets/fonts'));
});

gulp.task('libs', function () {
    var size = require('gulp-size');
    return gulp.src(PATHS.lib, { cwd : 'node_modules/**' })
        .pipe(size({showFiles: true, gzip: true}))
        .pipe(gulp.dest('dist/node_modules'));
});

gulp.task('default', ['ts', 'css', 'fonts', 'html', 'libs']);

Issue Analytics

State:
Created 8 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

3reactions

danturucommented, Jan 1, 2016

Next time try to isolate the issue and provide a plunk. But in your case I didn’t find a serve task like:

let connect = require('gulp-connect');

gulp.task('serve',() => {
  connect.server({ port: '8000', root: 'dist' });
})

With this task it works as expected. At first glance…

Without that task you have to change the base href from "/" to "", since if you open index.html directly in a browser the pathname will be something like "/Downloads/myapp/dist/index.html" and as you can see it doesn’t equal to "/". That’s why you have to use a relative base href "", instead of an absolute.

The last point is that without a serve task you can’t use the push location strategy, only the hash location strategy will pass due the security reasons.

0reactions

angular-automatic-lock-bot[bot]commented, Sep 8, 2019

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}