Angular 网页包捆绑服务

我有一个angular 4应用程序，我正在将其从systemjs转换为网页包

我有一个名为config.service.ts的angular服务，它是通过一行导入的，您可以在下面看到

Unexpected token (17:14)
You may need an appropriate loader to handle this file type.
| import { ConfigService } from './services/config.service';

webpack似乎正在尝试查找可用于.service文件的加载程序，但这只是一个typescript文件

有没有办法配置webpack以正确加载这些文件

webpack.config.ts：

const path = require('path');
module.exports = {
entry: {
    'polyfills': './app/polyfills.ts',
    'vendor': './app/vendor.ts',
    'app': './app/app.component.ts'
},
resolve: {
    extensions: ['.ts', '.js']
},
output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
},
module: {
    rules: [
        {
            test: '/\.ts$/',
            loaders: [
                {
                    loader: 'awesome-typescript-loader',
                    options: { configFileName: './tsconfig.json' }
                }, 'angular2-template-loader'
            ]
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }
    ]
}
};

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false
  }
}

将webpack.config.js更改为在main.ts而不是app.component.ts中输入后出现错误消息：

ERROR in ./app/app.module.ts
Module parse failed: <path omitted>\app.module.ts Unexpected token (72:15)
You may need an appropriate loader to handle this file type.
|
| // Routes should be listed in the order of most specific to least specific
| const appRoutes: Routes = [
|     //{ path: '/', component: MainPageComponent },
|     //{ path: 'alerts', component: AlertsPageComponent }
 @ ./app/main.ts 2:0-41

---

你能显示你的webpack.config.js文件吗？你有

解析：['ts'，'js']

块吗？在上面添加了我的webpack.config.ts。是的，我确实有一个解析块。我试着添加.service.ts、.service等，看看是否有帮助，但不幸的是，它没有起作用。很难说，但似乎你的“ts”文件没有通过你的加载程序处理-这就是为什么它抱怨Typescript。最终，Webpack只真正理解javascript。它可能与您的tsconfig.json文件有关，您也可以发布吗？添加了我的tsconfig.json。不确定根本原因是什么，但在我的ts loader网页包配置中。我没有添加选项1。看起来只有

加载器：['awesome-typescript-loader'，'angular2模板加载器']

和一条注释，

'app'：'./app/app.component.ts'

的条目似乎不正确。它应该指向用于引导应用程序的

main.ts

文件。

// imports omitted

enableProdMode();

// UI Component imports
import {
    // importing a bunch of primeng components
} from 'primeng/primeng';

import { NgSemanticModule } from 'ng-semantic/ng-semantic';

import { AppComponent }   from './app.component';
// other component imports omitted

// Routes should be listed in the order of most specific to least specific
const appRoutes: Routes = [
    //{ path: '/', component: MainPageComponent },
    //{ path: 'alerts', component: AlertsPageComponent }
];

@NgModule({
    imports: [
        RouterModule.forRoot([]),
        BrowserAnimationsModule,
        // other imports omitted for length
    ],
    declarations: [
        // omitted
    ],
    providers: [
        // services listed here
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }