Question

我有一个角度4的应用程序，我正在从systemjs转换为webpack。

我有一个名为config.service.ts的角度服务，它会导入一行，你可以在下面看到。

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

似乎webpack正在尝试找到一个适用于.service文件的加载器，但这只是一个打字稿文件。

有没有办法配置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

这些路径实际上并没有做任何事情，它在我的待办事项清单上。我尝试删除代码，它只是将错误移动到下一个导入。

app.module.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 { }

Webpack捆绑Angular 4服务

0 个答案: