Angular2 и Webpack bootstraping

Я недавно начал изучать Angular2, и поскольку я уже знал немного Webpack, я хотел использовать их вместе. Я последовал за некоторыми руководствами и учебниками онлайн, чтобы придумать довольно простое приложение, единственная проблема, с которой я сейчас сталкиваюсь, заключается в том, что я не могу ее запустить. Я думаю, что я сделал все правильно, но, несмотря на то, что тег компонента, где приложение должно быть смонтировано, остается пустым. Мои файлы являются следующие:Angular2 и Webpack bootstraping

main.ts

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


platformBrowserDynamic().bootstrapModule(AppModule);

webpack.config.js

const webpack = require('webpack'); 

module.exports = { 

    entry: './public/main.ts', 
    output: { 
     path: './dist', 
     filename: 'app.bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       loader: 'awesome-typescript-loader!angular2-template-loader' 
      }, 
      { 
       test: /\.html$/, 
       loader: 'html' 
      } 
     ] 
    }, 
    resolve: { 
     extensions: ['', '.ts', '.js'] 
    }, 
}

tsconfig.json

{ 
    "compilerOptions": { 
     "target": "es5", 
     "experimentalDecorators": true, 
     "module": "commonjs", 
     "typeRoots": [ 
      "./node_modules/typings/" 
     ], 
     "types": [ 
      "core-js" 
     ] 
    }, 
    "exclude": [ 
     "node_modules", 
     "typings/main", 
     "typings/main.d.ts" 
    ] 
}

index.html

<!DOCTYPE html> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <title>Songs App</title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body> 
     <script src="../node_modules/zone.js/zone.js"></script> 
     <script src="../node_modules/reflect-metadata/Reflect.js"></script> 
     <script src="./../dist/app.bundle.js"></script> 
     <song-app></song-app> 
    </body> 
</html>

Компонент элемент приложение является <song-app>. Любая помощь будет принята с благодарностью.

РЕДАКТИРОВАТЬ 1:

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

import { AppComponent } from './components/App.component'; 
import { AppRoutingModule, routingComponents } from './app.routing'; 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     AppRoutingModule 
    ], 
    declarations: [ 
     AppComponent, 
     routingComponents 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {}

EDIT 2:

app.component

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'song-app', 
    templateUrl: './App.component.html' 
}) 
export class AppComponent { 
    title = 'Song List App'; 
}

Шаблон, который я использую, - это просто простой div с переменной title внутри.

источник

2016-12-26 Telmo Alves

ли вы рассмотреть возможность использования угловых кли? –

Можете ли вы добавить код AppModule на вопрос? –

@ R.Richards Отредактировал вопрос, чтобы включить файл app.module в соответствии с запросом. –

Ну, попробовав подрезать что-нибудь лишнее, чтобы указать причину, которую я обнаружил, что я вызывал zone.js в html-файле, но мне не хватало папку /dist/ в URL-адресе, чтобы она никогда не вызывала зону, она открылась множество других проблем, но теперь это фактически дает ошибку.

источник

2016-12-26 02:09:44

Ваш дескриптор селектора (<song-app>) должен быть размещен над линией, загружающей файл bundle.js, поскольку элемент <song-app> должен быть доступен для bundle.js для загрузки в него шаблона компонентов.

В вашем index.html:

<body> 
      <script src="../node_modules/zone.js/zone.js"></script> 
      <script src="../node_modules/reflect-metadata/Reflect.js"></script> 
      <song-app></song-app> 
      <script src="./../dist/app.bundle.js"></script> 

     </body>

источник

2016-12-26 09:54:57 saurav1405

Я действительно делал это при поиске решения, и это, возможно, способствовало возникновению проблемы, поскольку Что ж. –

Angular2 и Webpack bootstraping

ответ

Смежные вопросы