Angular应用程序中App Module中的意外字符'@'，但没有错误

Question

我正在使用webpack在MEAN堆栈中构建自定义种子项目。当我运行'npm run build'来捆绑应用程序时，我收到了一个我以前从未见过的错误。

我已经看到其他一些人收到了这样的错误，但是他们的错误恰当地指向了包含代码错误的文件，或者没有提供解决方案。这很难搞清楚，因为我正确导入NgModule（'6：0'在我的NgModule前面引用了应用程序模块中的'@'）。

我想知道是否有可能使用Angular 2与Angular 4依赖关系导致此问题？我尝试删除Angular 2依赖项并再次构建，但再次收到同样的错误。

这是我的错误：

ERROR in ./assets/app/app.module.ts
Module parse failed: /Desktop/new-app/assets/app/app.module.ts Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type.
| import { AppComponent } from "./app.component";
|
| @NgModule({
|     declarations: [AppComponent],
|     imports: [BrowserModule],
 @ ./assets/app/main.ts 5:0-41

应用程序模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from "./app.component";
@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    bootstrap: [AppComponent]
})
export class AppModule {
}

应用程序组件

import { Component } from '@angular/core';
@Component ({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
}

依赖关系

{
  "name": "new-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "build": "del public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch"
  },
  "dependencies": {
    "angular2-universal": "^2.1.0-rc.1",
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/platform-server": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@angular/upgrade": "^4.0.0",
    "body-parser": "^1.17.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "core-js": "^2.4.1",
    "rxjs": "^5.2.0",
    "zone.js": "^0.8.5",
    "express": "^4.15.3",
    "hbs": "~4.0.1",
    "morgan": "~1.8.1",
    "preboot": "^5.0.0-rc.11",
    "serve-favicon": "~2.4.2"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.42",
    "@types/node": "^8.0.6",
    "angular2-router-loader": "^0.3.5",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.2.1",
    "del-cli": "^1.1.0",
    "html-loader": "^0.4.5",
    "typescript": "^2.4.1",
    "webpack": "^3.0.0",
    "webpack-merge": "^4.1.0"
  }
}

webpack.config.common.js

var webpack = require('webpack');

module.exports = {
    entry: {
        'app': './assets/app/main.ts'
    },

    resolve: {
        extensions: ['.js', '.ts']
    },

    module: {
        rules: [
            {
                test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            },
            {
                test: /\.css$/,
                use: [{ loader: 'raw-loader' }]
            }
        ],
        exprContextCritical: false

    }
};

webpack.config.dev.js

var webpack = require('webpack');
var commonConfig = require('./webpack.config.common.js');
var webpackMerge = require('webpack-merge');
var path = require('path');

module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',

  output: {
    path: path.resolve(__dirname + '/public/js/app'),
    filename: 'bundle.js',
    publicPath: '/js/app/',
    chunkFilename: '[id].chunk.js'
  }
});

感谢您的帮助。

Answer 1

我两次遇到这个条目，每次因为突然得到：＆＃34;意外的角色＆＃39; @＆＃39; in ... in Angular Application＆＃34;错误，而不是在代码中找到因为。

对我来说，错误两次证明是使用了＆＃39; .js＆＃39;扩展而不是＆＃39; .ts＆＃39;

示例：

@Pipe({name:'test'})

AND错误发生在＆＃39; @＆＃39;

的位置

然后检查您的文件扩展名：它是＆＃39; .ts＆＃39;？