Angular 2 Problème Affichage du contenu

Question

Je vais commencer par poser cette question en disant que je suis assez nouveau pour Angular 2 et Angular en général, donc il y a de fortes chances que cette question ait une réponse vraiment facile. Quoi qu'il en soit, le voici. J'ai essayé de créer un site Web, et mon problème est que Angular n'insèrera pas mes composants. Il reste à la partie où il est dit Chargement ... et ne chargera pas dans mes affaires, même si elles sont en HTML simple. Je vais fournir ce que je suis sûr que sont les fichiers pertinents, mais si vous avez besoin de quelque chose de plus, n'hésitez pas à demander.

Voici systemjs.config.js:

(function (global) { 
    System.config({ 
     transpiler: 'ts', 
     typescriptOptions: { 
      // Copy of compiler options in standard tsconfig.json 
      "target": "es5", 
      "module": "commonjs", 
      "moduleResolution": "node", 
      "sourceMap": true, 
      "emitDecoratorMetadata": true, 
      "experimentalDecorators": true, 
      "lib": ["es2015", "dom"], 
      "noImplicitAny": true, 
      "suppressImplicitAnyIndexErrors": true 
     }, 
     meta: { 
      'typescript': { 
       "exports": "ts" 
      } 
     }, 
     paths: { 
      // paths serve as alias 
      'npm:': 'https://unpkg.com/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      'app': 'app', 

      // angular bundles 
      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', 
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', 

      // other libraries 
      'rxjs': 'npm:rxjs@5.0.1', 
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 
      'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js', 
      'typescript': 'npm:typescript@2.2.1/lib/typescript.js', 

     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './src/bootstrap.ts', 
       defaultExtension: 'ts', 
       meta: { 
        './*.ts': { 
         loader: 'systemjs-angular-loader.js' 
        } 
       } 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      } 
     } 
    }); 

})(this); 

systemjs-angular-loader.js:

var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm; 
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g; 
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g; 

module.exports.translate = function (load) { 
    if (load.source.indexOf('moduleId') != -1) return load; 

    var url = document.createElement('a'); 
    url.href = load.address; 

    var basePathParts = url.pathname.split('/'); 

    basePathParts.pop(); 
    var basePath = basePathParts.join('/'); 

    var baseHref = document.createElement('a'); 
    baseHref.href = this.baseURL; 
    baseHref = baseHref.pathname; 

    if (!baseHref.startsWith('/base/')) { // it is not karma 
     basePath = basePath.replace(baseHref, ''); 
    } 

    load.source = load.source 
     .replace(templateUrlRegex, function (match, quote, url) { 
      let resolvedUrl = url; 

      if (url.startsWith('.')) { 
       resolvedUrl = basePath + url.substr(1); 
      } 

      return 'templateUrl: "' + resolvedUrl + '"'; 
     }) 
     .replace(stylesRegex, function (match, relativeUrls) { 
      var urls = []; 

      while ((match = stringRegex.exec(relativeUrls)) !== null) { 
       if (match[2].startsWith('.')) { 
        urls.push('"' + basePath + match[2].substr(1) + '"'); 
       } else { 
        urls.push('"' + match[2] + '"'); 
       } 
      } 

      return "styleUrls: [" + urls.join(', ') + "]"; 
     }); 

    return load; 
}; 

index.html:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Website</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="/static/css/app.css" /> 
    <base href="/"> 
</head> 
<body> 
    <abi-app>Loading...</abi-app> 
</body> 
<!-- Libraries imports --> 
<script src="node_modules/core-js/client/shim.min.js"></script> 
<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/reflect-metadata/reflect.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 
<!-- Configure SystemJS --> 
<script src="systemjs.config.js"></script> 
<script> 
    //bootstrap the Angular2 application 
    System.import('app').catch(console.log.bind(console)); 
</script> 
<script src="http://localhost:35729/livereload.js"></script> 
</html> 

gulpfile.js:

var gulp = require('gulp'); 
var connect = require('gulp-connect'); 
var PATHS = { 
    src: 'src/**/*.ts', 
    html: 'src/**/*.html', 
    css: 'src/**/*.css' 
}; 

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

gulp.task('ts2js', function() { 
    var typescript = require('gulp-typescript'); 
    var sourcemaps = require('gulp-sourcemaps'); 

    var tsResult = gulp.src(PATHS.src) 
     .pipe(sourcemaps.init()) 
     .pipe(typescript({ 
      noImplicitAny: true, 
      module: 'system', 
      target: 'ES5', 
      moduleResolution: 'node', 
      emitDecoratorMetadata: true, 
      experimentalDecorators: true 
     })); 

    return tsResult.js 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest('dist')) 
     .pipe(connect.reload()); 
}); 

gulp.task('play', ['ts2js'], function() { 
    var http = require('http'); 
    var open = require('open'); 
    var watch = require('gulp-watch'); 



    var port = 9000, 
     app; 

    connect.server({ 
     root: __dirname, 
     port: port, 
     livereload: true, 
     fallback: 'index.html' 
    }); 
    open('http://localhost:' + port + '/index.html'); 

    gulp.watch(PATHS.src, ['ts2js']); 
    watch(PATHS.html).pipe(connect.reload()); 
    watch(PATHS.css).pipe(connect.reload()); 
}); 

bootstrap.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './components/app/app.module'; 
platformBrowserDynamic().bootstrapModule(AppModule); 

app.module.ts:

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { RouterModule } from '@angular/router'; 
import { HttpModule } from '@angular/http'; 
import { Home } from './home'; 
import { Gallery } from './gallery'; 
import { AppRoutingModule } from './app-routing.module'; 
import { NavigationMenuComponent } from './navigation-menu/navigation-menu.component'; 

import { ABIComponent } from './app.component'; 
import { HomeModule } from './home/home.module'; 

@NgModule({ 
    imports: [BrowserModule, HttpModule, HomeModule, AppRoutingModule], 
    declarations: [ABIComponent, NavigationMenuComponent ], 
    bootstrap: [ABIComponent ] 
}) 
export class AppModule { } 

app.component.ts:

import {Component} from '@angular/core'; 
import { Router } from '@angular/router'; 
import { NavigationMenuComponent } from './navigation-menu/navigation-menu.component'; 

@Component({ 
    selector: 'abi-app', 
    template: `<div> 
        <h1>Hello World!</h1> 

       </div>` 
}) 
export class ABIComponent { 

} 

Si vous êtes intéressé par ce que l'arbre est de ce projet:

/src

--components

--- app

---- app.component.ts

---- app.module.ts

- - bootstrap.ts

/gulpfile.js

/ind

ex.html

/systemjs-angular-loader.js

/systemjs.config.js

Answer 1

Utilisez @ angulaire/cli au lieu d'utiliser webpack: -

https://cli.angular.io/