각도 2 문제를 표시하는 문제

Question

저는이 질문을 제가 앵귤러 2와 앵귤러에 대해 상당히 익숙하다는 말로 시작하려고합니다. 그래서이 질문은 정말 쉬운 대답이 될 것입니다. 어쨌든, 여기 있습니다. 나는 웹 사이트를 만들려고 노력하고 있는데, 내 문제는 Angular가 내 구성 요소를 삽입하지 않는다는 것입니다. 그것은 Loading ...이라고 말한 부분에 머무르며 간단한 HTML 일 때도 내 물건에로드되지 않습니다. 필자가 관련 파일이라고 확신하는 것을 제공 하겠지만, 더 필요한 것이 있으면 주저하지 말고 물어보십시오.

여기 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 { 

} 

당신이 나무가이 프로젝트의 무엇에 관심이 있다면 :

/src에

--components

--- 응용 프로그램

는 ---- ----

을 app.component.ts

을 app.module.ts - - 부트 스트랩 .ts

/gulpfile.js

/ind ex.html

/systemjs-angular-loader.js

/systemjs.config.js

대신 웹팩을 사용하여 각도/CLI @

Answer 1

사용 : -

https://cli.angular.io/