2017-11-27 2 views
4

Ich habe folgende Projekte Baumhttp-loader nicht html aus einem anderen Projekt

some-project 
    some-project.component.ts 
    some-project.html 
    index.ts 
    webpack.conf.js 


another-project 
    another-project.component.ts 
    anpther-project.html 
    index.ts 
    webpack.conf.js 

Ich bin mit webpack von einem anderen-Projekt einzubeziehen und einige Projekte in ein anderes-Projekt importiert. Aber sieht aus wie HTML-loader von antoher-Projekt nicht htmls sieht von einem Projekt

/some-project.html 
Module parse failed: Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 

Wie mit diesem Problem umgehen?

hier ist Konfiguration für ein anderes Projekt- tsconfig.json

{ 
    "awesomeTypescriptLoaderOptions": { 
    "forkChecker": true, 
    "useWebpackText": true, 
    "transpileOnly": false 
    }, 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "lib": [ 
     "dom", 
     "es2015" 
    ], 
    "types" : [ 
     "jquery", 
     "jasmine", 
     "angular-mocks", 
     "angular-animate", 
     "node" 
    ], 
    "typeRoots": [ 
     "node_modules/@types", 
     "./node_modules", 
     "./typings/global.d.ts"  
    ] 
    }, 
    "files": [ 
    "src/index.ts" 
    ], 
    "exclude": [ 
    "node_modules" 
    ] 
} 

webpack Config

{ 
    devtool: 'inline-source-map', 
    entry: sourcePath + '/index.ts', 
    output: { 
     path: __dirname, 
     filename: 'bundle.js' 
    }, 
    externals: { 
     "angular": "angular" 
    }, 
    module: { 
     rules: [{ 
       test: /\.ts$/, 
       include: path.resolve('../../some-project/src'), 
       exclude: /node_modules/, 
       use: [ 
        'awesome-typescript-loader'    
       ] 
      }, 
      { 
       test: /\.(html)$/, 
       include: path.resolve('./src'), 
       use: { 
        loader: 'html-loader', 
        options: { 
         minimize: true, 
         collapseWhitespace: true 
        } 
       } 
      } 
     ] 
    }, 
    resolve: { 
     extensions: ['.ts', '.js'], 
     modules: [ 
      path.resolve('./node_modules'), 
      sourcePath 
     ] 
    }, 

    plugins: 
    [ 
     new webpack.NamedModulesPlugin() 
    ], 

    stats: { 
     colors: { 
      green: '\u001b[32m', 
     } 
    } 
} 
+1

Haben Sie die Knotenabhängigkeiten für beide Projekte installiert? Weil der Fehler so ist, wie Sie das HTML-Plugin nicht enthalten haben. Wie auch immer, könnten Sie Ihren webpack.config.js Inhalt zeigen? Vielleicht setzen Sie eine root/context Eigenschaft. Wenn nicht, könnte das sein, dass Sie die Eigenschaft tsconfig.json 'rootDir' setzen. –

+0

ich habe die Konfiguration hinzugefügt, können Sie sich das bitte anschauen? – VladosJS

+0

es sieht aus wie das ist wahrscheinlich lose verwandt mit [tag: eckig], nicht [tag: eckigjs], aber es scheint kein Problem zu sein Winkel könnte lösen ... – Claies

Antwort

2

Also ich das Problem behoben. Ich musste den korrekten Pfad zum html-loader übergeben

Verwandte Themen